/* ==========================================================================
   DynamicDNSPro — CSS Global, Tipografía Normalizada y Motor de Temas
   (Claro / Oscuro / Sistema)
   ========================================================================== */

/* --- TEMA CLARO (Variables base) --- */
:root {
    --primary-color: #0284c7;
    --primary-hover: #0369a1;
    --bg-color: #f1f5f9;
    --bg-surface: #ffffff;
    --bg-surface-2: #f8fafc;
    --bg-surface-3: #e2e8f0;
    --text-color: #0f172a;
    --text-muted: #64748b;
    --text-secondary: #334155;
    --border-color: #cbd5e1;
    --border-color-strong: #94a3b8;
    --header-bg: #ffffff;
    --header-border: #e2e8f0;
    --dock-bg: #ffffff;
    --dock-border: #e2e8f0;
    --nav-btn-color: #64748b;
    --nav-btn-hover: #0f172a;
    --nav-btn-active: #0284c7;
    --card-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    --accent-teal: #0d9488;
    --accent-teal-soft: #ccfbf1;
    --accent-teal-ink: #0f766e;
    --status-pill-bg: #f8fafc;
    --status-pill-border: #cbd5e1;
    --status-pill-text: #0f172a;
    --grp-bg: #f8fafc;
    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-size-xs: 0.72rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.875rem;
    --font-size-md: 0.95rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.25rem;
    color-scheme: light;
}

/* --- TEMA OSCURO (Por data-theme="dark") --- */
:root[data-theme="dark"] {
    --primary-color: #38bdf8;
    --primary-hover: #7dd3fc;
    --bg-color: #0a0f14;
    --bg-surface: #182330;
    --bg-surface-2: #0e151e;
    --bg-surface-3: #223244;
    --text-color: #f8fafc;
    --text-muted: #94a3b8;
    --text-secondary: #cbd5e1;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-strong: rgba(255, 255, 255, 0.18);
    --header-bg: #0c1218;
    --header-border: rgba(255, 255, 255, 0.08);
    --dock-bg: #0c1218;
    --dock-border: rgba(255, 255, 255, 0.08);
    --nav-btn-color: #94a3b8;
    --nav-btn-hover: #f8fafc;
    --nav-btn-active: #38bdf8;
    --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    --accent-teal: #2dd4bf;
    --accent-teal-soft: rgba(45, 212, 191, 0.15);
    --accent-teal-ink: #04211c;
    --status-pill-bg: #141d27;
    --status-pill-border: rgba(255, 255, 255, 0.12);
    --status-pill-text: #f8fafc;
    --grp-bg: #0e151d;
    color-scheme: dark;
}

/* --- TEMA SISTEMA (Cuando el SO está en modo oscuro y no se fuerza light) --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary-color: #38bdf8;
        --primary-hover: #7dd3fc;
        --bg-color: #0a0f14;
        --bg-surface: #182330;
        --bg-surface-2: #0e151e;
        --bg-surface-3: #223244;
        --text-color: #f8fafc;
        --text-muted: #94a3b8;
        --text-secondary: #cbd5e1;
        --border-color: rgba(255, 255, 255, 0.1);
        --border-color-strong: rgba(255, 255, 255, 0.18);
        --header-bg: #0c1218;
        --header-border: rgba(255, 255, 255, 0.08);
        --dock-bg: #0c1218;
        --dock-border: rgba(255, 255, 255, 0.08);
        --nav-btn-color: #94a3b8;
        --nav-btn-hover: #f8fafc;
        --nav-btn-active: #38bdf8;
        --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        --accent-teal: #2dd4bf;
        --accent-teal-soft: rgba(45, 212, 191, 0.15);
        --accent-teal-ink: #04211c;
        --status-pill-bg: #141d27;
        --status-pill-border: rgba(255, 255, 255, 0.12);
        --status-pill-text: #f8fafc;
        --grp-bg: #0e151d;
        color-scheme: dark;
    }
}

/* ==========================================================================
   Tipografía Normalizada y Resets
   ========================================================================== */
html, body, input, button, select, textarea, .form-control, .form-select, .btn, .card, .table, .dropdown-menu {
    font-family: var(--font-family-sans) !important;
}

code, kbd, samp, pre, .font-monospace, .mono, [data-mono] {
    font-family: var(--font-family-mono) !important;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--font-size-base);
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn, .nav-btn, .card-header, h1, h2, h3, h4, h5, h6 {
    user-select: none;
    -webkit-user-select: none;
}

* {
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.form-control:focus, .btn:focus {
    box-shadow: none;
    border-color: var(--accent-teal);
}

/* ==========================================================================
   Estructura Jerárquica y Elevación de Componentes
   ========================================================================== */

/* Nivel 1: Contenedor Acordeón de Grupos */
.group-accordion {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 16px !important;
}

.group-accordion-item {
    background-color: var(--grp-color, var(--grp-bg, #f8fafc)) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    overflow: hidden;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.group-accordion-item .accordion-collapse,
.group-accordion-item .accordion-body {
    background: transparent !important;
    background-color: transparent !important;
}

.group-header-btn,
.group-header-btn.collapsed,
.group-header-btn:not(.collapsed),
.group-accordion .accordion-button,
.group-accordion .accordion-button.collapsed,
.group-accordion .accordion-button:not(.collapsed),
.group-accordion-item .accordion-button,
.group-accordion-item .accordion-button.collapsed,
.group-accordion-item .accordion-button:not(.collapsed),
.group-accordion-item .accordion-header {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
    padding: 12px 18px !important;
}

.group-header-btn:focus {
    box-shadow: none !important;
}

/* ── Header de sede: badges de flota + toggle estético ── */
.group-header-btn {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.group-header-btn::after { display: none !important; } /* sin la flecha nativa de Bootstrap */
.group-header-btn > .d-flex { 
    display: flex !important;
    flex-wrap: nowrap !important; 
    width: 100% !important;
    min-width: 0 !important;
} /* header siempre en UNA línea */
.grp-fleet { gap: 6px; }
.grp-stat { display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; line-height: 1; white-space: nowrap; flex: none; }
.grp-stat i { font-size: .42rem; }
.grp-stat b { font-weight: 800; }
.grp-stat.on  { color: #0a7a56; background: rgba(10,157,110,.13); }
.grp-stat.off { color: #c92a2a; background: rgba(224,49,49,.11); }
.grp-stat.upd { color: #9c6400; background: rgba(245,159,0,.16); border: 0; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.grp-stat.upd i { font-size: .62rem; }
.grp-stat.upd:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(245,159,0,.25); }
.grp-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 10px; border-radius: 50%; color: var(--text-secondary); background: var(--bg-surface-2); border: 1px solid var(--border-color); flex: none; transition: background .2s; }
.grp-toggle i { font-size: .62rem; transition: transform .25s ease; }
.group-header-btn:not(.collapsed) .grp-toggle i { transform: rotate(180deg); }
.group-header-btn:hover .grp-toggle { background: var(--bg-surface-3, var(--bg-surface-2)); }

/* ── Acciones y herramientas de sede (Scripts masivos, Parches, Mesh) ── */
.grp-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}
.grp-action-btn {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    border: 1px solid var(--border-color);
    background: var(--bg-surface-2);
    color: var(--text-color);
    cursor: pointer;
    transition: all .15s ease-in-out;
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    user-select: none;
}
.grp-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.grp-btn-scripts {
    border-color: rgba(13, 202, 240, 0.45) !important;
    background: rgba(13, 202, 240, 0.08) !important;
    color: #0891b2 !important;
}
.grp-btn-scripts:hover {
    background: rgba(13, 202, 240, 0.2) !important;
    color: #0891b2 !important;
}
.grp-btn-patches {
    border-color: rgba(255, 193, 7, 0.45) !important;
    background: rgba(255, 193, 7, 0.08) !important;
    color: #b45309 !important;
}
.grp-btn-patches:hover {
    background: rgba(255, 193, 7, 0.2) !important;
    color: #b45309 !important;
}
.grp-btn-mesh {
    border-color: rgba(25, 135, 84, 0.45) !important;
    background: rgba(25, 135, 84, 0.08) !important;
    color: #15803d !important;
}
.grp-btn-mesh:hover {
    background: rgba(25, 135, 84, 0.2) !important;
    color: #15803d !important;
}
.grp-mobile-menu-btn {
    border-color: var(--border-color) !important;
    background: var(--bg-surface-2) !important;
    color: var(--text-color) !important;
}
.grp-mobile-menu-btn:hover,
.grp-mobile-menu-btn:focus {
    background: var(--bg-surface-3) !important;
    border-color: var(--border-color-strong) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .grp-btn-scripts,
:root:not([data-theme="light"]) .grp-btn-scripts {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}
:root[data-theme="dark"] .grp-btn-scripts:hover,
:root:not([data-theme="light"]) .grp-btn-scripts:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
}
:root[data-theme="dark"] .grp-btn-patches,
:root:not([data-theme="light"]) .grp-btn-patches {
    color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
}
:root[data-theme="dark"] .grp-btn-patches:hover,
:root:not([data-theme="light"]) .grp-btn-patches:hover {
    background: rgba(251, 191, 36, 0.25) !important;
    color: #fbbf24 !important;
}
:root[data-theme="dark"] .grp-btn-mesh,
:root:not([data-theme="light"]) .grp-btn-mesh {
    color: #4ade80 !important;
    background: rgba(74, 222, 128, 0.12) !important;
    border-color: rgba(74, 222, 128, 0.35) !important;
}
:root[data-theme="dark"] .grp-btn-mesh:hover,
:root:not([data-theme="light"]) .grp-btn-mesh:hover {
    background: rgba(74, 222, 128, 0.25) !important;
    color: #4ade80 !important;
}

@media (max-width: 576px) {
    .group-header-btn,
    .group-accordion .accordion-button,
    .group-accordion-item .accordion-button {
        padding: 8px 10px !important;
    }
    .group-header-btn .group-title {
        font-size: 0.95rem !important;
    }
    .group-count-badge {
        padding: 2px 6px !important;
        font-size: 0.70rem !important;
    }
    .grp-toggle {
        width: 24px !important;
        height: 24px !important;
        margin-left: 6px !important;
    }
}

/* ── Sub-tarjeta "Recursos compartidos" dentro del acordeón de sede ── */
.grp-res { margin: 0 0 10px; border: 1px dashed var(--border-color); border-left: 3px solid var(--grp-color, #17a2b8); border-radius: 10px; background: var(--bg-surface-2, rgba(255,255,255,.4)); overflow: hidden; }
.grp-res-loose { margin: 0; }
.grp-res-head { display: flex; align-items: center; width: 100%; border: 0; background: transparent; padding: 8px 12px; font-size: .85rem; color: var(--text-color); cursor: pointer; text-align: left; }
.grp-res-head:hover { background: var(--bg-surface-3, rgba(0,0,0,.03)); }
.grp-res-head .grp-toggle { width: 24px; height: 24px; margin-left: 0; }
.grp-res-head:not(.collapsed) .grp-toggle i { transform: rotate(180deg); }
.grp-res .card { margin-bottom: 0 !important; }
@media (max-width: 575.98px) { .grp-res { margin-bottom: 8px; } }

/* ── Selector de destinos del modal "Compartir" ── */
.shr-res { border-bottom: 1px solid var(--border-color); padding: 8px 10px; }
.shr-res:last-child { border-bottom: 0; }
.shr-res-head { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-color); padding-bottom: 6px; }
.shr-grp { margin: 4px 0 6px 26px; }
.shr-grp-t { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 4px; }
.shr-grp-t .shr-cnt { color: var(--accent-teal, #17a2b8); font-size: .72rem; }
.shr-lnk { color: var(--primary-color, #1769ff); cursor: pointer; font-size: .7rem; text-decoration: none; margin-left: 4px; }
.shr-lnk:hover { text-decoration: underline; }
.shr-pick { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.shr-opt { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-secondary); cursor: pointer; padding: 2px 6px; border-radius: 6px; margin: 0; }
.shr-opt:hover { background: var(--bg-surface-2); }
.shr-opt .form-check-input { margin: 0; }
.shr-empty { font-size: .75rem; color: var(--text-muted); font-style: italic; }

/* Cuerpo expandido de la sede: el marco de color envuelve el contenido de
   verdad (suelo y laterales) — las tarjetas nunca tocan el borde del marco. */
.group-accordion-item .accordion-body.grp-body {
    padding: 2px 10px 14px 10px;
}

/* Tarjetas de la sede indentadas bajo su header: raíl lateral con el color del grupo.
   OJO: .row trae márgenes negativos de Bootstrap — hay que anular AMBOS o el
   contenido se sale del marco del grupo por la derecha. */
.group-accordion-item .accordion-body > .row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 8px;
    border-left: 2px solid var(--grp-color, var(--border-color));
    border-radius: 2px 0 0 14px;
}
@media (max-width: 575.98px) {
    .group-accordion-item .accordion-body.grp-body { padding: 0 6px 10px 6px; }
    .group-accordion-item .accordion-body > .row { padding-left: 9px; border-left-width: 2px; }
}

.group-title {
    color: var(--text-color) !important;
    font-weight: 700;
}

.group-ip-badge {
    background-color: var(--bg-surface-2) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    font-size: 0.75rem !important;
}

.group-count-badge {
    background-color: var(--bg-surface-3) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* Nivel 2: Tarjetas Elevadas */
.card {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    box-shadow: var(--card-shadow) !important;
    color: var(--text-color) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* Nivel 3: Well Inset de Telemetría (Discos, CPU, RAM) */
.card-telemetry-box {
    background-color: var(--bg-surface-2) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    color: var(--text-color) !important;
}

.disk-label {
    color: var(--text-color) !important;
}

.disk-temp-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    font-size: 0.65rem !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
}

.card-ip-badge {
    background-color: var(--bg-surface-2) !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--border-color-strong) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
}

.card-ver-badge {
    background-color: var(--bg-surface-2) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
}

.stat-value {
    color: var(--text-color) !important;
}

/* Micro-píldora de energía y batería para footer de tarjeta */
.card-power-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 1px 6px !important;
    border-radius: 5px !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
    vertical-align: middle !important;
}
.card-power-default { background: #f1f5f9; border: 1px solid #cbd5e1; color: #475569; }
.card-power-laptop { background: #e0f2fe; border: 1px solid #7dd3fc; color: #0369a1; }
.card-power-battery { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.card-power-caffeine { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; font-weight: 700; }
.card-power-nosleep { background: #eef2ff; border: 1px solid #c7d2fe; color: #4338ca; font-weight: 700; }
:root[data-theme="dark"] .card-power-default { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: #cbd5e1; }
:root[data-theme="dark"] .card-power-laptop { background: rgba(14, 165, 233, 0.15); border: 1px solid rgba(56, 189, 248, 0.4); color: #38bdf8; }
:root[data-theme="dark"] .card-power-battery { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(52, 211, 153, 0.4); color: #34d399; }
:root[data-theme="dark"] .card-power-caffeine { background: rgba(245, 158, 11, 0.2); border: 1px solid rgba(251, 191, 36, 0.5); color: #fbbf24; }
:root[data-theme="dark"] .card-power-nosleep { background: rgba(99, 102, 241, 0.2); border: 1px solid rgba(129, 140, 248, 0.5); color: #a5b4fc; }

/* Barra Unificada de Herramientas de Tarjeta */
.card-action-bar {
    display: flex;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-surface-2);
}

.card-action-btn {
    border: 0;
    border-right: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    font-size: 0.72rem;
    line-height: 1.3;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    cursor: pointer;
    text-decoration: none;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-action-btn:last-child {
    border-right: 0;
}

.card-action-btn:hover:not(:disabled) {
    background: var(--bg-surface-3);
    color: var(--text-color);
}

.card-action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@media (max-width: 576px) {
    .card-action-bar {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .card-action-bar::-webkit-scrollbar {
        display: none;
    }
    .card-action-btn {
        flex: 0 0 auto;
        padding: 6px 10px;
        font-size: 0.75rem;
    }
}

.card-action-btn.btn-connect {
    background: #0284c7 !important;
    color: #ffffff !important;
    font-weight: 700;
}

.card-action-btn.btn-connect:hover:not(:disabled) {
    background: #0369a1 !important;
}

.card-action-btn.btn-connect:disabled {
    background: var(--bg-surface-3) !important;
    color: var(--text-muted) !important;
    opacity: 0.45;
}

/* Servicios (Proxmox, NAS, SSH, FTP) */
.svc-card-header {
    background-color: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.svc-card-sub {
    background-color: var(--bg-surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

.svc-title, .svc-sec-title {
    color: var(--text-color) !important;
}

.svc-badge {
    background-color: var(--bg-surface-3) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

/* Pestañas de Servicios (Proxmox / NAS) */
.svc-tab {
    cursor: pointer;
    padding: 7px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

.svc-tab:hover {
    color: var(--text-color);
}

.svc-tab.active {
    color: var(--primary-color) !important;
    border-bottom: 2px solid var(--primary-color) !important;
    background-color: var(--bg-surface-3) !important;
}

/* Banner de advertencia WAN/LAN */
.lan-wan-banner {
    background-color: #fff8e1;
    color: #8a6d00;
    border-bottom: 1px solid #ffe8a3;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Modales e Interfaces Avanzadas (File Manager, FTP, Custom Modals) */
.ui-modal-box {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color-strong) !important;
    color: var(--text-color) !important;
}
.ui-modal-head {
    border-bottom: 3px solid var(--accent-teal, #0dcaf0) !important;
}
.ui-modal-head .ui-title {
    color: var(--text-color) !important;
}
.ui-modal-body {
    color: var(--text-color) !important;
}
.ui-modal-input {
    background: var(--bg-surface-2) !important;
    border: 1px solid var(--border-color-strong) !important;
    color: var(--text-color) !important;
}
.ui-modal-foot {
    border-top: 0 !important;
}
.cs-btn {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color-strong) !important;
    color: var(--text-color) !important;
}
.cs-drop {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color-strong) !important;
    color: var(--text-color) !important;
}
.cs-search {
    background: var(--bg-surface-2) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}
.cs-item {
    color: var(--text-color) !important;
}
.cs-item:hover {
    background: var(--bg-surface-3) !important;
}
.fm-window {
    background: var(--bg-surface) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color-strong) !important;
}
.fm-toolbar, .fm-crumbs, .fm-side, .fm-status {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
.fm-table th {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}
.fm-table td {
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
.fm-table tbody tr:hover {
    background: var(--bg-surface-3) !important;
}
.fm-btn {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color-strong) !important;
    color: var(--text-color) !important;
}
.fm-btn:hover {
    background: var(--bg-surface-3) !important;
}
.fm-trans-item {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}
.fm-trans-name {
    color: var(--text-color) !important;
}
.fzb {
    background: var(--bg-surface) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color-strong) !important;
}
.fzb-head, .fzb-colhead, .fzb-queue, .fzb-qhead {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
.fzb-node {
    color: var(--text-color) !important;
}
.fzb-node:hover {
    background: var(--bg-surface-3) !important;
}
.fzb-btn {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color-strong) !important;
    color: var(--text-color) !important;
}
.fzb-btn:hover {
    background: var(--bg-surface-3) !important;
    color: var(--text-color) !important;
}
.fzb-ctx {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color-strong) !important;
    color: var(--text-color) !important;
}
.fzb-ctx .ci {
    color: var(--text-color) !important;
}
.fzb-ctx .ci:hover {
    background: var(--bg-surface-3) !important;
}
.modal-content.industrial .modal-body.bg-light {
    background-color: var(--bg-surface) !important;
    color: var(--text-color) !important;
}

/* Modales industriales: cabeceras temáticas adaptables a modo claro y oscuro */
:root[data-theme="light"] .modal-header.industrial-header,
:root:not([data-theme="dark"]) .modal-header.industrial-header {
    background: var(--bg-surface-2) !important;
    color: var(--text-color) !important;
    border-bottom: 2px solid var(--accent-teal, #20c997) !important;
    text-shadow: none !important;
}
:root[data-theme="light"] .modal-header.industrial-header .modal-title,
:root:not([data-theme="dark"]) .modal-header.industrial-header .modal-title {
    color: var(--text-color) !important;
}
:root[data-theme="light"] .modal-header.industrial-header .btn-close,
:root:not([data-theme="dark"]) .modal-header.industrial-header .btn-close,
:root[data-theme="light"] .modal-header .btn-close-white,
:root:not([data-theme="dark"]) .modal-header .btn-close-white {
    filter: none !important;
    opacity: 0.7 !important;
}
:root[data-theme="light"] .modal-header .btn-close-white:hover,
:root:not([data-theme="dark"]) .modal-header .btn-close-white:hover {
    opacity: 1 !important;
}
:root[data-theme="dark"] .modal-header.industrial-header {
    background: linear-gradient(45deg, #161b22, #21262d) !important;
    color: #f0f6fc !important;
    border-bottom: 2px solid var(--accent-teal, #20c997) !important;
}

/* Consola de logs de conexión por túnel y previsualizadores */
#svcConLog,
.svc-con-log {
    background-color: var(--bg-surface-2) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    max-height: 150px;
    overflow: auto;
    padding: 8px 10px;
    font-family: var(--font-family-mono) !important;
    font-size: .75rem !important;
    line-height: 1.45;
    user-select: text;
}

:root[data-theme="dark"] #svcConLog,
:root[data-theme="dark"] .svc-con-log,
:root:not([data-theme="light"]) #svcConLog,
:root:not([data-theme="light"]) .svc-con-log {
    background-color: #0b1118 !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

:root[data-theme="light"] #svcConLog,
:root[data-theme="light"] .svc-con-log {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

.fzb-pv-text {
    background-color: var(--bg-surface-2) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

#svcFrSafari {
    background-color: var(--bg-surface-2) !important;
    color: var(--text-muted) !important;
}

/* ==========================================================================
   REGLAS PARA MODO OSCURO (data-theme="dark")
   ========================================================================== */
:root[data-theme="dark"] body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .bg-white {
    background-color: var(--bg-surface) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .bg-light {
    background-color: var(--bg-surface-2) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer {
    background-color: var(--bg-surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .text-dark {
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end {
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: var(--bg-surface-2) !important;
    border-color: var(--border-color-strong) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    border-color: var(--accent-teal) !important;
    background-color: var(--bg-surface-2) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] .modal-content {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color-strong) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .table {
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .table-light,
:root[data-theme="dark"] .table-light > th,
:root[data-theme="dark"] .table-light > td {
    background-color: var(--bg-surface-2) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-color);
}

:root[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .btn-light {
    background-color: var(--bg-surface-3) !important;
    border-color: var(--border-color-strong) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .btn-outline-dark {
    color: var(--text-color) !important;
    border-color: var(--border-color-strong) !important;
}

:root[data-theme="dark"] .btn-outline-dark:hover {
    background-color: var(--bg-surface-3) !important;
    border-color: var(--accent-teal) !important;
    color: var(--accent-teal) !important;
}

:root[data-theme="dark"] .btn-dark {
    background-color: var(--bg-surface-3) !important;
    border-color: var(--border-color-strong) !important;
    color: var(--text-color) !important;
}

/* Bootstrap deja estos fondos claros por defecto — sin override rompen el
   modo oscuro (listas de passkeys/dispositivos, alertas info, cabeceras
   subtle de modales y la X de .btn-close, que es un SVG negro). */
:root[data-theme="dark"] .list-group-item {
    background-color: var(--bg-surface) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .list-group-item-action {
    color: var(--text-color) !important;
}
:root[data-theme="dark"] .list-group-item-action:hover,
:root[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--bg-surface-2) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .alert-light {
    background-color: var(--bg-surface-2) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .bg-danger-subtle {
    background-color: rgba(220, 53, 69, .16) !important;
    color: var(--text-color) !important;
}
:root[data-theme="dark"] .bg-warning-subtle {
    background-color: rgba(255, 193, 7, .14) !important;
    color: var(--text-color) !important;
}
:root[data-theme="dark"] .bg-info-subtle {
    background-color: rgba(13, 202, 240, .14) !important;
    color: var(--text-color) !important;
}
:root[data-theme="dark"] .bg-success-subtle {
    background-color: rgba(25, 135, 84, .16) !important;
    color: var(--text-color) !important;
}
:root[data-theme="dark"] .border-danger-subtle { border-color: rgba(220, 53, 69, .45) !important; }
:root[data-theme="dark"] .border-warning-subtle { border-color: rgba(255, 193, 7, .4) !important; }
:root[data-theme="dark"] .border-info-subtle { border-color: rgba(13, 202, 240, .4) !important; }
:root[data-theme="dark"] .border-success-subtle { border-color: rgba(25, 135, 84, .45) !important; }

:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}
:root[data-theme="dark"] .btn-close-white {
    filter: none;
}

:root[data-theme="dark"] .btn-dark:hover {
    background-color: var(--border-color-strong) !important;
    color: #fff !important;
}

:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color-strong) !important;
    color: var(--text-color) !important;
    box-shadow: var(--card-shadow) !important;
}

:root[data-theme="dark"] .dropdown-item {
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-surface-2) !important;
    color: var(--accent-teal) !important;
}

:root[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .group-accordion {
    background: transparent !important;
    background-color: transparent !important;
}

:root[data-theme="dark"] .group-accordion-item {
    background-color: var(--grp-color, #182330) !important;
    background-image: linear-gradient(rgba(10, 15, 20, 0.38), rgba(10, 15, 20, 0.38)) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .group-accordion-item .accordion-collapse,
:root[data-theme="dark"] .group-accordion-item .accordion-body {
    background: transparent !important;
    background-color: transparent !important;
}

:root[data-theme="dark"] .accordion-item:not(.group-accordion-item) {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .group-title {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

:root[data-theme="dark"] .group-count-badge {
    background-color: rgba(0, 0, 0, 0.35) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

:root[data-theme="dark"] .group-ip-badge {
    background-color: rgba(0, 0, 0, 0.35) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

:root[data-theme="dark"] .group-header-btn .fa-cog,
:root[data-theme="dark"] .group-header-btn .fa-pen {
    color: rgba(255, 255, 255, 0.8) !important;
}

:root[data-theme="dark"] .group-header-btn,
:root[data-theme="dark"] .group-header-btn.collapsed,
:root[data-theme="dark"] .group-header-btn:not(.collapsed),
:root[data-theme="dark"] .group-accordion .accordion-button,
:root[data-theme="dark"] .group-accordion .accordion-button.collapsed,
:root[data-theme="dark"] .group-accordion .accordion-button:not(.collapsed),
:root[data-theme="dark"] .group-accordion-item .accordion-button,
:root[data-theme="dark"] .group-accordion-item .accordion-button.collapsed,
:root[data-theme="dark"] .group-accordion-item .accordion-button:not(.collapsed),
:root[data-theme="dark"] .group-accordion-item .accordion-header {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

:root[data-theme="dark"] .accordion:not(.group-accordion) .accordion-button,
:root[data-theme="dark"] .accordion-item:not(.group-accordion-item) .accordion-button {
    background-color: var(--bg-surface-2) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .accordion:not(.group-accordion) .accordion-button:not(.collapsed),
:root[data-theme="dark"] .accordion-item:not(.group-accordion-item) .accordion-button:not(.collapsed) {
    background-color: var(--bg-surface-2) !important;
    color: var(--accent-teal) !important;
}

:root[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

:root[data-theme="dark"] .badge.bg-light {
    background-color: var(--bg-surface-3) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .badge.bg-white {
    background-color: var(--bg-surface-2) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .badge.bg-dark.bg-opacity-10 {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .progress {
    background-color: var(--bg-surface-3) !important;
}

:root[data-theme="dark"] .alert-warning {
    background-color: rgba(234, 179, 8, 0.12) !important;
    border-color: rgba(234, 179, 8, 0.3) !important;
    color: #fde047 !important;
}

:root[data-theme="dark"] .alert-info {
    background-color: rgba(14, 165, 233, 0.12) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
    color: #38bdf8 !important;
}

:root[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

:root[data-theme="dark"] .alert-success {
    background-color: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #86efac !important;
}

:root[data-theme="dark"] .lan-wan-banner {
    background-color: rgba(234, 179, 8, 0.12) !important;
    color: #fde047 !important;
    border-bottom: 1px solid rgba(234, 179, 8, 0.25) !important;
}

:root[data-theme="dark"] .border-light {
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .text-dark:not(.badge):not(.btn) {
    color: var(--text-color) !important;
}

/* ==========================================================================
   REGLAS PARA MODO SISTEMA (prefers-color-scheme: dark sin data-theme="light")
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body {
        background-color: var(--bg-color) !important;
        color: var(--text-color) !important;
    }
    :root:not([data-theme="light"]) .bg-white {
        background-color: var(--bg-surface) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) .bg-light {
        background-color: var(--bg-surface-2) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) .card-header,
    :root:not([data-theme="light"]) .card-footer {
        background-color: var(--bg-surface-2) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }
    :root:not([data-theme="light"]) .text-dark {
        color: var(--text-color) !important;
    }
    :root:not([data-theme="light"]) .text-muted {
        color: var(--text-muted) !important;
    }
    :root:not([data-theme="light"]) .border,
    :root:not([data-theme="light"]) .border-top,
    :root:not([data-theme="light"]) .border-bottom,
    :root:not([data-theme="light"]) .border-start,
    :root:not([data-theme="light"]) .border-end {
        border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) .form-control,
    :root:not([data-theme="light"]) .form-select {
        background-color: var(--bg-surface-2) !important;
        border-color: var(--border-color-strong) !important;
        color: var(--text-color) !important;
    }
    :root:not([data-theme="light"]) .form-control:focus,
    :root:not([data-theme="light"]) .form-select:focus {
        border-color: var(--accent-teal) !important;
        background-color: var(--bg-surface-2) !important;
        color: var(--text-color) !important;
    }
    :root:not([data-theme="light"]) .form-control::placeholder {
        color: var(--text-muted) !important;
    }
    :root:not([data-theme="light"]) .modal-content {
        background-color: var(--bg-surface) !important;
        border-color: var(--border-color-strong) !important;
        color: var(--text-color) !important;
    }
    :root:not([data-theme="light"]) .modal-header,
    :root:not([data-theme="light"]) .modal-footer {
        border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) .table {
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) .table-light,
    :root:not([data-theme="light"]) .table-light > th,
    :root:not([data-theme="light"]) .table-light > td {
        background-color: var(--bg-surface-2) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) .table > :not(caption) > * > * {
        background-color: transparent !important;
        border-bottom-color: var(--border-color) !important;
        color: var(--text-color);
    }
    :root:not([data-theme="light"]) .table-hover > tbody > tr:hover > * {
        background-color: rgba(255, 255, 255, 0.04) !important;
        color: var(--text-color) !important;
    }
    :root:not([data-theme="light"]) .btn-light {
        background-color: var(--bg-surface-3) !important;
        border-color: var(--border-color-strong) !important;
        color: var(--text-color) !important;
    }
    :root:not([data-theme="light"]) .btn-outline-dark {
        color: var(--text-color) !important;
        border-color: var(--border-color-strong) !important;
    }
    :root:not([data-theme="light"]) .btn-outline-dark:hover {
        background-color: var(--bg-surface-3) !important;
        border-color: var(--accent-teal) !important;
        color: var(--accent-teal) !important;
    }
    :root:not([data-theme="light"]) .btn-dark {
        background-color: var(--bg-surface-3) !important;
        border-color: var(--border-color-strong) !important;
        color: var(--text-color) !important;
    }
    :root:not([data-theme="light"]) .btn-dark:hover {
        background-color: var(--border-color-strong) !important;
        color: #fff !important;
    }
    :root:not([data-theme="light"]) .dropdown-menu {
        background-color: var(--bg-surface) !important;
        border-color: var(--border-color-strong) !important;
        color: var(--text-color) !important;
        box-shadow: var(--card-shadow) !important;
    }
    :root:not([data-theme="light"]) .dropdown-item {
        color: var(--text-color) !important;
    }
    :root:not([data-theme="light"]) .dropdown-item:hover,
    :root:not([data-theme="light"]) .dropdown-item:focus {
        background-color: var(--bg-surface-2) !important;
        color: var(--accent-teal) !important;
    }
    :root:not([data-theme="light"]) .dropdown-divider {
        border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) .group-accordion {
        background: transparent !important;
        background-color: transparent !important;
    }

    :root:not([data-theme="light"]) .group-accordion-item {
        background-color: var(--grp-color, #182330) !important;
        background-image: linear-gradient(rgba(10, 15, 20, 0.38), rgba(10, 15, 20, 0.38)) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
    }

    :root:not([data-theme="light"]) .group-accordion-item .accordion-collapse,
    :root:not([data-theme="light"]) .group-accordion-item .accordion-body {
        background: transparent !important;
        background-color: transparent !important;
    }

    :root:not([data-theme="light"]) .accordion-item:not(.group-accordion-item) {
        background-color: var(--bg-surface) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }

    :root:not([data-theme="light"]) .group-title {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
    }

    :root:not([data-theme="light"]) .group-count-badge {
        background-color: rgba(0, 0, 0, 0.35) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    :root:not([data-theme="light"]) .group-ip-badge {
        background-color: rgba(0, 0, 0, 0.35) !important;
        color: #f1f5f9 !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    :root:not([data-theme="light"]) .group-header-btn .fa-cog,
    :root:not([data-theme="light"]) .group-header-btn .fa-pen {
        color: rgba(255, 255, 255, 0.8) !important;
    }
    :root:not([data-theme="light"]) .group-header-btn,
    :root:not([data-theme="light"]) .group-header-btn.collapsed,
    :root:not([data-theme="light"]) .group-header-btn:not(.collapsed),
    :root:not([data-theme="light"]) .group-accordion .accordion-button,
    :root:not([data-theme="light"]) .group-accordion .accordion-button.collapsed,
    :root:not([data-theme="light"]) .group-accordion .accordion-button:not(.collapsed),
    :root:not([data-theme="light"]) .group-accordion-item .accordion-button,
    :root:not([data-theme="light"]) .group-accordion-item .accordion-button.collapsed,
    :root:not([data-theme="light"]) .group-accordion-item .accordion-button:not(.collapsed),
    :root:not([data-theme="light"]) .group-accordion-item .accordion-header {
        background: transparent !important;
        background-color: transparent !important;
        color: var(--text-color) !important;
        box-shadow: none !important;
    }
    :root:not([data-theme="light"]) .accordion:not(.group-accordion) .accordion-button,
    :root:not([data-theme="light"]) .accordion-item:not(.group-accordion-item) .accordion-button {
        background-color: var(--bg-surface-2) !important;
        color: var(--text-color) !important;
    }
    :root:not([data-theme="light"]) .accordion:not(.group-accordion) .accordion-button:not(.collapsed),
    :root:not([data-theme="light"]) .accordion-item:not(.group-accordion-item) .accordion-button:not(.collapsed) {
        background-color: var(--bg-surface-2) !important;
        color: var(--accent-teal) !important;
    }
    :root:not([data-theme="light"]) .accordion-button::after {
        filter: invert(1);
    }
    :root:not([data-theme="light"]) .badge.bg-light {
        background-color: var(--bg-surface-3) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) .badge.bg-white {
        background-color: var(--bg-surface-2) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) .badge.bg-dark.bg-opacity-10 {
        background-color: rgba(255, 255, 255, 0.12) !important;
        color: var(--text-color) !important;
    }
    :root:not([data-theme="light"]) .progress {
        background-color: var(--bg-surface-3) !important;
    }
    :root:not([data-theme="light"]) .alert-warning {
        background-color: rgba(234, 179, 8, 0.12) !important;
        border-color: rgba(234, 179, 8, 0.3) !important;
        color: #fde047 !important;
    }
    :root:not([data-theme="light"]) .alert-info {
        background-color: rgba(14, 165, 233, 0.12) !important;
        border-color: rgba(14, 165, 233, 0.3) !important;
        color: #38bdf8 !important;
    }
    :root:not([data-theme="light"]) .alert-danger {
        background-color: rgba(239, 68, 68, 0.12) !important;
        border-color: rgba(239, 68, 68, 0.3) !important;
        color: #fca5a5 !important;
    }
    :root:not([data-theme="light"]) .alert-success {
        background-color: rgba(34, 197, 94, 0.12) !important;
        border-color: rgba(34, 197, 94, 0.3) !important;
        color: #86efac !important;
    }
    :root:not([data-theme="light"]) .lan-wan-banner {
        background-color: rgba(234, 179, 8, 0.12) !important;
        color: #fde047 !important;
        border-bottom: 1px solid rgba(234, 179, 8, 0.25) !important;
    }
    :root:not([data-theme="light"]) .border-light {
        border-color: var(--border-color) !important;
    }
    :root:not([data-theme="light"]) .text-dark:not(.badge):not(.btn) {
        color: var(--text-color) !important;
    }
}

/* ==========================================================================
   COMPORTAMIENTO DE APP (webview/táctil) — sin rebote, sin selección,
   sin callout de iOS en pulsación larga. Desktop intacto.
   ========================================================================== */
html, body { overscroll-behavior: none; }
.content-wrapper, .container-fluid, .accordion-body, .modal-body { overscroll-behavior: none; }
@media (pointer: coarse) {
    * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
    input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
}

/* ==========================================================================
   BANNER PERSISTENTE Y RESPONSIVE DE TÚNELES ACTIVOS
   ========================================================================== */
.tunnel-bar-container {
    position: fixed;
    bottom: 20px;
    left: 24px;
    z-index: 1045;
    max-width: 460px;
    width: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.tunnel-bar-card {
    pointer-events: auto;
    background: var(--bg-surface);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-left: 4px solid #0ea5e9;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

:root[data-theme="dark"] .tunnel-bar-card,
:root:not([data-theme="light"]) .tunnel-bar-card {
    background: rgba(15, 23, 42, 0.94);
    border-color: rgba(255, 255, 255, 0.12);
    border-left-color: #38bdf8;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.tunnel-bar-card.tun-warning {
    border-left-color: #ef4444 !important;
    animation: tunPulseWarn 1.5s infinite;
}

@keyframes tunPulseWarn {
    0%, 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.4); }
}

.tun-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tun-bar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tun-bar-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: var(--font-family-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tun-pill-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    display: inline-block;
    flex-shrink: 0;
    animation: tunDotGlow 1.8s infinite;
}

@keyframes tunDotGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.tun-timer-badge {
    font-family: var(--font-family-mono);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
    border: 1px solid rgba(14, 165, 233, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

:root[data-theme="dark"] .tun-timer-badge,
:root:not([data-theme="light"]) .tun-timer-badge {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.3);
}

.tun-warning .tun-timer-badge {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

.tun-bar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.tun-btn-action {
    font-size: 0.75rem;
    padding: 3px 9px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface-2);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.tun-btn-action:hover {
    background: rgba(14, 165, 233, 0.15);
    color: #0284c7;
    border-color: #0284c7;
}

:root[data-theme="dark"] .tun-btn-action:hover,
:root:not([data-theme="light"]) .tun-btn-action:hover {
    color: #38bdf8;
    border-color: #38bdf8;
}

.tun-btn-close {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

.tun-btn-close:hover {
    background: #ef4444 !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    .tunnel-bar-container {
        bottom: 85px;
        left: 12px;
        right: 85px;
        max-width: none;
        width: auto;
    }
    .tunnel-bar-card {
        padding: 8px 10px;
    }
    .tun-bar-title {
        font-size: 0.8rem;
    }
}

/* ============================================================
   Pase responsive global (≤768px) — nada debe desbordar el
   viewport: scroll horizontal solo dentro de su contenedor.
   ============================================================ */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }
    img, video, svg, canvas, iframe { max-width: 100%; height: auto; }

    /* Contenedores a ancho completo con padding lateral razonable */
    .container, .container-lg, .container-md, .container-sm,
    .container-fluid, .container-xl, .container-xxl {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }

    /* Tablas: scroll dentro del wrapper, no de la página; celdas
       compactas y permitir salto de línea en botones/badges */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    table.table, .table-ind, .table { font-size: .78rem !important; }
    table.table > thead > tr > th, table.table > tbody > tr > td,
    .table-ind > thead > tr > th, .table-ind > tbody > tr > td,
    .table > :not(caption) > * > * { padding: 6px 7px !important; white-space: normal; }
    .table td .btn, .table td .btn-group { white-space: nowrap; }
    .table td .btn { padding: .2rem .45rem; font-size: .72rem; }

    /* Navs/tab bars: scroll horizontal propio sin romper layout */
    .nav-tabs, .nav-pills, .set-tabs, .cfg-tabs, .settings-nav,
    .btn-group[role="group"].nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: 100%;
    }
    .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar,
    .set-tabs::-webkit-scrollbar, .settings-nav::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link, .nav-pills .nav-link, .set-tab { white-space: nowrap; }

    /* Grids y rows: una columna; gutters reducidos */
    .row { --bs-gutter-x: .75rem; }
    [class*="col-"] { min-width: 0; }

    /* Selectores custom con min-width fijo → fluidos */
    .cs-select { min-width: 0 !important; width: 100%; }

    /* Modales: casi a pantalla completa, márgenes mínimos */
    .modal-dialog { margin: .5rem !important; max-width: calc(100vw - 1rem) !important; }
    .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: calc(100vw - 1rem) !important; }
    .modal-content { max-height: calc(100dvh - 1rem); }
    .modal-body { overflow-x: hidden; }

    /* Grupos de botones y barras de acciones: wrap */
    .btn-toolbar, .page-actions, .card-actions { flex-wrap: wrap; gap: .4rem; }
    .btn-group:not(.nav) { flex-wrap: wrap; }

    /* Formularios: campos a ancho completo */
    input:not([type=checkbox]):not([type=radio]), select, textarea,
    .form-control, .form-select { max-width: 100%; }
    .input-group { flex-wrap: nowrap; }

    /* Texto técnico largo (hosts, URLs, comandos) que desborda */
    code, pre, .font-monospace, .text-break-all { word-break: break-all; overflow-wrap: anywhere; }
    pre { white-space: pre-wrap; max-width: 100%; overflow-x: auto; }

    /* Tarjetas y paneles que exceden por padding interno */
    .card, .panel-card, .res-card { min-width: 0; }
    .card-body { min-width: 0; }

    /* Filas recurso (Recursos): stack vertical en móvil */
    .res-row, .resource-row { flex-wrap: wrap; }
    .d-flex > [class*="col"], .d-flex > .flex-fill { min-width: 0; }
}