@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f4f6fa;--ink:#172235;--muted:#748095;--line:#e6eaf1;--blue:#315eea;--nav:#111c2e;--white:#fff;--green:#16865c}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}h1,h2,strong{font-family:'Manrope','DM Sans',sans-serif}h1{font-size:30px;letter-spacing:-1px;margin:4px 0 8px}h2{font-size:16px;margin:0 0 7px}p{margin:0 0 8px}.muted{color:var(--muted);line-height:1.55}.tiny{font-size:11px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:#8491a7;font-weight:700;margin:0 0 8px}.shell{min-height:100vh}.sidebar{width:246px;background:var(--nav);position:fixed;inset:0 auto 0 0;color:#dbe3f2;padding:25px 17px;display:flex;flex-direction:column;z-index:2}.brand{display:flex;align-items:center;gap:11px;padding:0 8px 32px}.brand strong{display:block;color:#fff;font-size:14px}.brand small{display:block;color:#8796ad;font-size:11px;margin-top:3px}.brandmark{width:36px;height:36px;border-radius:12px;background:#315eea;color:white;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-family:Manrope;letter-spacing:-1px;flex-shrink:0}.brandmark.big{width:64px;height:64px;border-radius:19px;font-size:23px;letter-spacing:-1.2px;box-shadow:0 7px 18px #315cf535}.sidebar nav{display:grid;gap:6px}.sidebar nav a{color:#9cabc2;text-decoration:none;padding:12px 13px;border-radius:9px;display:flex;gap:13px;align-items:center;font-size:13px}.sidebar nav a:hover,.sidebar nav a:focus{background:#1c2c46;color:#fff}.sidebottom{margin-top:auto;border-top:1px solid #29364a;padding:18px 8px 0;color:#dbe3f2;font-size:12px}.sidebottom small{display:block;color:#8493aa;margin:7px 0 12px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#38c995;margin-right:6px}.logout{border:1px solid #3b4960;background:transparent;color:#dbe3f2;padding:9px 12px;border-radius:7px;cursor:pointer;width:100%}.main{margin-left:246px;padding:32px 34px 20px;max-width:1800px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.userpill{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--line);padding:8px 12px;border-radius:12px}.avatar{background:#e9efff;color:#315eea;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-weight:700}.userpill strong,.userpill small{display:block}.userpill small{color:var(--muted);font-size:11px;margin-top:2px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}.stat,.panel{background:white;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 8px #192b4405}.stat{padding:19px 20px}.statlabel{color:var(--muted);font-size:12px;display:flex;justify-content:space-between}.statlabel span{font-size:18px;color:#8796ac}.stat>strong{font-size:32px;display:block;letter-spacing:-1px;margin:10px 0 4px}.stat small{color:#8a95a7;font-size:11px}.twocol{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;margin-bottom:18px}.panel{padding:21px;margin-bottom:18px;min-width:0}.sectionhead{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:17px}.sectionhead p{font-size:12px;margin:0}.textlink{color:var(--blue);text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}.notice{border:1px solid #dbe6ff;background:#eef3ff;border-radius:11px;padding:13px 15px;display:flex;gap:12px;margin-bottom:18px;color:#405273;font-size:12px;line-height:1.5}.notice strong{color:#2345a8;white-space:nowrap}.empty{padding:28px 15px;text-align:center;color:var(--muted)}.empty>span{font-size:25px;display:block;color:#aab6c8;margin-bottom:8px}.empty strong{display:block;color:#435069;margin-bottom:6px}.empty p{font-size:12px;margin-bottom:13px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}th{text-align:left;color:#8994a7;font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:700;padding:10px 11px;border-bottom:1px solid var(--line)}td{padding:13px 11px;border-bottom:1px solid #f0f2f6;color:#59667a}tbody tr:last-child td{border-bottom:0}td strong{color:#29364a;font-size:12px}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#43516a;background:#f3f5f9;padding:4px 6px;border-radius:5px}.eventlist{display:grid}.event{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid #eff2f6}.event:last-child{border:0}.eventicon{width:28px;height:28px;border-radius:8px;background:#edf2ff;color:#315eea;display:grid;place-items:center;flex-shrink:0}.event strong{font-size:12px}.event p{color:#657186;font-size:11px;margin:4px 0}.event small{color:#9aa4b4;font-size:10px}.tag{font-size:10px;font-weight:700;color:#596780;background:#f0f3f8;padding:6px 8px;border-radius:6px;white-space:nowrap}.stack{display:grid;gap:14px}.formrow{display:grid;grid-template-columns:1fr 1fr;gap:13px}label{display:grid;gap:7px;font-size:12px;color:#526077;font-weight:600}input,select{width:100%;border:1px solid #dce2eb;background:white;border-radius:8px;padding:11px 12px;font:inherit;color:#25334a;outline:none}input:focus,select:focus{border-color:#7391f4;box-shadow:0 0 0 3px #315eea13}button{font:inherit;cursor:pointer}.primary{border:0;border-radius:8px;background:var(--blue);color:white;padding:11px 14px;font-weight:700;font-size:12px;display:inline-flex;justify-content:center;align-items:center;gap:16px;text-decoration:none}.primary:hover{background:#244bd0}.primary.full{width:100%;margin-top:5px}.secondary{background:white;border:1px solid #dfe5ee;color:#526078;border-radius:7px;padding:8px 10px;font-size:11px;font-weight:700}.dangerbtn{background:white;border:1px solid #f1d4d4;color:#b44343;border-radius:7px;padding:8px 10px;font-size:11px}.actions{display:flex;gap:7px}.featurelist{padding-left:18px;color:#647187;font-size:12px;line-height:2}.tablepanel{padding-bottom:12px}.cellsub{display:block;color:#a0a9b7;font-size:10px;margin-top:4px}.status{font-size:11px;font-weight:700}.status:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px}.status.on{color:#16865c}.status.on:before{background:#28b883}.status.off{color:#b44343}.status.off:before{background:#d65b5b}.alert{border-radius:9px;padding:13px 15px;margin:0 0 16px;font-size:12px;line-height:1.5}.alert.danger{background:#fff0f0;border:1px solid #f3d2d2;color:#a73b3b}.alert.success{background:#edfbf5;border:1px solid #c9f0df;color:#176a4d}.alert.warning{background:#fff8e8;border:1px solid #f5e5b7;color:#8d6816}.alert p{margin-top:7px}.loginwrap{max-width:900px;margin:8vh auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.authmain{margin:0 auto;padding:24px;width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center}.loginbrand h1{font-size:42px}.loginbrand .eyebrow{margin-top:25px}.loginform{padding:28px}.loginform h2{font-size:20px}.loginform>p{font-size:12px;margin-bottom:22px}.loginform label{margin-bottom:14px}.loginform .tiny{font-size:10px;margin:13px 0 0;text-align:center}.sidebottom form{margin-top:12px}footer{text-align:center;color:#a4adbb;font-size:10px;padding:25px 0 5px}
@media(max-width:1000px){.sidebar{width:205px}.main{margin-left:205px;padding:25px 22px}.twocol{grid-template-columns:1fr}.loginwrap{gap:25px}}
@media(max-width:700px){.sidebar{position:static;width:100%;height:auto;padding:12px 14px}.brand{padding:0 5px 12px}.sidebar nav{display:flex;overflow:auto}.sidebar nav a{padding:9px;white-space:nowrap}.sidebottom{display:none}.main{margin:0;padding:20px 13px}.stats{grid-template-columns:1fr}.topbar{align-items:flex-start}.userpill{display:none}.formrow{grid-template-columns:1fr}.loginwrap{grid-template-columns:1fr;margin:15px auto;max-width:440px}.loginbrand{padding:12px}.loginbrand h1{font-size:34px}.authmain{padding:16px}.loginform{padding:21px}.notice{display:block}.notice strong{display:block;margin-bottom:4px}}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;align-items:end;margin-top:16px}.formgrid label{display:flex;flex-direction:column;gap:7px;font-size:.9rem;color:var(--muted,#667085)}.formgrid input,.formgrid select{width:100%;padding:10px 12px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:#101828}.formgrid .checkline{display:flex;flex-direction:row;align-items:center}.formgrid .checkline input{width:auto}

/* Dashboard 8083 improvements: clear white cards and responsive real-data metrics. */
.dashboard-stats{grid-template-columns:repeat(6,minmax(0,1fr))}.dashboard-secondary{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:-2px}.statstatus{font-size:20px!important;letter-spacing:-.4px!important}.stat .textlink{display:inline-block;margin-top:8px;font-size:11px}
@media(max-width:1250px){.dashboard-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.dashboard-stats,.dashboard-secondary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.dashboard-stats,.dashboard-secondary{grid-template-columns:1fr}}

/* v6: orderly client workspace, role permissions, and clear session-data limitations */
.clients-stats{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:18px}
.create-client-panel{padding:24px}
.client-create-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:end}
.client-create-form>label{display:flex;flex-direction:column;gap:8px;min-width:0}
.client-create-form .demo-option{grid-column:span 2;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;min-height:54px}
.demo-option input{width:auto;flex-shrink:0}.demo-option strong,.demo-option small{display:block}.demo-option small{font-size:11px;color:var(--muted);font-weight:400;margin-top:4px}
.create-button{min-height:48px}
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 18px;border-bottom:1px solid var(--line);padding-bottom:14px}
.filter-tabs a{padding:8px 13px;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:#58677e;background:#fff;font-size:12px;font-weight:700}
.filter-tabs a.selected{background:#eaf0ff;border-color:#cbd8ff;color:#2345b5}
.client-filters{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:16px}.client-filters label{min-width:240px;flex:1}
.secondary-link{color:#526078;font-size:12px;text-decoration:none;padding:9px 10px}
.clients-table{min-width:1120px}.clients-table td{vertical-align:middle}.clients-table td:first-child{min-width:145px}.clients-table td:first-child small{display:block;margin-top:5px}.inlineform{display:flex;gap:5px;align-items:center}.inlineform select{max-width:110px;padding:8px;font-size:11px}
.connection-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}.connection-pill i{width:7px;height:7px;border-radius:50%;display:inline-block;background:#9aa4b2}.connection-pill.unknown{color:#667085;background:#f2f4f7}.connection-note{margin-top:14px;line-height:1.6}
.permission-box{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:11px;background:#fbfcfe}.permission-box>.checkline{display:flex;flex-direction:row;align-items:center;gap:9px}.permission-box input{width:auto}.server-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}.server-check-grid .checkline{display:flex;flex-direction:row;align-items:flex-start;gap:9px;padding:11px;border:1px solid var(--line);border-radius:9px}.server-check-grid input{width:auto;margin-top:2px}
@media(max-width:1100px){.client-create-form{grid-template-columns:repeat(2,minmax(0,1fr))}.clients-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.client-create-form{grid-template-columns:1fr}.client-create-form .demo-option{grid-column:auto}.clients-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.client-filters label{min-width:100%}}

.credential-panel{max-width:900px;padding:28px}.credential-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}.credential-grid>div{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:10px;min-width:0}.credential-grid>div strong{font-size:14px}.credential-grid code{white-space:normal;overflow-wrap:anywhere}.copy-credentials{width:100%;min-height:48px;margin:4px 0 12px}.copy-credentials.copied{background:#16865c}.credential-panel .secondary-link{display:inline-block;margin-top:14px}@media(max-width:600px){.credential-grid{grid-template-columns:1fr}}

.connection-pill.connected{color:#087443;background:#e8f8ef}.connection-pill.connected i{background:#16a36a}.connection-pill.waiting{color:#956500;background:#fff5d8}.connection-pill.waiting i{background:#e7a008}.clients-table{min-width:1240px}

/* v7 navigation: collapsible, scrollable, and with persistent active-route highlight. */
.sidebar{overflow-y:auto;overflow-x:hidden;transition:width .18s ease,padding .18s ease}.sidebar nav{flex:1;align-content:start;overflow-y:auto;padding-right:2px}.sidebar nav a{position:relative;min-height:42px}.sidebar nav a.active{background:#243653;color:#fff;box-shadow:inset 3px 0 0 #4d79ff;font-weight:700}.sidebar nav a.active .nav-icon{color:#8eabff}.nav-icon{width:17px;min-width:17px;text-align:center;font-size:16px;line-height:1}.brand{position:relative;flex-shrink:0}.brand-copy{min-width:0}.sidebar-toggle{margin-left:auto;width:32px;height:32px;flex-shrink:0;border:1px solid #33435b;border-radius:7px;background:#17253a;color:#dbe3f2;font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer}.sidebar-toggle:hover{background:#293b58}.logout-short{display:none}.sidebar-collapsed .sidebar{width:78px;padding:22px 11px}.sidebar-collapsed .main{margin-left:78px}.sidebar-collapsed .brand{padding:0 4px 28px;justify-content:center;flex-wrap:wrap}.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label{display:none}.sidebar-collapsed .sidebar-toggle{margin:8px auto 0}.sidebar-collapsed .sidebar nav a{justify-content:center;padding:12px 5px}.sidebar-collapsed .sidebar nav a.active{box-shadow:inset 0 -3px 0 #4d79ff}.sidebar-collapsed .sidebottom{padding:15px 2px 0;text-align:center}.sidebar-collapsed .sidebottom .dot{margin-right:0}.sidebar-collapsed .logout{padding:9px 4px}.sidebar-collapsed .logout-short{display:inline}.fslb-endpoint-note{display:flex;gap:10px;align-items:flex-start;background:#f5f7fb;border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin:12px 0 18px;color:#536179;font-size:12px;line-height:1.5}.fslb-endpoint-note strong{color:#27364d}.dns-add-grid{display:grid;grid-template-columns:1.2fr .6fr 1.4fr auto;gap:12px;align-items:end}.dns-proxy-toggle{display:flex;align-items:center;gap:8px;min-height:42px}.dns-proxy-toggle input{width:auto}.proxy-state{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700}.proxy-state.on{color:#bd6b00}.proxy-state.on:before{content:'';width:8px;height:8px;border-radius:50%;background:#f59e0b}.proxy-state.off{color:#667085}.proxy-state.off:before{content:'';width:8px;height:8px;border-radius:50%;background:#9aa4b2}
@media(max-width:700px){.sidebar{position:fixed;width:78px;height:100vh;padding:14px 10px}.sidebar .brand-copy,.sidebar .nav-label{display:none}.sidebar .brand{padding:0 4px 18px;flex-wrap:wrap;justify-content:center}.sidebar .sidebar-toggle{margin:8px auto 0}.sidebar nav a{justify-content:center;padding:12px 5px}.sidebar nav a.active{box-shadow:inset 0 -3px 0 #4d79ff}.sidebar .sidebottom{padding:12px 2px 0;text-align:center}.sidebar .sidebottom .dot{margin-right:0}.sidebar .logout{padding:9px 4px}.sidebar .logout-short{display:inline}.main{margin-left:78px;padding:18px 12px}.sidebar-collapsed .sidebar{width:78px}.sidebar-collapsed .main{margin-left:78px}.dns-add-grid{grid-template-columns:1fr}}
.firewall-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.firewall-options article{display:grid;gap:12px;align-content:start;padding:16px;border:1px solid var(--line);border-radius:11px;min-width:0}.firewall-options article>strong{font-size:13px}.firewall-options article p{font-size:12px;min-height:54px}.firewall-options button:disabled,.firewall-options input:disabled{opacity:.55;cursor:not-allowed}@media(max-width:900px){.firewall-options{grid-template-columns:1fr}}.copy-client:disabled{opacity:.6;cursor:wait}

/* v7.2: make country flag emoji reliably visible and keep endpoint access controls compact */
.geo-flag{display:inline-block;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:16px;line-height:1;vertical-align:-2px;margin-right:3px}.endpoint-access{position:relative}.endpoint-access>summary{cursor:pointer;list-style:none;background:#fff;border:1px solid #dfe5ee;color:#526078;border-radius:7px;padding:8px 10px;font-size:11px;font-weight:700}.endpoint-access[open] form{position:absolute;right:0;top:32px;z-index:5;min-width:210px;padding:12px;background:white;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 24px #192b4418}.endpoint-access .checkline{display:flex;align-items:center;gap:8px}.endpoint-access .checkline input{width:auto}


/* IKS visual readability and copy controls */
.clients-table { font-size: 13px; }
.clients-table th { font-size: 11px; padding: 13px 12px; }
.clients-table td { padding: 15px 12px; vertical-align: middle; }
.clients-table td strong { font-size: 13px; }
.clients-table .cellsub { font-size: 11px; color: #68768b; line-height: 1.45; }
.clients-table tbody tr:hover { background: #f7f9ff; }
.clients-table .geo-flag { font-size: 19px; }
.copy-client, .copy-generated, .copy-credentials { white-space: nowrap; }
.generated-account { padding: 17px 18px; }
.generated-account code { display: inline-block; font-size: 13px; overflow-wrap: anywhere; }
.generated-account .copy-generated { margin: 6px 0; }
.tablewrap { max-width: 100%; }
@media (max-width: 900px) {
  .main { margin-left: 0; padding: 20px 14px; }
  .clients-table th, .clients-table td { padding: 12px 10px; }
  .panel { padding: 15px; }
}

/* Integrated v7.3 readability and compact action controls */
:root{--muted:#59677d;--line:#dce3ed}
body{font-size:14px;color:#172235}
.muted{color:#59677d}
.stat small,.cellsub,.userpill small{color:#65738a}
td{color:#3f4d63}
th{color:#65738a}
.clients-table .cellsub{color:#58677e}
.sidebar nav{gap:5px}
.sidebar nav a{font-weight:600}
.metric-bars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.metric-row>div:first-child{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:12px;color:#344258}
.metric-row>div:first-child span{font-weight:800;color:#172235}
.metric-track{height:10px;background:#edf1f7;border-radius:99px;overflow:hidden}
.metric-track i{display:block;height:100%;background:linear-gradient(90deg,#315eea,#5b8cff);border-radius:99px;min-width:2px}
@media(max-width:850px){.metric-bars{grid-template-columns:1fr}}


/* IKS visual system v2: consistent typography, controls and spacing across modules */
:root{
  --bg:#f3f5f9;--ink:#152238;--muted:#58677d;--line:#d9e1ec;
  --blue:#315eea;--nav:#101c30;--white:#fff;--green:#16865c;
  --control-h:42px;--radius:9px;
}
body{font-family:'DM Sans',Arial,sans-serif;font-size:14px;line-height:1.5;color:var(--ink)}
h1,h2,h3,h4,strong,b,label,button,.primary,.secondary,.dangerbtn,.sidebar nav a,.tag,.status,th{font-weight:700}
h1{font-size:clamp(25px,2vw,30px);line-height:1.22;letter-spacing:-.55px;margin:4px 0 9px}
h2{font-size:17px;line-height:1.35;letter-spacing:-.15px;margin:0 0 9px}
p,.muted{font-size:13px;line-height:1.55}
.sidebar nav a{min-height:44px;font-size:13px;letter-spacing:0}
.sidebar nav a.active{background:#243652;color:#fff;box-shadow:inset 3px 0 0 #4f76ff}
.sidebar nav a.active .nav-label{font-weight:800}
.main{min-width:0}
.panel,.stat{border-color:#d9e2ef;border-radius:13px;box-shadow:0 2px 7px rgba(18,38,68,.035)}
.panel{padding:22px;margin-bottom:18px}
.sectionhead{align-items:center}
label{font-size:13px;color:#34445c;line-height:1.4;gap:7px}
input,select,textarea{min-height:var(--control-h);font-family:inherit;font-size:13px;font-weight:600;color:#18263c;border:1px solid #cbd5e3;border-radius:9px;padding:10px 12px;line-height:1.35}
input::placeholder,textarea::placeholder{color:#8995a7;font-weight:500;opacity:1}
input:focus,select:focus,textarea:focus{border-color:#315eea;box-shadow:0 0 0 3px rgba(49,94,234,.14);outline:0}
/* IKS button size unification: every button in the panel now uses the compact
   size introduced in Estadísticas comerciales (min-height 32px, padding 7px 11px)
   instead of the taller 38–48px buttons used before. */
button,.primary,.secondary,.dangerbtn,.secondary-link{font-family:inherit;font-size:12px;font-weight:800;line-height:1.2;min-height:32px;border-radius:9px;letter-spacing:.05px}
.primary{padding:7px 14px;background:#315eea;color:#fff}
.primary:focus-visible,.secondary:focus-visible,.dangerbtn:focus-visible,.sidebar nav a:focus-visible{outline:3px solid rgba(49,94,234,.35);outline-offset:2px}
.secondary{padding:7px 11px;border-color:#cbd5e3;color:#263954}
.dangerbtn{padding:7px 11px}
.formgrid{gap:14px}
.formgrid label{font-size:13px;color:#34445c}
.formgrid input,.formgrid select{min-height:var(--control-h);font-size:13px;font-weight:600}
table{font-size:13px;line-height:1.45;white-space:normal}
th{font-size:11px;color:#42536b;letter-spacing:.55px;padding:12px}
td{font-size:13px;color:#34445c;padding:13px 12px;vertical-align:middle}
td strong{font-size:13px;color:#152238}
.tag{font-size:11px;padding:6px 9px;border-radius:7px}
.status{font-size:12px}
.cellsub,.tiny{font-size:12px;line-height:1.45}
.eyebrow{font-size:11px;letter-spacing:1.2px;font-weight:800}
.tablewrap{max-width:100%;border-radius:8px}
.tablewrap table{min-width:760px}
.clients-table{min-width:1120px}
.details,details{max-width:100%}
details summary{cursor:pointer;font-size:12px;font-weight:800;color:#315eea;padding:7px 0}
details[open] summary{margin-bottom:8px}.actions{gap:8px;align-items:center;flex-wrap:wrap}
.filter-tabs a{min-height:32px;padding:7px 11px;display:inline-flex;align-items:center;font-size:12px;font-weight:800}
.topbar{align-items:flex-start}
.topbar .muted{max-width:760px}
@media(max-width:900px){
 .clients-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .client-create-form{grid-template-columns:repeat(2,minmax(0,1fr))}
 .main{padding:24px 20px}
}
@media(max-width:700px){
 .sidebar nav a{font-size:12px}
 .panel{padding:16px}
 .client-create-form,.formrow{grid-template-columns:1fr}
 .topbar{gap:10px}
 h1{font-size:25px}
}

/* FIX-ACCIONES-LINEALES-V1: acciones claras y alineadas */
.clients-table {
  min-width: 1320px;
  table-layout: auto;
}

.clients-table th:last-child,
.clients-table td:last-child {
  min-width: 340px;
  width: 340px;
  white-space: nowrap;
}

.clients-table td:last-child .actions{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  white-space: nowrap;
}

.clients-table td:last-child button,
.clients-table td:last-child .primary,
.clients-table td:last-child .secondary,
.clients-table td:last-child .dangerbtn,
.clients-table td:last-child .secondary-link {
  flex: 0 0 auto;
  min-height: 36px;
  margin: 0;
}

.clients-table td {
  vertical-align: middle;
}

.tablewrap {
  overflow-x: auto;
  max-width: 100%;
}

@media (max-width: 700px) {
  .clients-table {
    min-width: 1320px;
  }

  .clients-table th:last-child,
  .clients-table td:last-child {
    min-width: 340px;
  }
}

/* IKS-RESALTE-FILAS-V1: resalte suave al pasar sobre clientes y paneles */
.tablewrap table tbody tr {
  transition: background-color .16s ease, box-shadow .16s ease;
}

.tablewrap table tbody tr:hover > td {
  background-color: #eaf2ff !important;
}

.tablewrap table tbody tr:hover > td:first-child {
  box-shadow: inset 3px 0 0 #4778ee;
}

.tablewrap table tbody tr:focus-within > td {
  background-color: #f0f5ff;
}

.clients-table tbody tr:hover > td {
  background-color: #eaf2ff !important;
}

.clients-table tbody tr:hover > td:first-child {
  box-shadow: inset 3px 0 0 #4778ee;
}

@media (prefers-reduced-motion: reduce) {
  .tablewrap table tbody tr {
    transition: none;
  }
}


/* IKS-UX-REBUILD-2026-V1: clean, consistent tables and controls */
:root{--iks-blue:#1765f5;--iks-blue-soft:#eaf2ff;--iks-line:#dce5f2;--iks-text:#16243b;--iks-muted:#63738b}
body{font-family:'DM Sans',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--iks-text);font-size:13px;line-height:1.45}
h1,h2,h3{letter-spacing:-.025em}
.panel{border-color:var(--iks-line);border-radius:14px;box-shadow:0 5px 20px rgba(26,52,93,.045);padding:22px}
.tablewrap{max-width:100%;overflow:auto;border:1px solid var(--iks-line);border-radius:10px;background:#fff;scrollbar-gutter:stable}
.tablewrap table{width:100%;border-collapse:separate;border-spacing:0;margin:0;font-size:12px}
.tablewrap thead th{position:sticky;top:0;z-index:1;background:#f6f9fe;color:#42536e;font-size:10px;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--iks-line);padding:12px 13px}
.tablewrap tbody td{padding:12px 13px;border-bottom:1px solid #eaf0f7;vertical-align:middle;line-height:1.45}
.tablewrap tbody tr:last-child td{border-bottom:0}
.tablewrap tbody tr{transition:background-color .14s ease,box-shadow .14s ease}
.tablewrap tbody tr:hover>td{background:#eaf2ff!important}
.tablewrap tbody tr:hover>td:first-child{box-shadow:inset 3px 0 0 #3978ff}
.tablewrap tbody tr:focus-within>td{background:#f0f5ff}
.tablewrap td .tag{display:inline-flex;max-width:190px;white-space:normal;overflow-wrap:anywhere;line-height:1.35;margin:2px 3px 2px 0}
.tablewrap td button,.tablewrap td a.secondary-link{white-space:nowrap}
.accounts-table{min-width:1060px;table-layout:auto}
.accounts-table th:nth-child(1){min-width:125px}.accounts-table th:nth-child(2),.accounts-table th:nth-child(3){min-width:95px}
.accounts-table th:nth-child(5){min-width:145px}.accounts-table th:nth-child(6){min-width:100px}
.server-tags{display:flex;gap:5px;flex-wrap:wrap;align-items:center;max-width:270px}
.server-tag{font-size:10px!important;padding:5px 7px!important;background:#eef4ff!important;color:#234a92!important;border:1px solid #dce8ff}
.credit-balance{display:inline-flex;align-items:center;gap:4px;border-radius:8px;background:#eff6ff;padding:6px 9px;color:#184ea8;font-weight:800;white-space:nowrap}
.credit-balance small{font-weight:600;font-size:10px;color:#5b6d89}
.credit-link{display:block;margin-top:5px;color:#1765f5;font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap}
.credit-link:hover{text-decoration:underline}
.account-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:120px;max-width:160px}
.account-actions form{margin:0}
.account-actions button,.account-actions summary{width:100%;min-height:34px;display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;line-height:1.25}
.account-actions details{position:relative}
.account-actions details>summary{cursor:pointer;list-style:none;border:1px solid #d8e2f0;border-radius:8px;padding:8px 10px;color:#2457ad;background:#fff;font-weight:700;font-size:11px}
.account-actions details>summary::-webkit-details-marker{display:none}
.account-actions details[open]>form{position:relative;z-index:2;background:#f8faff;border:1px solid #dce5f2;border-radius:8px;padding:10px;margin-top:5px;min-width:190px;box-shadow:0 8px 24px rgba(25,43,69,.08)}
.account-actions .stack{gap:8px}
.account-actions .danger-text{color:#c43f4b}
.account-filters{display:grid;grid-template-columns:minmax(200px,1.5fr) repeat(3,minmax(125px,1fr)) auto auto;gap:10px;align-items:end;margin:0 0 16px;padding:14px;background:#f8faff;border:1px solid #e4ebf6;border-radius:11px}
.account-filters label,.client-filters label{display:grid;gap:6px;min-width:0;color:#455771;font-size:11px;font-weight:700}
.account-filters input,.account-filters select,.client-filters input,.client-filters select{width:100%;min-width:0;min-height:38px;border:1px solid #d5dfed;border-radius:8px;background:#fff;padding:8px 10px;color:#1b2b44;font:inherit;font-size:12px}
.account-filters button,.client-filters button{min-height:38px;white-space:nowrap}
.account-filters .secondary-link,.client-filters .secondary-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 10px;border:1px solid #d5dfed;border-radius:8px;background:#fff;white-space:nowrap;text-decoration:none}
.client-filters{display:grid;grid-template-columns:minmax(200px,1.1fr) minmax(160px,.7fr) minmax(220px,1fr) auto auto;align-items:end;gap:10px;padding:13px;margin-bottom:16px;background:#f8faff;border:1px solid #e4ebf6;border-radius:11px}
.client-filters-hint{grid-column:1/-1;margin:-2px 0 0;font-size:11px}
.clients-table{min-width:1280px}
.clients-table td:last-child{min-width:330px}
.clients-table td{white-space:normal}
.clients-table td:nth-child(7),.clients-table td:nth-child(8){min-width:100px}
.status,.connection-pill{white-space:nowrap}
@media(max-width:1200px){.account-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.account-filters .search-field{grid-column:span 2}.client-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.client-filters .search-field{grid-column:span 2}}
@media(max-width:760px){.main{padding:16px 12px}.panel{padding:14px}.account-filters,.client-filters{grid-template-columns:1fr}.account-filters .search-field{grid-column:auto}.accounts-table{min-width:980px}.sectionhead{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.tablewrap tbody tr{transition:none}}


/* IKS-CLIENT-TABLE-FIX-V2 */
.tablewrap .clients-table {
  width: 100%;
  min-width: 1550px;
  table-layout: fixed;
}

.tablewrap .clients-table th:nth-child(1),
.tablewrap .clients-table td:nth-child(1) { width: 150px; }

.tablewrap .clients-table th:nth-child(2),
.tablewrap .clients-table td:nth-child(2) { width: 200px; }

.tablewrap .clients-table th:nth-child(3),
.tablewrap .clients-table td:nth-child(3) {
  width: 190px;
  min-width: 190px;
}

.tablewrap .clients-table th:nth-child(4),
.tablewrap .clients-table td:nth-child(4) { width: 125px; }

.tablewrap .clients-table th:nth-child(5),
.tablewrap .clients-table td:nth-child(5) { width: 145px; }

.tablewrap .clients-table th:nth-child(6),
.tablewrap .clients-table td:nth-child(6) { width: 165px; }

.tablewrap .clients-table th:nth-child(7),
.tablewrap .clients-table td:nth-child(7) { width: 115px; }

.tablewrap .clients-table th:nth-child(8),
.tablewrap .clients-table td:nth-child(8) { width: 145px; }

.tablewrap .clients-table th:nth-child(9),
.tablewrap .clients-table td:nth-child(9) {
  width: 315px;
  min-width: 315px;
}

.tablewrap .clients-table td:nth-child(3) .tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.4;
  padding: 6px 8px;
}

.tablewrap .clients-table td {
  vertical-align: middle;
  line-height: 1.45;
}

.tablewrap .clients-table tbody tr:hover > td {
  background-color: #eaf2ff !important;
}

@media (max-width: 760px) {
  .tablewrap .clients-table {
    min-width: 1550px;
  }
}


/* IKS-CLIENT-SEARCH-FOCUS-V1 */
#client-results {
  scroll-margin-top: 20px;
  outline: none;
}

#client-results tbody tr.search-result-focus > td {
  background: #dce9ff !important;
  box-shadow: inset 0 1px 0 #8bb0ff, inset 0 -1px 0 #8bb0ff;
}

#client-results tbody tr.search-result-focus > td:first-child {
  box-shadow: inset 4px 0 0 #3563ee, inset 0 1px 0 #8bb0ff, inset 0 -1px 0 #8bb0ff;
}

#client-results tbody tr:focus {
  outline: 2px solid #3563ee;
  outline-offset: -2px;
}



/* IKS-UX-CONSOLIDATED-V3: compact, consistent controls and tables */
.tablewrap td .tag {
  overflow-wrap: normal;
  word-break: normal;
  max-width: 220px;
}
.clients-table { min-width: 1120px !important; table-layout: auto; }
.clients-table th:nth-child(1), .clients-table td:nth-child(1) { min-width: 170px; }
.clients-table th:nth-child(2), .clients-table td:nth-child(2) { min-width: 165px; }
.clients-table th:nth-child(3), .clients-table td:nth-child(3) { min-width: 125px; }
.clients-table th:nth-child(4), .clients-table td:nth-child(4) { min-width: 125px; }
.clients-table th:nth-child(5), .clients-table td:nth-child(5) { min-width: 145px; }
.clients-table th:nth-child(6), .clients-table td:nth-child(6) { min-width: 110px; }
.clients-table th:nth-child(7), .clients-table td:nth-child(7) { min-width: 135px; }
.clients-table th:nth-child(8), .clients-table td:nth-child(8) { min-width: 330px; }
.clients-table td:nth-child(2) .tag { display:inline-flex; white-space:nowrap; overflow-wrap:normal; }

.accounts-table { min-width:1180px; }
.accounts-table td { vertical-align:middle; }
.accounts-table td .tag { white-space:nowrap; overflow-wrap:normal; }
.accounts-table .account-actions { display:flex!important; flex-flow:row nowrap!important; align-items:center; gap:6px; min-width:315px; max-width:none; }
.accounts-table .account-actions > form,.accounts-table .account-actions > details { flex:0 0 auto; margin:0; }
.accounts-table .account-actions button,.accounts-table .account-actions summary { width:auto; min-width:88px; min-height:33px; padding:7px 9px; white-space:nowrap; line-height:1.2; font-size:11px; }
.accounts-table .account-actions details{ position:relative; }
.accounts-table .account-actions details[open]>form{
  position:absolute; z-index:30; top:calc(100% + 5px); left:0; width:240px; min-width:0;
  max-width:min(280px,75vw); max-height:260px; overflow:auto; margin:0; padding:11px;
  border:1px solid #dce5f2; border-radius:10px; background:#fff;
  box-shadow:0 10px 28px rgba(22,36,59,.14);
}
.accounts-table .account-actions details:last-child[open]>form { left:auto; right:0; width:250px; }
.account-filters input::placeholder,.client-filters input::placeholder { color:#8795aa; opacity:1; }
@media(max-width:760px) { .accounts-table{min-width:1180px}.clients-table{min-width:1120px!important} }


/* IKS-UX-V4: compact edit credentials and credit management */
.accounts-table .account-actions details:first-child[open] > form { width:250px; max-height:300px; }
.accounts-table .account-actions details:first-child > form label { display:block; margin-bottom:8px; font-size:12px; }
.accounts-table .account-actions details:first-child > form input { width:100%; min-width:0; margin-top:4px; }
.credits-filters {
 display:grid; grid-template-columns:minmax(220px,1.6fr) minmax(170px,1fr) auto auto;
 align-items:end; gap:10px; padding:12px; border:1px solid var(--border,#d8e2f0);
 border-radius:12px; background:var(--surface-soft,#f7f9fd);
}
.credits-assign-form {
 display:grid; grid-template-columns:minmax(240px,1.4fr) minmax(130px,.7fr) minmax(180px,1fr) auto;
 align-items:end; gap:12px;
}
.credits-assign-form input,.credits-assign-form select { min-width:0; }
.credits-table { width:100%; min-width:720px; }
.credits-table td,.credits-table th { vertical-align:middle; }
@media(max-width:850px) {
 .credits-filters { grid-template-columns:1fr 1fr; }
 .credits-assign-form { grid-template-columns:1fr 1fr; }
}
@media(max-width:520px) {
 .credits-filters,.credits-assign-form { grid-template-columns:1fr; }
}


/* IKS-UX-V6: use centered dialogs for editing instead of clipped table dropdowns */
.edit-dialog {
  width: min(440px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(82vh, 680px);
  padding: 0;
  border: 1px solid #d6e0ef;
  border-radius: 14px;
  background: #fff;
  color: #17253d;
  box-shadow: 0 24px 70px rgba(17, 31, 53, .25);
  overflow: auto;
}
.edit-dialog::backdrop {
  background: rgba(12, 24, 43, .42);
  backdrop-filter: blur(2px);
}
.edit-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
}
.edit-dialog-form h3 {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 650;
}
.edit-dialog-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #354762;
  font-size: 12px;
  font-weight: 600;
}
.edit-dialog-form input {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid #ccd8e9;
  border-radius: 8px;
  background: #fff;
  color: #17253d;
  font: inherit;
  font-weight: 400;
}
.edit-dialog-form input[readonly] {
  background: #f3f6fb;
  color: #65758d;
}
.edit-dialog-form p { margin: 0; line-height: 1.5; }
.edit-dialog-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 5px;
}
.edit-dialog-actions button {
  min-height: 36px;
  padding: 8px 14px;
  white-space: nowrap;
}
.accounts-table .account-actions > .edit-dialog{
  position: fixed;
  z-index: 1000;
  min-width: 0;
}
@media (max-width: 520px) {
  .edit-dialog-form { padding: 16px; }
  .edit-dialog-actions { flex-direction: column-reverse; }
  .edit-dialog-actions button { width: 100%; }
}


/* IKS-UX-V8: alineacion estable de datos y acciones en tablas */
.tablewrap {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-gutter: stable;
}
.tablewrap table {
  border-collapse: separate;
  border-spacing: 0;
}
.tablewrap th {
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
  line-height: 1.25;
}
.tablewrap td {
  vertical-align: middle;
  line-height: 1.4;
  overflow-wrap: normal;
  word-break: normal;
}
.clients-table th, .clients-table td {
  padding: 12px 13px;
}
.clients-table th:nth-child(1), .clients-table td:nth-child(1) { min-width: 145px; }
.clients-table th:nth-child(2), .clients-table td:nth-child(2) { min-width: 125px; }
.clients-table th:nth-child(3), .clients-table td:nth-child(3) { min-width: 140px; }
.clients-table th:nth-child(5), .clients-table td:nth-child(5) { min-width: 155px; }
.clients-table th:nth-child(6), .clients-table td:nth-child(6) { min-width: 135px; }
.clients-table td:nth-child(5) .ip-country,
.clients-table td:nth-child(5) .ip-country-row,
.clients-table .ip-country-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  min-width: 135px;
  white-space: nowrap;
}
.clients-table td:nth-child(5) .tag {
  display: inline-flex;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.clients-table td:nth-child(6) > *,
.clients-table td:nth-child(7) > * {
  white-space: nowrap;
}
.clients-table td:nth-child(7) small,
.clients-table .cellsub {
  display: block;
  margin-top: 3px;
  white-space: nowrap;
  line-height: 1.35;
}
.accounts-table {
  min-width: 1160px;
  table-layout: auto;
}
.accounts-table th, .accounts-table td {
  padding: 12px 12px;
  vertical-align: middle;
}
.accounts-table td:first-child strong,
.accounts-table td .tag,
.accounts-table .credit-balance,
.accounts-table .status {
  white-space: nowrap;
}
.accounts-table .account-actions {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: max-content;
  white-space: nowrap;
}
.accounts-table .account-actions > form,
.accounts-table .account-actions > details {
  flex: 0 0 auto;
  margin: 0;
}
.accounts-table .account-actions button,
.accounts-table .account-actions summary {
  min-height: 35px;
  white-space: nowrap;
  line-height: 1.25;
}
.accounts-table .created-cell,
.accounts-table .created-cell small {
  white-space: nowrap;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .clients-table { min-width: 1120px !important; }
  .accounts-table { min-width: 1160px; }
}


/* IKS-UX-V10: selectores verificados contra clients.html y accounts.html de V8 */
.clients-table th:last-child,
.accounts-table th:last-child {
  text-align: center !important;
}
.clients-table td:last-child,
.accounts-table td:last-child {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Cuentas: agrupa solo los controles de la columna Acciones */
.accounts-table td:last-child > .account-actions {
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 9px !important;
  border: 1px solid #e0e7f2 !important;
  border-radius: 12px !important;
  background: #fbfcff !important;
  box-shadow: 0 3px 9px rgba(23, 42, 72, .09), 0 1px 2px rgba(23, 42, 72, .04) !important;
  box-sizing: border-box !important;
}
.accounts-table .account-actions > form,
.accounts-table .account-actions > details,
.accounts-table .account-actions > button {
  flex: 0 0 auto !important;
  margin: 0 !important;
}


/* IKS V12: IP a la izquierda y país a la derecha; sin superposición */
.clients-table .client-ip-country {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}
.clients-table .client-ip-country .client-ip,
.clients-table .client-ip-country .client-country {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.clients-table .client-ip-country .client-country {
  color: #60718d;
  gap: 4px;
}
.clients-table .client-ip-country .cellsub {
  display: inline !important;
  margin: 0 !important;
}

/* Dialog compacto{
  width: min(500px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  padding: 0 !important;
  margin: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid #dce5f2 !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(12, 27, 52, .28) !important;
}

/* Desplegable de servidores: compacto y anclado al control{
  width: 245px !important;
  max-width: min(270px, 75vw) !important;
  max-height: min(260px, 42vh) !important;
  top: auto !important;
  bottom: calc(100% + 7px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1500 !important;
}


/* V15 — Clientes: encabezados y datos centrados, IP/país en una sola línea,
   y todas las acciones agrupadas visualmente como en Cuentas del panel. */
#client-results .clients-table {
  min-width: 1320px !important;
  table-layout: auto;
}
#client-results .clients-table thead th {
  text-align: center !important;
  vertical-align: middle;
  white-space: nowrap;
}
#client-results .clients-table tbody td {
  vertical-align: middle;
}
#client-results .clients-table tbody td:nth-child(1),
#client-results .clients-table tbody td:nth-child(2),
#client-results .clients-table tbody td:nth-child(3),
#client-results .clients-table tbody td:nth-child(4),
#client-results .clients-table tbody td:nth-child(5),
#client-results .clients-table tbody td:nth-child(6),
#client-results .clients-table tbody td:nth-child(7) {
  text-align: center !important;
}
#client-results .clients-table tbody td:first-child strong,
#client-results .clients-table tbody td:first-child .cellsub {
  display: block;
  text-align: center;
}
#client-results .clients-table tbody td:first-child .cellsub {
  white-space: nowrap;
}
#client-results .clients-table td:nth-child(2) .tag {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
#client-results .clients-table .status,
#client-results .clients-table .connection-pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
#client-results .clients-table .client-ip-country {
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: max-content;
  max-width: none;
  margin-inline: auto;
  white-space: nowrap !important;
}
#client-results .clients-table .client-ip-country .client-ip,
#client-results .clients-table .client-ip-country .client-country {
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 4px;
  white-space: nowrap !important;
  min-width: max-content;
  margin: 0;
}
#client-results .clients-table .client-ip-country .client-ip code {
  white-space: nowrap;
}
#client-results .clients-table td:nth-child(6) .cellsub,
#client-results .clients-table td:nth-child(7) .cellsub {
  display: block;
  text-align: center;
  white-space: nowrap;
}
#client-results .clients-table td:last-child {
  min-width: 360px !important;
  text-align: center !important;
}
@media (max-width: 760px) {
  #client-results .clients-table { min-width: 1320px !important; }
  #client-results .clients-table .client-ip-country {
    flex-flow: row nowrap !important;
  }
}


/* V16 — Asignación de servidores mediante mini ventana modal */
.accounts-table .server-assign-open {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin-top: 7px;
  padding: 7px 10px;
  min-height: 32px;
  font-size: 11px;
}
dialog.server-assign-dialog {
  width: min(440px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(82vh, 620px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #d9e3f2;
  border-radius: 16px;
  background: #fff;
  color: var(--ink, #172b4d);
  box-shadow: 0 22px 65px rgba(14, 31, 58, .24);
}
dialog.server-assign-dialog::backdrop {
  background: rgba(15, 27, 47, .46);
  backdrop-filter: blur(2px);
}
dialog.server-assign-dialog .server-assign-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(82vh, 620px);
  padding: 22px;
  overflow: hidden;
}
dialog.server-assign-dialog .server-assign-form h3 {
  margin: 0;
  text-align: center;
  font-size: 18px;
}
dialog.server-assign-dialog .server-assign-form > .muted {
  margin: 0;
  text-align: center;
}
dialog.server-assign-dialog .server-assign-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 3px;
  max-height: min(45vh, 340px);
  overflow: auto;
}
dialog.server-assign-dialog .server-assign-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e0e8f4;
  border-radius: 9px;
  background: #fbfcff;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
dialog.server-assign-dialog .server-assign-option:has(input:checked) {
  border-color: #9bb8ff;
  background: #edf3ff;
  box-shadow: inset 0 0 0 1px rgba(49, 92, 245, .10);
}
dialog.server-assign-dialog .server-assign-option input {
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #315cf5;
}
dialog.server-assign-dialog .edit-dialog-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid #edf1f7;
}
dialog.server-assign-dialog .edit-dialog-actions button {
  min-height: 38px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  dialog.server-assign-dialog .server-assign-form { padding: 16px; }
  dialog.server-assign-dialog .server-assign-grid { grid-template-columns: 1fr; }
}


/* V17 — Modales consistentes para permisos y créditos en Cuentas del panel */
.modal-action {
  display: inline-flex !important;
  border: 0;
  background: transparent;
  padding: 5px 0;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
.action-config-dialog {
  width: min(420px, calc(100vw - 32px));
}
.action-config-dialog .action-config-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-height: min(82vh, 620px);
  overflow: auto;
  padding: 22px;
}
.action-config-dialog .action-config-form h3 {
  margin: 0;
  text-align: center;
  font-size: 18px;
}
.action-config-dialog .action-config-form > .muted {
  margin: -3px 0 2px;
  text-align: center;
}
.action-config-dialog .action-config-options {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.action-config-dialog .server-assign-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e0e8f4;
  border-radius: 10px;
  background: #fbfcff;
  cursor: pointer;
  font-size: 13px;
}
.action-config-dialog .server-assign-option:has(input:checked) {
  border-color: #9bb8ff;
  background: #edf3ff;
}
.action-config-dialog .server-assign-option input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #315cf5;
}
.action-config-dialog .action-config-form > label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.action-config-dialog .action-config-form input[type="number"],
.action-config-dialog .action-config-form input[type="text"] {
  width: 100%;
}


/* V19 — Desk en una sola línea, editable también en servidores existentes */
.serverlayout input[name="desk"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .015em;
  white-space: nowrap;
}
.server-desk-cell { min-width: 330px; }
.server-desk-edit {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 320px;
}
.server-desk-edit input[name="desk"] {
  width: 255px;
  min-width: 255px;
  padding: 8px 9px;
  font-size: 11px;
}
.server-desk-edit button { flex: 0 0 auto; white-space: nowrap; }


/* V20 — IP arriba, país debajo y tiempo conectado legible */
#client-results .clients-table .client-ip-country {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  white-space: normal !important;
}
#client-results .clients-table .client-ip-country .client-ip,
#client-results .clients-table .client-ip-country .client-country {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  line-height: 1.35;
}
#client-results .clients-table .client-country {
  font-size: 11px;
  color: var(--muted, #64748b);
}
#client-results .clients-table .connection-duration {
  display: block;
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #64748b);
}


/* V21 — Endpoints alineados y acciones agrupadas en panel sombreado */
.endpoints-table { min-width: 1060px; }
.endpoints-table th, .endpoints-table td { vertical-align: middle; text-align: center; }
.endpoints-table th { white-space: nowrap; }
.endpoints-table .endpoint-name { min-width: 175px; text-align: center; }
.endpoints-table .endpoint-ip { min-width: 150px; }
.endpoints-table .endpoint-address { min-width: 180px; white-space: nowrap; }
.endpoints-table .server-desk-cell { min-width: 300px; text-align: center; }
.desk-display { display: inline-block; white-space: nowrap; font-size: 11px; letter-spacing: .015em; }
.endpoint-action-cell { min-width: 230px; }
.endpoint-edit { position: relative; }
.endpoint-edit[open] { display: block !important; }
.endpoint-edit-form { width: min(320px, 75vw); padding: 14px; margin-top: 8px; text-align: left; background: var(--panel, #fff); border: 1px solid var(--border, #d1d5db); border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,.18); }
.endpoint-edit-form label { text-align: left; }
.endpoint-edit-form input[name="desk"] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }

/* V21 — Endpoints: acciones ordenadas y formularios en ventana centrada */
.endpoint-action-cell { min-width: 290px; width: 290px; }
dialog.endpoint-dialog { width:min(520px,calc(100vw - 32px)); max-width:520px; max-height:calc(100dvh - 32px); overflow:auto; padding:0; border:1px solid var(--border,#d1d5db); border-radius:16px; background:var(--panel,#fff); color:var(--text,#111827); box-shadow:0 24px 70px rgba(0,0,0,.28); }
dialog.endpoint-dialog::backdrop { background:rgba(15,23,42,.58); backdrop-filter:blur(2px); }
.endpoint-dialog-form { padding:24px; gap:14px; }
.endpoint-dialog-form h3 { margin:0; font-size:1.2rem; }
.endpoint-dialog-form > .muted { margin:0 0 4px; }
.endpoint-dialog-form label { display:flex; flex-direction:column; gap:6px; }
.endpoint-dialog-form input:not([type=checkbox]) { width:100%; box-sizing:border-box; }
.endpoint-dialog-form input[name=desk] { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; }
.endpoint-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.endpoint-access-list { display:grid; gap:8px; max-height:45vh; overflow:auto; padding:10px; border:1px solid var(--border,#d1d5db); border-radius:10px; }
@media(max-width:600px){ .endpoint-action-cell { min-width:230px; width:230px; } .endpoint-dialog-form { padding:17px; } .endpoint-dialog-actions { flex-direction:column-reverse; } .endpoint-dialog-actions button { width:100%; } }

/* V23: Endpoints uses a compact action entry; actions run in a centered modal. */
.endpoints-table { width:100%; table-layout:auto; }
.endpoints-table th,.endpoints-table td { vertical-align:middle; }
.endpoints-table .endpoint-name { min-width:130px; text-align:left; }
.endpoints-table .endpoint-ip { min-width:115px; }
.endpoints-table .endpoint-address { min-width:135px; white-space:nowrap; }
.endpoints-table .server-desk-cell { min-width:155px; }
.endpoint-action-cell { width:105px !important; min-width:105px !important; text-align:center; }
.endpoint-action-cell > button { min-width:92px; }
dialog.endpoint-actions-dialog { width:min(860px,calc(100vw - 32px)); max-width:860px; max-height:calc(100dvh - 32px); overflow:auto; padding:0; border:1px solid var(--border,#d1d5db); border-radius:16px; background:var(--panel,#fff); color:var(--text,#111827); box-shadow:0 24px 70px rgba(0,0,0,.28); }
dialog.endpoint-actions-dialog::backdrop { background:rgba(15,23,42,.58); backdrop-filter:blur(2px); }
.endpoint-dialog-inner { padding:22px; }
.endpoint-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.endpoint-dialog-head h3 { margin:0 0 4px; }
.endpoint-dialog-head p { margin:0; overflow-wrap:anywhere; }
.endpoint-actions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.endpoint-action-card { min-width:0; display:flex; flex-direction:column; gap:10px; padding:16px; border:1px solid var(--border,#d1d5db); border-radius:12px; background:var(--surface-soft,rgba(100,116,139,.08)); box-shadow:0 3px 10px rgba(15,23,42,.08); }
.endpoint-action-card p { margin:0; }
.endpoint-action-card label { display:flex; flex-direction:column; gap:5px; min-width:0; }
.endpoint-action-card input:not([type=checkbox]) { width:100%; box-sizing:border-box; min-width:0; }
.endpoint-action-card input[name=desk] { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; }
.endpoint-action-card .endpoint-access-list { max-height:220px; overflow:auto; }
.endpoint-action-card .checkline { display:flex; flex-direction:row; align-items:center; gap:8px; overflow-wrap:anywhere; }
.endpoint-action-card .checkline input { width:auto; flex:0 0 auto; }
.endpoint-delete-card { border-color:rgba(190,50,50,.28); }
@media(max-width:680px){ .endpoint-actions-grid { grid-template-columns:minmax(0,1fr); } .endpoint-dialog-inner { padding:15px; } .endpoints-table .server-desk-cell { min-width:120px; } }

/* V27: separated client/demo workflows in the navigation */
.nav-submenu{display:flex;flex-direction:column;gap:3px;margin:-5px 0 8px 34px;padding-left:10px;border-left:1px solid var(--border, #d7dce3)}
.nav-submenu a{display:block;padding:7px 9px;border-radius:7px;font-size:.82rem;line-height:1.25;color:var(--muted, #667085);text-decoration:none;white-space:normal}
.nav-submenu a:hover,.nav-submenu a.active{background:var(--surface-soft, rgba(127,127,127,.12));color:var(--text, inherit)}
.workflow-tabs{margin-bottom:16px;flex-wrap:wrap}
.demo-permission-note{grid-column:1/-1}

/* V28: compact action column with server-style Manage dialogs */
.manage-cell { min-width: 112px; text-align: center; vertical-align: middle; }
.manage-open { min-width: 96px; white-space: nowrap; }
dialog.manage-dialog { width: min(650px, calc(100vw - 28px)); max-width: 650px; max-height: calc(100dvh - 28px); overflow: auto; padding: 0; border: 1px solid var(--border,#d1d5db); border-radius: 16px; background: var(--panel,#fff); color: var(--text,#111827); box-shadow: 0 24px 70px rgba(0,0,0,.28); }
dialog.manage-dialog::backdrop { background: rgba(15,23,42,.58); backdrop-filter: blur(2px); }
.manage-actions-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.manage-actions-grid > button, .manage-action-form { min-width: 0; border: 1px solid var(--border,#d7dee8); border-radius: 10px; background: var(--surface-muted,#f7f9fc); padding: 12px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; }
.manage-actions-grid > button { align-items: center; min-height: 44px; }
.manage-action-form label { display: flex; flex-direction: column; gap: 6px; }
.manage-action-form input, .manage-action-form select { width: 100%; box-sizing: border-box; }
.manage-action-form p { margin: 0; }
.manage-delete { border-color: #efc7cb; background: #fff8f8; }
.manage-actions-grid .copy-client { min-height: 44px; }
@media(max-width:600px) { .manage-actions-grid { grid-template-columns: minmax(0,1fr); } .manage-dialog .endpoint-dialog-inner { padding: 15px; } }

/* V30: collapsible Clients/Demos group, separate Multilogin routes. */
.nav-dropdown{margin:0;padding:0}.nav-dropdown-summary{position:relative;display:flex;align-items:center;gap:11px;min-height:42px;padding:11px 12px;border-radius:9px;color:var(--muted,#667085);cursor:pointer;list-style:none;user-select:none}.nav-dropdown-summary::-webkit-details-marker{display:none}.nav-dropdown-summary:hover{background:var(--surface-soft,rgba(127,127,127,.12));color:var(--text,inherit)}.nav-dropdown[open]>.nav-dropdown-summary{background:#243653;color:#fff;font-weight:700}.nav-dropdown[open]>.nav-dropdown-summary .nav-icon{color:#8eabff}.nav-chevron{margin-left:auto;font-size:15px;transition:transform .15s ease}.nav-dropdown[open]>.nav-dropdown-summary .nav-chevron{transform:rotate(180deg)}.nav-dropdown .nav-submenu{margin-top:0}


/* V33 — acabado SaaS moderno, consistente y responsive */
:root{
  --bg:#f3f6fc;
  --ink:#13213a;
  --muted:#687891;
  --line:#dfe7f4;
  --blue:#315cf5;
  --nav:#101d33;
  --green:#14966b;
}
body{background:linear-gradient(180deg,#f7f9fd 0%,#f1f5fb 100%);color:var(--ink)}
h1,h2,h3{letter-spacing:-.035em}
h1{font-size:clamp(25px,2.2vw,32px);font-weight:800}
.sidebar{background:linear-gradient(180deg,#111f36 0%,#0d192d 100%);box-shadow:8px 0 28px #0e1b2c0b}
.brandmark{box-shadow:0 5px 14px #315cf52c}
.sidebar nav a,.nav-dropdown-summary{transition:background .18s ease,color .18s ease,transform .18s ease}
.sidebar nav a:hover,.sidebar nav a:focus,.nav-dropdown-summary:hover{background:#1b2d4a;color:#fff}
.sidebar nav a.active,.sidebar nav a[class~="active"]{background:linear-gradient(100deg,#243957,#20334f);color:#fff;box-shadow:inset 3px 0 0 #5278ff}
.main{padding-top:30px}
.panel,.stat{border-color:#dce5f3;border-radius:16px;box-shadow:0 5px 18px #18345a08;transition:box-shadow .18s ease,border-color .18s ease}
.panel:hover,.stat:hover{border-color:#d1def2;box-shadow:0 9px 26px #18345a0c}
.stat{padding:21px 22px}
.stat>strong{font-size:clamp(28px,2.4vw,34px);letter-spacing:-.055em}
.statlabel{font-weight:600}
.panel{padding:22px}
th{color:#687995;background:#f8faff;letter-spacing:.8px}
th:first-child{border-top-left-radius:8px}
th:last-child{border-top-right-radius:8px}
td{color:#52627a}
tbody tr{transition:background .15s ease}
tbody tr:hover td{background:#f7f9ff}
.accounts-table tbody tr:target td{background:#eef4ff}
.tag{border:1px solid #e7edf7;background:#f5f7fc;color:#4b5c77}
input,select,textarea{border-color:#d5dfef;border-radius:10px;transition:border-color .15s ease,box-shadow .15s ease}
input:focus,select:focus,textarea:focus{border-color:#7896ff;box-shadow:0 0 0 4px #315cf514}
.primary{background:linear-gradient(135deg,#3865ff,#2d55e8);border-radius:10px;box-shadow:0 3px 8px #315cf51c;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.primary:hover{background:linear-gradient(135deg,#2d58ed,#2348d4);box-shadow:0 5px 13px #315cf52b;transform:translateY(-1px)}
.secondary{border-color:#d4dfef;border-radius:10px;color:#405573;transition:background .15s ease,border-color .15s ease}
.secondary:hover{background:#f5f8ff;border-color:#b9cafa}
.accounts-table .manage-open{background:linear-gradient(135deg,#3865ff,#2d55e8)!important;color:#fff!important;border:1px solid #315cf5!important;border-radius:10px;box-shadow:0 3px 8px #315cf51c;font-weight:700}
.accounts-table .manage-open:hover{background:linear-gradient(135deg,#2d58ed,#2348d4)!important;border-color:#244bd0!important}
.edit-dialog,.endpoint-dialog{border:1px solid #dce5f3;border-radius:18px;box-shadow:0 24px 80px #0b19334a;padding:0}
dialog::backdrop{background:#101c32a6;backdrop-filter:blur(3px)}
.edit-dialog-form,.endpoint-dialog-inner{padding:24px}
.edit-dialog h3,.endpoint-dialog h3{font-size:19px;margin:0 0 8px}
.edit-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.status.on{color:#11835f}
.status.on:before{box-shadow:0 0 0 3px #1db7841a}
.account-filters{background:#f7f9fe;border:1px solid #e1e9f6;border-radius:13px;padding:14px;margin-bottom:17px}
@media(max-width:700px){
 .main{padding:19px 13px}
 .panel{padding:16px;border-radius:13px}
 .stat{padding:17px}
 .account-filters{padding:12px}
}


/* V34 — Auditoría agrupada por IP */
.audit-notice{margin-bottom:18px}
.audit-groups-panel,.audit-ungrouped-panel{margin-top:16px}
.audit-ip-list{display:flex;flex-direction:column;gap:10px}
.audit-ip-group{border:1px solid #dfe7f4;border-radius:13px;background:#fff;overflow:hidden}
.audit-ip-group[open]{border-color:#bfd0ff;box-shadow:0 5px 18px #18345a08}
.audit-ip-group>summary{list-style:none;display:grid;grid-template-columns:minmax(170px,1.3fr) minmax(110px,.8fr) minmax(175px,1fr) auto 18px;align-items:center;gap:16px;padding:15px 17px;cursor:pointer}
.audit-ip-group>summary::-webkit-details-marker{display:none}
.audit-ip-group>summary:hover{background:#f7f9ff}
.audit-ip-main,.audit-ip-time{display:flex;flex-direction:column;gap:4px;min-width:0}
.audit-ip-main strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#2448b5;overflow-wrap:anywhere}
.audit-ip-main small,.audit-ip-time small{color:#71809a;font-size:12px}
.audit-ip-time strong{font-size:13px;color:#263752}
.audit-ip-country{font-size:13px;color:#52627a}
.audit-chevron{color:#315cf5;transition:transform .15s ease}
.audit-ip-group[open] .audit-chevron{transform:rotate(180deg)}
.audit-events-table{border-top:1px solid #e6edf7}
.audit-events-table table{min-width:800px}
.audit-detail-text{max-width:460px;overflow-wrap:anywhere}
@media(max-width:800px){
 .audit-ip-group>summary{grid-template-columns:minmax(0,1fr) auto 18px;gap:10px}
 .audit-ip-country{grid-column:1}
 .audit-ip-time{grid-column:1}
 .audit-ip-group>summary>.tag{grid-column:2;grid-row:1}
 .audit-chevron{grid-column:3;grid-row:1}
}


/* V35 — búsqueda por IP y retención de auditoría */
.audit-ip-search-form{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;padding:15px;background:#f7f9fe;border:1px solid #e1e9f6;border-radius:12px}
.audit-ip-search-form label{font-size:13px;font-weight:700;color:#52627a}
.audit-ip-search-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.audit-ip-search-row input{flex:1;min-width:220px;max-width:520px;background:#fff}
.audit-clear-search{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:10px 13px;border:1px solid #d4dfef;border-radius:10px;color:#405573;background:#fff}
.audit-clear-search:hover{background:#f0f5ff}
@media(max-width:560px){.audit-ip-search-row input{min-width:100%;max-width:none}.audit-ip-search-row button,.audit-clear-search{width:100%}}

/* V36: versión oficial visible en el pie del menú lateral */
.app-version{display:block;margin-top:5px;font-size:11px;letter-spacing:.04em;color:#94a3b8}

/* V38 — indicador visual claro del estado de los respaldos automáticos */
.backup-state{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.04em}
.backup-state-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.backup-state-on{color:#1457d9;background:#e8f0ff;border:1px solid #b9d0ff}
.backup-state-on .backup-state-dot{background:#2160f5;box-shadow:0 0 0 3px #d4e3ff}
.backup-state-off{color:#667085;background:#f1f3f6;border:1px solid #d9dee7}
.backup-state-off .backup-state-dot{background:#98a2b3}
.backup-control-row{display:grid;grid-template-columns:minmax(230px,1.3fr) minmax(130px,.7fr) minmax(170px,.8fr) auto;gap:18px;align-items:center;margin:16px 0;padding:16px;border:1px solid #dbe5f7;border-radius:14px;background:linear-gradient(110deg,#f5f8ff,#fff)}
.backup-current-state{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px}
.backup-current-state.is-on{background:#eaf1ff;color:#174ea6;border:1px solid #c6d8ff}
.backup-current-state.is-off{background:#f3f4f6;color:#475467;border:1px solid #e0e3e8}
.backup-current-state.is-on .backup-state-dot{background:#2160f5;box-shadow:0 0 0 4px #d4e3ff}
.backup-current-state.is-off .backup-state-dot{background:#98a2b3}
.backup-current-state strong,.backup-current-state small{display:block}
.backup-current-state small{margin-top:5px;color:#667085}
.backup-current-state.is-on small b{color:#2160f5}
.backup-current-state.is-off small b{color:#667085}
.backup-schedule-meta{display:flex;flex-direction:column;gap:4px;padding-left:12px;border-left:1px solid #d8e3f5}
.backup-schedule-meta strong{font-size:16px;color:#102a56}
.backup-schedule-meta small,.backup-meta-label{font-size:12px;color:#667085}
.backup-disable-btn{background:#fff!important;color:#344054!important;border:1px solid #cbd5e1!important;border-radius:10px;padding:11px 14px;font-weight:700;cursor:pointer}
.backup-disable-btn:hover{background:#f2f5fa!important}
.backup-enable-btn{background:#285cf6!important;color:#fff!important;border:1px solid #285cf6!important;border-radius:10px;padding:11px 14px;font-weight:700;cursor:pointer}
.backup-enable-btn:hover{background:#1747d4!important}
@media(max-width:900px){.backup-control-row{grid-template-columns:1fr 1fr}.backup-current-state{grid-column:1/-1}}
@media(max-width:560px){.backup-control-row{grid-template-columns:1fr}.backup-current-state{grid-column:auto}.backup-schedule-meta{border-left:0;padding-left:0}.backup-control-row form,.backup-control-row button{width:100%}}




/* V42: compact sidebar navigation and grouped server integrations */
.sidebar nav{gap:3px}
.sidebar nav>a{padding:9px 11px;gap:10px}
.sidebar .nav-dropdown-summary{min-height:36px;padding:8px 10px;gap:9px;font-size:12.5px}
.sidebar .nav-submenu{gap:2px;margin:-3px 0 5px 29px;padding-left:8px}
.sidebar .nav-submenu a{padding:6px 7px;font-size:12px;display:flex;align-items:center;gap:8px}
.sidebar .nav-submenu a .nav-icon{font-size:13px;min-width:14px}
.sidebar .nav-dropdown-summary .nav-icon{min-width:16px}
.sidebar-collapsed .sidebar nav .nav-dropdown-summary{justify-content:center;padding:9px 5px}
.sidebar-collapsed .sidebar nav .nav-dropdown-summary .nav-chevron{display:none}
.sidebar-collapsed .sidebar nav .nav-dropdown[open] .nav-submenu{margin:0;padding:5px 0;border:0;align-items:center}
.sidebar-collapsed .sidebar nav .nav-submenu a{justify-content:center;padding:8px 3px;font-size:0}
.sidebar-collapsed .sidebar nav .nav-submenu a .nav-icon{font-size:14px}

/* V44: one compact navigation group for infrastructure and client/account types */
.sidebar .nav-submenu a{min-height:29px}
.sidebar .nav-submenu a.active{background:rgba(71,116,255,.16);border-left:2px solid #4774ff;border-radius:8px}
.sidebar .nav-dropdown-summary{font-weight:650}

/* V45: modern server performance dashboard */
.performance-hero{align-items:center;margin-bottom:22px}
.performance-live{display:inline-flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid #dbe5f7;background:#fff;border-radius:999px;color:#294166;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 5px 18px rgba(24,49,91,.04)}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#21bd91;box-shadow:0 0 0 4px rgba(33,189,145,.12);flex:0 0 auto}
.performance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 20px}
.metric-card{min-width:0;background:linear-gradient(160deg,#fff 0%,#fbfcff 100%);border:1px solid #dce6f6;border-radius:18px;padding:20px;box-shadow:0 8px 25px rgba(28,54,96,.045)}
.metric-cpu{background:linear-gradient(145deg,#fff 0%,#f5f8ff 100%)}
.metric-head{display:flex;align-items:center;gap:10px;margin-bottom:17px}
.metric-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:#eaf0ff;color:#365cf5;font-size:20px;font-weight:700}
.metric-icon.blue{background:#e9f2ff;color:#3277e9}.metric-icon.violet{background:#f0eaff;color:#8255d9}.metric-icon.green{background:#e4faf2;color:#159b72}
.metric-label{font-size:12px;font-weight:650;color:#627493}
.metric-value{font-size:clamp(28px,2.4vw,36px);line-height:1.12;letter-spacing:-1.2px;font-weight:750;color:#142544;margin-bottom:9px}
.metric-value small{font-size:16px;letter-spacing:0;font-weight:650}
.metric-caption{font-size:11px;line-height:1.65;color:#7383a0;min-height:19px}
.metric-track{height:7px;background:#edf1f8;border-radius:99px;overflow:hidden;margin-top:15px}
.metric-track span{display:block;height:100%;min-width:0;max-width:100%;border-radius:99px;background:linear-gradient(90deg,#355cf6,#6093ff)}
.violet-track span{background:linear-gradient(90deg,#8054d8,#b18bff)}
.load-chips{display:flex;gap:5px;margin-top:14px;flex-wrap:wrap}
.load-chips span{display:flex;gap:5px;align-items:center;padding:5px 7px;border-radius:7px;background:#edf2ff;color:#6a7b9b;font-size:10px}
.load-chips b{color:#2445b9}
.metric-uptime{background:linear-gradient(145deg,#fff 0%,#f3fcf8 100%)}
.performance-details{padding:24px;margin-bottom:18px}
.performance-details .sectionhead{margin-bottom:20px}
.resource-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.resource-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#5f7191;font-size:12px;font-weight:600;margin-bottom:10px}
.resource-meta strong{color:#172849}
.large-track{height:10px;margin-top:0}
.performance-note{display:flex;align-items:flex-start;gap:13px;padding:17px 19px;border:1px solid #dce6f6;border-radius:15px;background:#f7f9fe;color:#667795;font-size:12px;line-height:1.7;margin-bottom:20px}
.performance-note p{margin:4px 0 0}.performance-note strong{color:#243653}
.note-icon{display:flex;align-items:center;justify-content:center;flex:0 0 25px;width:25px;height:25px;border-radius:50%;background:#e5edff;color:#3157e9;font-weight:800}
@media(max-width:1100px){.performance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.performance-grid{grid-template-columns:1fr}.resource-list{grid-template-columns:1fr}.performance-hero{align-items:flex-start;flex-direction:column}.metric-card{padding:17px}.performance-details{padding:18px}}


/* V48: consistent contextual back links */
.context-back-wrap{margin:0 0 12px;display:flex;align-items:center}.context-back{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line,#dce2eb);border-radius:8px;background:#fff;color:var(--muted,#526077);text-decoration:none;font-size:12px;font-weight:700}.context-back:hover{border-color:#9eb2ff;color:var(--blue,#315eea);background:#f8faff}.context-back:focus-visible{outline:3px solid #315eea35;outline-offset:2px}


/* Firewall delete confirmation: compact checkbox row matching account permission controls. */
.firewall-delete-form label.checkline {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 5px 2px;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  cursor: pointer;
}
.firewall-delete-form label.checkline input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  flex: 0 0 15px;
  width: 15px !important;
  min-width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
}
.firewall-delete-form button.dangerbtn {
  width: 100%;
  min-height: 38px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}


/* IKS bulk actions: compact, aligned with the existing Control Center design */
.bulk-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;margin:10px 0 12px;background:#f8faff;border:1px solid var(--line);border-radius:9px;min-height:48px}
.bulk-select-all{display:inline-flex!important;align-items:center;gap:8px;margin:0!important;white-space:nowrap;font-size:12px!important;color:#42516a}
.bulk-hint{flex:1;min-width:180px;font-size:11px;color:var(--muted);line-height:1.4}
.bulk-actions .dangerbtn{min-height:32px;padding:7px 11px;white-space:nowrap}
input[type=checkbox].bulk-panel-id,input[type=checkbox].bulk-client-id,input[type=checkbox].bulk-credit-id,.bulk-select-all input[type=checkbox]{appearance:auto!important;-webkit-appearance:checkbox!important;display:inline-block!important;flex:0 0 14px!important;width:14px!important;min-width:14px!important;max-width:14px!important;height:14px!important;min-height:14px!important;margin:0!important;padding:0!important;border:initial!important;border-radius:3px!important;box-shadow:none!important;accent-color:#315eea;vertical-align:middle}
.bulk-check-cell{width:92px}
.accounts-table td:has(> .bulk-panel-id),.clients-table td:has(> .bulk-client-id),.credits-table td:has(> .bulk-credit-id){width:92px;text-align:center}
@media(max-width:720px){.bulk-actions{align-items:flex-start;gap:9px}.bulk-hint{flex-basis:100%;order:3}.bulk-actions .dangerbtn{margin-left:auto}}


/* IKS UX patch: keep panel usernames on one line and give assigned servers room. */
.accounts-table th:nth-child(2),
.accounts-table td:nth-child(2) {
  width: 155px !important;
  min-width: 155px !important;
  max-width: 190px;
}
.accounts-table td:nth-child(2) strong {
  display: inline-block;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}
.accounts-table th:nth-child(7),
.accounts-table td:nth-child(7) {
  min-width: 205px !important;
}
.accounts-table th:nth-child(8),
.accounts-table td:nth-child(8) {
  min-width: 105px;
}
@media (max-width: 760px) {
  .accounts-table th:nth-child(2),
  .accounts-table td:nth-child(2) {
    width: 155px !important;
    min-width: 155px !important;
  }
}

/* Automatic password reset: explanatory action card inside Manage dialogs. */
.password-reset-info { grid-column: auto; }
.password-reset-info .tiny { line-height: 1.35; }
.password-reset-info button { white-space: normal; }


/* IKS compact management actions and friendly result dialog */
.manage-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
}
.manage-actions-grid > * { min-width: 0; max-width: 100%; }
.manage-actions-grid button,
.manage-actions-grid input,
.manage-actions-grid select { max-width: 100%; box-sizing: border-box; }
.manage-actions-grid .password-reset-info { overflow: hidden; }
.manage-actions-grid .password-reset-info p { overflow-wrap: anywhere; }
.manage-actions-grid .manage-delete { grid-column: auto; }
.iks-notice-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(12, 24, 44, .58);
  backdrop-filter: blur(3px);
}
.iks-notice-card {
  width: min(100%, 440px); box-sizing: border-box;
  padding: 26px 24px 22px; border: 1px solid #d9e2ef;
  border-radius: 18px; background: #fff; color: #17233b;
  box-shadow: 0 24px 80px rgba(0,0,0,.24); text-align: center;
}
.iks-notice-icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  margin: 0 auto 12px; border-radius: 50%; font-size: 22px; font-weight: 800;
}
.iks-notice-icon.is-success { background: #e6f8ef; color: #137448; }
.iks-notice-icon.is-error { background: #fff0f0; color: #b4232d; }
.iks-notice-card h3 { margin: 0 0 10px; font-size: 18px; }
.iks-notice-message { margin: 0 0 20px; color: #53627a; white-space: pre-line; overflow-wrap: anywhere; }
.iks-notice-card .iks-notice-close { min-width: 130px; }
@media (max-width: 640px) {
  .manage-actions-grid { grid-template-columns: minmax(0, 1fr); }
}


/* IKS manage actions v3: compact two-column dialogs without horizontal scrolling. */
dialog.manage-dialog {
  width: min(680px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
dialog.manage-dialog .endpoint-dialog-inner {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
dialog.manage-dialog .manage-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  align-items: start !important;
}
dialog.manage-dialog .manage-actions-grid > *,
dialog.manage-dialog .manage-actions-grid > form,
dialog.manage-dialog .manage-actions-grid > button,
dialog.manage-dialog .manage-actions-grid .manage-action-form {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
dialog.manage-dialog .manage-actions-grid label,
dialog.manage-dialog .manage-actions-grid strong,
dialog.manage-dialog .manage-actions-grid p,
dialog.manage-dialog .manage-actions-grid small {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
dialog.manage-dialog .manage-actions-grid input,
dialog.manage-dialog .manage-actions-grid select,
dialog.manage-dialog .manage-actions-grid button {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
}
dialog.manage-dialog .manage-actions-grid .manage-delete {
  grid-column: auto !important;
  align-self: start !important;
}
.iks-notice-overlay { z-index: 2147483000 !important; }
@media (max-width: 620px) {
  dialog.manage-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
  dialog.manage-dialog .endpoint-dialog-inner { padding: 14px !important; }
  dialog.manage-dialog .manage-actions-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Footer global: versión solicitada */
footer{font-weight:700;color:#43536d;font-size:11px;text-align:center;padding:20px 0 5px;line-height:1.5}


/* Compact controls for the independent IKS client-IP audit section. */
.audit-client-ip-help{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;padding:11px 13px;font-size:12px;line-height:1.55}
.audit-client-ip-help strong{flex:0 0 auto}
.audit-client-ip-search{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.audit-client-ip-search input{flex:1;min-width:160px;max-width:520px}
.audit-client-ip-search-btn,.audit-client-ip-reset,.audit-client-ip-clear-btn{min-height:34px;padding:7px 12px;font-size:12px;white-space:nowrap}
.audit-client-ip-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.audit-client-ip-footer form{margin:0}
@media(max-width:640px){.audit-client-ip-help{display:block}.audit-client-ip-help strong{display:block;margin-bottom:3px}.audit-client-ip-search{flex-wrap:wrap}.audit-client-ip-search input{max-width:none;flex-basis:100%}.audit-client-ip-footer{align-items:flex-start;flex-direction:column}}

/* Compact independent controls for grouped IP activity */
.audit-group-help{margin:0 0 14px}
.audit-group-bulk-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:10px 12px;border:1px solid #e1e9f6;border-radius:10px;background:#fbfcff}
.audit-group-bulk-actions small{flex:1;min-width:220px}
.audit-group-clear-btn{padding:8px 12px;font-size:12px;white-space:nowrap}
@media(max-width:560px){.audit-group-bulk-actions{align-items:stretch}.audit-group-clear-btn{width:100%}}

/* Expandable details for client IKS IP audit rows */
.audit-client-ip-detail{position:relative;min-width:92px}
.audit-client-ip-detail>summary{display:inline-flex;align-items:center;gap:5px;cursor:pointer;list-style:none;color:var(--primary,#315efb);font-size:12px;font-weight:600;white-space:nowrap}
.audit-client-ip-detail>summary::-webkit-details-marker{display:none}
.audit-client-ip-detail>summary:after{content:"⌄";font-size:13px;transition:transform .15s ease}
.audit-client-ip-detail[open]>summary:after{transform:rotate(180deg)}
.audit-client-ip-detail-body{position:absolute;z-index:5;right:0;top:calc(100% + 7px);width:min(330px,78vw);padding:13px;display:grid;gap:9px;background:var(--surface,#fff);border:1px solid var(--border,#d8e2f2);border-radius:10px;box-shadow:0 10px 28px rgba(25,45,85,.14);white-space:normal}
.audit-client-ip-detail-body>div{display:flex;flex-direction:column;gap:3px}
.audit-client-ip-detail-body small{font-size:11px;color:var(--muted,#64748b)}
.audit-client-ip-detail-body strong{font-size:12px;font-weight:600;overflow-wrap:anywhere}
.audit-client-ip-detail-body p{font-size:11px;margin:2px 0 0;line-height:1.45}


/* IKS UI CENTERED TABLES v2 — CSS-only, based on active VPS CSS */
.accounts-table th,
.accounts-table td,
.credits-table th,
.credits-table td,
#client-results .clients-table th,
#client-results .clients-table td {
  text-align: center;
  vertical-align: middle;
}

/* Keep selection checkboxes and bulk-selection cells centered. */
.accounts-table td:has(> .bulk-panel-id),
.credits-table td:has(> .bulk-credit-id),
#client-results .clients-table td:has(> .bulk-client-id) {
  text-align: center;
  vertical-align: middle;
}

/* Align row actions consistently without changing action behavior. */
.accounts-table td:last-child,
.credits-table td:last-child,
#client-results .clients-table td:last-child {
  text-align: center;
  vertical-align: middle;
}
.accounts-table td:last-child > .account-actions{
  justify-content: center;
  align-items: center;
}

/* Let long notes/IDs wrap, but preserve username and credential rules already
   defined by the active stylesheet (including existing !important rules). */
.credits-table td:nth-child(6) {
  overflow-wrap: anywhere;
}

/* Responsive table cells: allow content to wrap on narrow screens. */
@media (max-width: 760px) {
  .accounts-table th,
  .accounts-table td,
  .credits-table th,
  .credits-table td,
  #client-results .clients-table th,
  #client-results .clients-table td {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* IKS FIX: compactar vencimiento y acciones de clientes */
#client-results .clients-table {
  table-layout: auto !important;
  min-width: 1120px !important;
}

#client-results .clients-table th:last-child,
#client-results .clients-table td:last-child {
  min-width: 145px !important;
  width: 145px !important;
  max-width: 170px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  text-align: center !important;
}

#client-results .clients-table td:nth-last-child(2) {
  min-width: 150px !important;
  padding-right: 8px !important;
}

@media (max-width: 760px) {
  #client-results .clients-table {
    min-width: 1000px !important;
  }

  #client-results .clients-table th:last-child,
  #client-results .clients-table td:last-child {
    min-width: 130px !important;
    width: 130px !important;
  }
}



/* IKS integrated UI v3: protocol column + live server health */
#client-results .clients-table { min-width: 1180px !important; table-layout: auto !important; }
#client-results .clients-table th:nth-last-child(3), #client-results .clients-table td:nth-last-child(3) { min-width: 150px !important; white-space: nowrap; }
#client-results .clients-table th:nth-last-child(2), #client-results .clients-table td:nth-last-child(2) { min-width: 115px !important; width: 135px; text-align: center !important; }
#client-results .clients-table th:last-child, #client-results .clients-table td:last-child { min-width: 125px !important; width: 135px !important; max-width: 155px !important; padding-left: 8px !important; padding-right: 8px !important; text-align: center !important; }
#client-results .clients-table .client-protocol-cell { text-align: center !important; white-space: nowrap; }
.client-protocol-pill { display:inline-flex; align-items:center; justify-content:center; max-width:160px; padding:5px 9px; border-radius:999px; background:#eef2ff; color:#3348a8; border:1px solid #dce4ff; font-size:11px; font-weight:700; overflow-wrap:anywhere; white-space:normal; }
.server-health-cell { min-width:135px; text-align:center !important; vertical-align:middle; }
.server-health-badge { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }
.server-health-badge i { display:inline-block; width:8px; height:8px; border-radius:50%; background:currentColor; flex:0 0 8px; }
.server-health-badge.is-connected { color:#087f5b; background:#e3f8ef; }
.server-health-badge.is-offline { color:#c92a2a; background:#fff0f0; }
.server-health-badge.is-unknown { color:#667085; background:#eef1f5; }
@media(max-width:760px){ #client-results .clients-table { min-width:1180px !important; } .server-health-cell { min-width:125px; } }

/* Ajuste visual compacto para acciones de endpoints y respaldos */
.bulk-delete-endpoints-form {
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
}

.bulk-delete-endpoints-form input {
    min-width: 0;
    padding: 8px 10px;
    font-size: 12px;
}

.bulk-delete-endpoints-form .dangerbtn {
    min-height: 36px;
    padding: 8px 13px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 700px) {
    .bulk-delete-endpoints-form {
        align-items: stretch;
    }

    .bulk-delete-endpoints-form label,
    .bulk-delete-endpoints-form input {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

.bulk-delete-form,.bulk-delete-all-form,.backup-delete-all-form{display:flex;align-items:center;gap:7px;margin:0}
.bulk-delete-form .dangerbtn,.bulk-delete-all-form .dangerbtn,.backup-delete-all-form .dangerbtn{min-height:32px;padding:7px 11px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap}
.dangerbtn-subtle{background:#fff!important;color:#c43d43!important;border:1px solid #f2c9cb!important;box-shadow:none!important}
.dangerbtn-subtle:hover{background:#fff5f5!important;border-color:#e9a7aa!important}
.bulk-delete-form button:disabled{opacity:.45;cursor:not-allowed}
.bulk-check-cell{width:82px;text-align:center}#select-visible-endpoints,#select-visible-backups{appearance:auto!important;-webkit-appearance:checkbox!important;display:inline-block!important;width:14px!important;min-width:14px!important;height:14px!important;min-height:14px!important;margin:0!important;padding:0!important;accent-color:#315eea;vertical-align:middle}
.backup-row-actions{display:flex;align-items:center;gap:10px;white-space:nowrap}
.backup-delete-one-form{display:inline-flex;align-items:center;gap:6px;margin:0}
.backup-delete-one-form input{width:76px;min-width:76px;padding:7px 8px;font-size:11px;border:1px solid var(--line);border-radius:7px}
.backup-delete-one-form .dangerbtn{min-height:30px;padding:6px 10px;border-radius:7px;font-size:11px}
@media(max-width:720px){.bulk-delete-form,.bulk-delete-all-form,.backup-delete-all-form{flex-wrap:wrap}.backup-row-actions{align-items:flex-start;flex-direction:column}}


/* Ajuste de coherencia visual: selección y borrado compacto */
.bulk-actions {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 12px; border:1px solid var(--border, #d9e3f5);
  border-radius:10px; background:#f7f9fd; margin:10px 0 12px;
}
.bulk-actions .bulk-select-all {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; margin:0;
}
.bulk-actions .bulk-hint { font-size:11px; color:#64748b; margin-right:auto; }
.bulk-actions input[type="checkbox"], .tablewrap input[type="checkbox"],
.endpoints-table input[type="checkbox"] {
  appearance:auto !important; width:14px !important; height:14px !important;
  min-width:14px !important; padding:0 !important; margin:0 2px 0 0 !important;
  border-radius:3px !important; box-shadow:none !important;
}
.bulk-actions button, .bulk-actions .dangerbtn, .backup-row-actions button,
.backup-delete-one-button {
  min-height:32px; padding:6px 11px; border-radius:7px;
  font-size:11px; line-height:1.2; font-weight:600;
}
.bulk-actions .bulk-delete-all-form, .bulk-actions .backup-delete-all-form,
.bulk-actions .bulk-delete-form {
  display:inline-flex; align-items:center; gap:6px; margin:0;
}
.bulk-actions .dangerbtn-subtle {
  background:#fff; color:#b91c1c; border:1px solid #fecaca; box-shadow:none;
}
.backup-row-actions { white-space:nowrap; }
.backup-row-actions .backup-delete-one-form {
  display:inline-flex; margin:0 0 0 6px; vertical-align:middle;
}
.backup-row-actions .textlink {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:30px; padding:5px 9px; border-radius:7px; font-size:11px;
}
.bulk-actions input:not([type="checkbox"]):not([type="hidden"]) { display:none !important; }




/* IKS: selección compacta y acciones coherentes; solo borrado seleccionado */
.bulk-actions{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 12px; border:1px solid #d9e3f5; border-radius:10px;
  background:#f7f9fd; margin:10px 0 12px;
}
.bulk-actions input[type="checkbox"], .bulk-check-cell input[type="checkbox"]{
  appearance:auto !important; -webkit-appearance:checkbox !important;
  width:14px !important; height:14px !important; min-width:14px !important;
  min-height:14px !important; max-width:14px !important; padding:0 !important;
  margin:0 5px 0 0 !important; border:initial !important; border-radius:3px !important;
  box-shadow:none !important; accent-color:#315efb; vertical-align:middle;
}
.bulk-actions button,
.bulk-delete-form button {
  min-height:30px !important; padding:6px 11px !important; border-radius:7px !important;
  font-size:11px !important; line-height:1.2 !important; font-weight:600 !important;
}
.bulk-delete-form {display:inline-flex; align-items:center; gap:6px; margin:0;}

/* IKS-SIDEBAR-DENSITY-V2 */
.sidebar .nav-dropdown-summary {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  min-height: 32px;
  gap: 7px;
}
.sidebar .nav-label {
  font-size: 11.5px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em;
}
.sidebar .nav-icon,
.sidebar .nav-chevron {
  flex-shrink: 0;
}
.sidebar .sidebottom {
  padding-top: 6px !important;
  padding-bottom: 7px !important;
  gap: 4px !important;
}
.sidebar .sidebottom small {
  font-size: 10px !important;
  line-height: 1.15 !important;
}
.sidebar .sidebottom .logout {
  min-height: 32px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 11.5px !important;
  line-height: 1.1 !important;
}


/* Proxy Nginx: compact certificate-removal option and tidy action row. */
.proxy-uninstall-form { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.proxy-uninstall-form .proxy-cert-option { display:inline-flex; align-items:center; gap:7px; width:auto; margin:0; padding:6px 9px; border:1px solid #e3e8f1; border-radius:8px; background:#f8faff; color:#59667a; font-size:11px; line-height:1.2; cursor:pointer; }
.proxy-uninstall-form .proxy-cert-option input[type="checkbox"] { appearance:auto!important; -webkit-appearance:checkbox!important; display:inline-block!important; flex:0 0 14px!important; width:14px!important; min-width:14px!important; max-width:14px!important; height:14px!important; min-height:14px!important; margin:0!important; padding:0!important; border:initial!important; border-radius:3px!important; box-shadow:none!important; accent-color:#315eea; }
.proxy-uninstall-form .dangerbtn { min-height:32px; padding:7px 12px; border-radius:8px; font-size:11px; font-weight:700; }
.proxy-uninstall-form .dangerbtn:hover { background:#fff5f5; border-color:#e9a7aa; }
@media(max-width:720px) { .proxy-uninstall-form { gap:7px; } }


/* IKS fix4: acciones compactas y centradas en Hosts gestionados de Nginx. */
.proxy-actions-cell {
  text-align: center !important;
  vertical-align: middle !important;
}
.proxy-actions-cell .proxy-uninstall-form {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
  margin: 0 auto !important;
  width: 100% !important;
}
.proxy-actions-cell .proxy-uninstall-form .proxy-cert-option {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-height: 27px !important;
  margin: 0 !important;
  padding: 4px 7px !important;
  border: 1px solid #e3e8f1 !important;
  border-radius: 7px !important;
  background: #f8faff !important;
  color: #59667a !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}
.proxy-actions-cell .proxy-uninstall-form .proxy-cert-option > input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  display: inline-block !important;
  position: static !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: initial !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  accent-color: #315eea !important;
  vertical-align: middle !important;
}
.proxy-actions-cell .proxy-uninstall-form .dangerbtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 5px 10px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
@media (max-width: 720px) {
  .proxy-actions-cell .proxy-uninstall-form { gap: 6px !important; }
}

/* Client password reset result: keep every item stacked and readable inside the manage card. */
dialog.manage-dialog .client-password-reset-form {
  min-width: 0 !important;
  overflow: hidden !important;
  align-items: stretch !important;
}
dialog.manage-dialog .client-password-reset-title {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  color: #176a4d !important;
}
dialog.manage-dialog .client-password-reset-label {
  display: block !important;
  margin-top: 3px !important;
  color: #65738a !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
dialog.manage-dialog .client-password-reset-copy {
  display: flex !important;
  width: 100% !important;
  min-height: 36px !important;
  justify-content: center !important;
  white-space: normal !important;
}
dialog.manage-dialog .client-password-reset-note {
  display: block !important;
  color: #65738a !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}


/* IKS Manage dialogs — unified card geometry for client and panel accounts (2026-10) */
dialog.manage-dialog .manage-actions-grid { grid-auto-rows:max-content !important; align-items:start !important; align-content:start !important; gap:10px !important; }
dialog.manage-dialog .manage-actions-grid > form,
dialog.manage-dialog .manage-actions-grid > button,
dialog.manage-dialog .manage-actions-grid > .manage-action-form { align-self:start !important; min-height:0 !important; height:auto !important; }
dialog.manage-dialog .manage-actions-grid .manage-action-form { display:flex !important; flex-direction:column !important; justify-content:flex-start !important; align-items:stretch !important; gap:8px !important; padding:12px !important; }
dialog.manage-dialog .manage-actions-grid .manage-action-form > strong { display:block !important; margin:0 !important; text-align:center !important; font-size:13px !important; line-height:1.35 !important; }
dialog.manage-dialog .manage-actions-grid .manage-action-form > small,
dialog.manage-dialog .manage-actions-grid .manage-action-form > .muted { display:block !important; margin:0 !important; text-align:center !important; font-size:11.5px !important; line-height:1.45 !important; white-space:normal !important; overflow-wrap:anywhere !important; }
dialog.manage-dialog .manage-actions-grid .manage-action-form > button,
dialog.manage-dialog .manage-actions-grid > button { min-height:38px !important; height:auto !important; padding:9px 12px !important; font-size:12.5px !important; line-height:1.3 !important; font-weight:650 !important; }
@media(max-width:620px){dialog.manage-dialog .manage-actions-grid{grid-template-columns:minmax(0,1fr) !important;}}


/* Sidebar account action: keep the password link white on the dark navigation. */
.sidebar .sidebottom a.nav-label,
.sidebar .sidebottom a.nav-label:link,
.sidebar .sidebottom a.nav-label:visited {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 0 !important;
  margin: 3px 0 5px !important;
  color: #f8fafc !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(248,250,252,.72);
  text-underline-offset: 3px;
  border-radius: 5px;
  background: transparent;
}
.sidebar .sidebottom a.nav-label:hover,
.sidebar .sidebottom a.nav-label:focus-visible {
  color: #ffffff !important;
  text-decoration-color: #ffffff;
  background: rgba(255,255,255,.07);
  outline: none;
}
.sidebar .sidebottom a.nav-label:focus-visible {
  box-shadow: 0 0 0 2px rgba(147,197,253,.65);
}


/* Shared layout for panel-account and client Manage dialogs. */
dialog.manage-dialog .manage-actions-grid {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-auto-rows:max-content !important;
  align-items:start !important;
  align-content:start !important;
  gap:8px !important;
}
dialog.manage-dialog .manage-actions-grid > form,
dialog.manage-dialog .manage-actions-grid > button {
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  align-self:start !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
dialog.manage-dialog .manage-actions-grid > button {
  min-height:38px !important;
  padding:9px 12px !important;
  line-height:1.25 !important;
}
dialog.manage-dialog .manage-actions-grid .manage-action-form {
  min-height:0 !important;
  height:auto !important;
  justify-content:flex-start !important;
  align-self:start !important;
}
dialog.manage-dialog .endpoint-dialog-head {
  justify-content:space-between !important;
  align-items:flex-start !important;
  text-align:left !important;
}
@media(max-width:620px) {
  dialog.manage-dialog .manage-actions-grid { grid-template-columns:minmax(0,1fr) !important; }
}

/* Brand link: blue underline accent; password action now lives in Configuration. */
.sidebar .brand-home .brand-copy strong {
  text-decoration-line: underline;
  text-decoration-color: #315cf5;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.sidebar .brand-home:hover .brand-copy strong,
.sidebar .brand-home:focus-visible .brand-copy strong {
  text-decoration-color: #6d8cff;
}


/* IKS theme selector: preserve the original light appearance and add a true black dark theme. */
.brand-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.theme-toggle{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #3b4960;border-radius:9px;background:transparent;color:#f8fafc;font-size:18px;cursor:pointer;flex-shrink:0}
.theme-toggle:hover{background:#1c2c46}
.brand{align-items:center}

/* Pie de sidebar: usuario/rol/versión en una sola línea, con más espacio debajo antes de cerrar sesión. */
.sidebottom .sidebottom-line{margin:7px 0 18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Tema oscuro: los números grandes de rendimiento (carga, RAM, almacenamiento, tiempo activo)
   usaban un navy pensado para tarjetas claras y casi no se veían sobre fondo negro. */
html[data-theme="dark"] .metric-value{color:#eef3ff !important}
html[data-theme="dark"] .metric-value small{color:#c3d1ea !important}
html[data-theme="dark"]{color-scheme:dark;--bg:#000000;--ink:#f2f4f8;--muted:#a1a1aa;--line:#292929;--white:#101010;--nav:#050505;--green:#39c58a}
html[data-theme="dark"] body{background:#000;color:#f2f4f8}
html[data-theme="dark"] .main{background:#000;color:#f2f4f8}
html[data-theme="dark"] .panel,html[data-theme="dark"] .stat,html[data-theme="dark"] .userpill{background:#101010!important;border-color:#292929!important;color:#f2f4f8!important;box-shadow:none!important}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] strong,html[data-theme="dark"] td,html[data-theme="dark"] label{color:#f2f4f8}
html[data-theme="dark"] .muted,html[data-theme="dark"] .tiny,html[data-theme="dark"] .eyebrow,html[data-theme="dark"] th,html[data-theme="dark"] .cellsub{color:#a1a1aa!important}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea,html[data-theme="dark"] .formgrid input,html[data-theme="dark"] .formgrid select{background:#171717!important;color:#f5f5f5!important;border-color:#383838!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#888!important}
html[data-theme="dark"] table th{border-color:#303030!important}
html[data-theme="dark"] table td{border-color:#242424!important;color:#d4d4d8!important}
html[data-theme="dark"] td strong{color:#fff!important}
html[data-theme="dark"] tbody tr:hover{background:#181818!important}
html[data-theme="dark"] code,html[data-theme="dark"] .tag,html[data-theme="dark"] .avatar{background:#222!important;color:#e5e7eb!important}
html[data-theme="dark"] .secondary,html[data-theme="dark"] .dangerbtn,html[data-theme="dark"] .secondary-link{background:#171717!important;color:#e5e7eb!important;border-color:#383838!important}html[data-theme="dark"] .endpoint-access[open] form{background:#111!important;border-color:#333!important;color:#eee!important}
html[data-theme="dark"] .alert.info,html[data-theme="dark"] .notice{background:#111827!important;border-color:#26364d!important;color:#dbeafe!important}
html[data-theme="dark"] footer{color:#777}
html[data-theme="dark"] .sidebar{background:#050505}
html[data-theme="dark"] .sidebar nav a.active{background:#202020}
html[data-theme="dark"] .theme-toggle{border-color:#444;background:#151515;color:#fff}


/* Panel-Proxy-4 — unified Dark Pro surfaces and readable tables. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:#080b12; --ink:#edf2fb; --muted:#9aa9bf; --line:#283244;
  --blue:#5685ff; --nav:#05070c; --white:#111722; --green:#39c58a;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .main { background:#080b12 !important; color:#edf2fb !important; }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .userpill {
  background:#111722 !important; color:#edf2fb !important;
  border:1px solid #283244 !important; box-shadow:none !important;
}
html[data-theme="dark"] .panel .panel,
html[data-theme="dark"] .panel .stat { background:#171e2b !important; }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] td,
html[data-theme="dark"] label { color:#edf2fb; }
html[data-theme="dark"] p,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .tiny,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .cellsub { color:#a9b9d4 !important; }
html[data-theme="dark"] .tablewrap,
html[data-theme="dark"] .connections-table-wrap,
html[data-theme="dark"] .table-panel,
html[data-theme="dark"] .table-container {
  background:#111722 !important; border-color:#283244 !important;
  border-radius:11px;
}
html[data-theme="dark"] table { background:#111722 !important; color:#dbe5f4 !important; }
html[data-theme="dark"] table thead,
html[data-theme="dark"] table thead tr,
html[data-theme="dark"] table th {
  background:#1b2637 !important; color:#aebed5 !important;
  border-color:#303d51 !important;
}
html[data-theme="dark"] table td {
  background:transparent !important; color:#d2dced !important;
  border-color:#273246 !important;
}
html[data-theme="dark"] table tbody tr:nth-child(even) { background:#151e2c !important; }
html[data-theme="dark"] table tbody tr:nth-child(odd) { background:#111722 !important; }
html[data-theme="dark"] table tbody tr:hover { background:#202d40 !important; }
html[data-theme="dark"] td strong { color:#f7f9fc !important; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .formgrid input,
html[data-theme="dark"] .formgrid select {
  background:#171e2b !important; color:#edf2fb !important; border-color:#35445b !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#8393aa !important; }
html[data-theme="dark"] code,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .connections-summary span {
  background:#202c3e !important; color:#dce7f7 !important;
}
html[data-theme="dark"] .notice,
html[data-theme="dark"] .alert.info,
html[data-theme="dark"] .demo-info,
html[data-theme="dark"] .empty {
  background:#142239 !important; border-color:#294b7a !important; color:#c7d8f1 !important;
}
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .dangerbtn,
html[data-theme="dark"] .secondary-link,
html[data-theme="dark"] .pagination-links a {
  background:#1a2433 !important; color:#dbe6f5 !important; border-color:#35445b !important;
}
html[data-theme="dark"] dialog,
html[data-theme="dark"] .manage-dialog,
html[data-theme="dark"] .credit-manage-dialog,
html[data-theme="dark"] .connections-dialog {
  color:#edf2fb !important; background:#111722 !important; border-color:#35445b !important;
}
html[data-theme="dark"] dialog form,
html[data-theme="dark"] dialog .formgrid,
html[data-theme="dark"] .credit-manage-menu[open] form,
html[data-theme="dark"] .credit-manage-menu[open] .formgrid {
  background:#171e2b !important; color:#edf2fb !important; border-color:#35445b !important;
}
html[data-theme="dark"] dialog p,
html[data-theme="dark"] dialog label { color:#c2cee0 !important; }
html[data-theme="dark"] .workflow-navigation,
html[data-theme="dark"] .event,
html[data-theme="dark"] .connections-dialog-head { border-color:#283244 !important; }
html[data-theme="dark"] .eventicon { background:#202d43 !important; color:#8eb0ff !important; }
html[data-theme="dark"] footer { color:#78879c !important; border-top:1px solid #202a39; margin-top:28px; padding:20px 0 8px; }
html[data-theme="dark"] .pagination-controls { color:#a9b9d4 !important; border-top:1px solid #283244; margin-top:10px; }
html[data-theme="dark"] .pagination-links a,
html[data-theme="dark"] .pagination-links .current {
  display:inline-flex; align-items:center; justify-content:center; min-width:32px;
  padding:7px 10px; border:1px solid #35445b; border-radius:8px;
  text-decoration:none; font-weight:700;
}
html[data-theme="dark"] .pagination-links .current { background:#315eea !important; color:#fff !important; border-color:#5685ff !important; }
html[data-theme="dark"] .pagination-links a:hover { background:#263750 !important; }
html[data-theme="dark"] .page-size-form { margin:0; }
html[data-theme="dark"] .page-size-form label { color:#c6d3e6 !important; }
html[data-theme="dark"] .bulk-actions { background:#151e2c !important; border-color:#283244 !important; }
html[data-theme="dark"] .connections-table th { background:#1b2637 !important; color:#aebed5 !important; }
html[data-theme="dark"] .connections-table td { border-color:#273246 !important; color:#d2dced !important; }
html[data-theme="dark"] .connection-usage-bar { background:#344258 !important; }
@media(max-width:700px) {
  .pagination-controls { align-items:flex-start; }
  .movement-pagination { flex-direction:column; }
  .movement-pagination .page-size-form { width:100%; }
  .movement-pagination .page-size-form label { justify-content:space-between; width:100%; }
  .movement-pagination .pagination-links { flex-wrap:wrap; }
}

/* Shared pagination component, used consistently across all paged tables. */
.pagination-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 2px 4px;font-size:12px;color:var(--muted,#64748b)}
.pagination-controls label,.page-size-form label{display:flex;align-items:center;gap:8px}
.page-size-form select{width:auto;min-width:72px}
.pagination-links{display:flex;gap:6px;align-items:center}
.pagination-links a,.pagination-links .current{display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:7px 10px;border:1px solid var(--line,#dbe3ef);border-radius:8px;text-decoration:none;font-weight:650;color:var(--ink,#172235)}
.pagination-links .current{background:var(--blue,#315eea);border-color:var(--blue,#315eea);color:#fff}
.page-size-form{display:flex;align-items:center;margin:0;font-size:12px}

/* Catch legacy inline light surfaces inside individual modules in dark mode. */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"] {
  background:#171e2b !important; color:#edf2fb !important; border-color:#35445b !important;
}

/* Panel-Proxy-4 Dark Pro — remove white hover/selected/control surfaces. */
html[data-theme="dark"] .filter-tabs,
html[data-theme="dark"] .client-filters,
html[data-theme="dark"] .account-filters,
html[data-theme="dark"] .credits-filters,
html[data-theme="dark"] .bulk-actions,
html[data-theme="dark"] .formgrid,
html[data-theme="dark"] .search-panel,
html[data-theme="dark"] .filter-panel {
  background:#111722 !important;
  color:#edf2fb !important;
  border-color:#283244 !important;
}
html[data-theme="dark"] .filter-tabs a,
html[data-theme="dark"] .filter-tabs a.selected,
html[data-theme="dark"] .filter-tabs a:hover,
html[data-theme="dark"] button:not(.primary),
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .dangerbtn,
html[data-theme="dark"] .secondary-link,
html[data-theme="dark"] .endpoint-access>summary,
html[data-theme="dark"] .account-actions summary,
html[data-theme="dark"] .pagination-links a,
html[data-theme="dark"] .page-size-form select {
  background:#1a2433 !important;
  color:#e5edf9 !important;
  border-color:#35445b !important;
  box-shadow:none !important;
}
html[data-theme="dark"] button:not(.primary):hover,
html[data-theme="dark"] .filter-tabs a:hover,
html[data-theme="dark"] .secondary:hover,
html[data-theme="dark"] .dangerbtn:hover,
html[data-theme="dark"] .secondary-link:hover,
html[data-theme="dark"] .pagination-links a:hover,
html[data-theme="dark"] .endpoint-access>summary:hover {
  background:#263750 !important;
  color:#ffffff !important;
  border-color:#5685ff !important;
  transform:scale(1.025);
  transition:transform .14s ease,background-color .14s ease,border-color .14s ease;
}
html[data-theme="dark"] .primary { background:#315eea !important; color:#fff !important; border-color:#5685ff !important; }
html[data-theme="dark"] .primary:hover { background:#416ff5 !important; transform:scale(1.025); }
html[data-theme="dark"] .filter-tabs a.selected,
html[data-theme="dark"] .filter-tabs a[aria-current="page"] {
  background:#202f49 !important; color:#ffffff !important; border-color:#5685ff !important;
  box-shadow:inset 0 -2px 0 #5685ff !important;
}
html[data-theme="dark"] .tablewrap tbody tr,
html[data-theme="dark"] .tablewrap tbody tr:nth-child(odd),
html[data-theme="dark"] .tablewrap tbody tr:nth-child(even),
html[data-theme="dark"] .tablewrap tbody tr:hover,
html[data-theme="dark"] .tablewrap tbody tr:focus,
html[data-theme="dark"] .tablewrap tbody tr:focus-within,
html[data-theme="dark"] .tablewrap tbody tr.search-result-focus {
  background:#111722 !important;
}
html[data-theme="dark"] .tablewrap tbody tr:hover > td,
html[data-theme="dark"] .tablewrap tbody tr:focus-within > td,
html[data-theme="dark"] .tablewrap tbody tr.search-result-focus > td {
  background:#1a2638 !important; color:#edf2fb !important;
}
html[data-theme="dark"] .tablewrap tbody tr.search-result-focus > td:first-child {
  box-shadow:inset 3px 0 0 #5685ff !important;
}
/* Bug real: #client-results tbody tr.search-result-focus > td (arriba, con ID)
   tiene mas especificidad CSS que la regla .tablewrap de aqui arriba, asi que
   SIEMPRE ganaba ella aunque esta tuviera !important -- la fila resaltada por
   la busqueda individual de clientes se veia con fondo claro aunque el panel
   estuviera en tema oscuro. Se agrega la MISMA regla pero con el ID, para que
   gane con la misma especificidad que la version clara. */
html[data-theme="dark"] #client-results tbody tr.search-result-focus > td {
  background:#1a2638 !important;
  box-shadow: inset 0 1px 0 #35465f, inset 0 -1px 0 #35465f;
}
html[data-theme="dark"] #client-results tbody tr.search-result-focus > td:first-child {
  box-shadow: inset 4px 0 0 #5685ff, inset 0 1px 0 #35465f, inset 0 -1px 0 #35465f;
}
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] { accent-color:#5685ff; }
html[data-theme="dark"] select option { background:#171e2b !important; color:#edf2fb !important; }
html[data-theme="dark"] .account-filters label,
html[data-theme="dark"] .client-filters label,
html[data-theme="dark"] .filter-tabs a { color:#cbd7e8 !important; }
html[data-theme="dark"] .pagination-links .current { background:#315eea !important; color:#fff !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] button,html[data-theme="dark"] a { transition:none !important; }
}

/* Seguridad 2FA: controles compactos y alineados con el resto del panel */
.twofa-policy-options{display:grid;gap:12px;margin:14px 0 16px;max-width:620px}
.twofa-policy-option{display:flex!important;align-items:center;gap:10px!important;width:100%;font-size:12px!important;line-height:1.4;color:var(--ink);cursor:pointer}
.twofa-policy-option input[type="checkbox"]{appearance:auto!important;-webkit-appearance:checkbox!important;flex:0 0 16px!important;width:16px!important;min-width:16px!important;max-width:16px!important;height:16px!important;min-height:16px!important;margin:0!important;padding:0!important;accent-color:#315eea;cursor:pointer}
.btn-compact{min-height:32px!important;padding:7px 12px!important;font-size:11px!important;line-height:1.2!important;border-radius:8px!important}
html[data-theme="dark"] .twofa-policy-option{color:#e5edf9!important}
html[data-theme="dark"] .twofa-policy-option input[type="checkbox"]{accent-color:#5685ff}


/* Dark Pro consistency: client creation and account workflows must never flash light surfaces. */
html[data-theme="dark"] .create-client-panel,
html[data-theme="dark"] .create-client-panel .client-create-form,
html[data-theme="dark"] .create-client-panel .client-create-form label,
html[data-theme="dark"] .create-client-panel .client-create-form .field-name,
html[data-theme="dark"] .create-client-panel .client-create-form .form-row,
html[data-theme="dark"] .create-client-panel .client-create-form fieldset {
  background-color:#111722 !important; color:#edf2fb !important; border-color:#283244 !important;
}
html[data-theme="dark"] .create-client-panel .client-create-form input:not([type="hidden"]),
html[data-theme="dark"] .create-client-panel .client-create-form select,
html[data-theme="dark"] .create-client-panel .client-create-form textarea,
html[data-theme="dark"] .client-filters input,
html[data-theme="dark"] .client-filters select,
html[data-theme="dark"] #client-results input:not([type="checkbox"]),
html[data-theme="dark"] #client-results select {
  background:#171e2b !important; color:#edf2fb !important; border:1px solid #35445b !important;
  box-shadow:none; color-scheme:dark;
}
html[data-theme="dark"] .create-client-panel .client-create-form input:focus,
html[data-theme="dark"] .create-client-panel .client-create-form select:focus,
html[data-theme="dark"] .create-client-panel .client-create-form textarea:focus,
html[data-theme="dark"] .client-filters input:focus,
html[data-theme="dark"] .client-filters select:focus {
  background:#1a2638 !important; border-color:#5685ff !important; outline:0; box-shadow:0 0 0 2px #5685ff35 !important;
}
html[data-theme="dark"] .create-client-panel .client-create-form button:not(.primary),
html[data-theme="dark"] .create-client-panel .client-create-form .secondary,
html[data-theme="dark"] .client-filters button:not(.primary),
html[data-theme="dark"] .filter-tabs a {
  background:#1a2433 !important; color:#dbe6f5 !important; border-color:#35445b !important;
}
html[data-theme="dark"] .create-client-panel .client-create-form button:hover,
html[data-theme="dark"] .client-filters button:hover,
html[data-theme="dark"] .filter-tabs a:hover {
  background:#24344d !important; color:#fff !important; border-color:#5685ff !important; transform:scale(1.015);
}
html[data-theme="dark"] .filter-tabs a.selected,
html[data-theme="dark"] .filter-tabs a[aria-current="page"] {
  background:#202f49 !important; color:#fff !important; border:1px solid #5685ff !important;
}
html[data-theme="dark"] .client-filters,
html[data-theme="dark"] .client-create-form,
html[data-theme="dark"] .client-create-form > *,
html[data-theme="dark"] .client-filters > * {
  color:#edf2fb !important;
}
html[data-theme="dark"] .client-create-form .alert.warning,
html[data-theme="dark"] .client-create-form .demo-permission-note {
  background:#2b2418 !important; color:#f4d9a4 !important; border-color:#66502a !important;
}
/* Keep the active navigation group visible after following links within it. */
.sidebar .nav-dropdown[open] > .nav-dropdown-summary { background:#243653; color:#fff; }
.sidebar .nav-dropdown .nav-submenu a.active { background:#202d40; color:#fff; border-left:3px solid #5685ff; }


/* PANEL-PROXY-4 DARK PRO CONSOLIDATION — global dark surfaces, forms and controls. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:#080b12; --surface:#111722; --surface-soft:#171e2b;
  --line:#283244; --ink:#edf2fb; --muted:#a9b9d4; --blue:#315eea;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .main,
html[data-theme="dark"] .shell { background:#080b12 !important; color:#edf2fb !important; }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .create-client-panel,
html[data-theme="dark"] .tablewrap,
html[data-theme="dark"] .table-panel,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .audit-ip-group,
html[data-theme="dark"] .endpoint-access[open] form,
html[data-theme="dark"] .account-actions[open] form,
html[data-theme="dark"] .manage-dialog,
html[data-theme="dark"] .credit-manage-dialog,
html[data-theme="dark"] dialog,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .dropdown-menu {
  background:#111722 !important; color:#edf2fb !important; border-color:#283244 !important;
}
html[data-theme="dark"] form,
html[data-theme="dark"] fieldset,
html[data-theme="dark"] .client-create-form,
html[data-theme="dark"] .client-filters,
html[data-theme="dark"] .account-filters,
html[data-theme="dark"] .formgrid,
html[data-theme="dark"] .search-panel,
html[data-theme="dark"] .filter-panel,
html[data-theme="dark"] .bulk-actions {
  background-color:#111722 !important; color:#edf2fb !important; border-color:#283244 !important;
}
html[data-theme="dark"] label,
html[data-theme="dark"] legend,
html[data-theme="dark"] .sectionhead,
html[data-theme="dark"] .sectionhead p,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .cellsub,
html[data-theme="dark"] small { color:#a9b9d4; }
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .formgrid input,
html[data-theme="dark"] .formgrid select,
html[data-theme="dark"] .formgrid textarea {
  background:#171e2b !important; color:#edf2fb !important;
  border:1px solid #35445b !important; color-scheme:dark;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#8393aa !important; opacity:1; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  background:#1a2638 !important; border-color:#5685ff !important;
  outline:0; box-shadow:0 0 0 2px #5685ff35 !important;
}
html[data-theme="dark"] select option { background:#171e2b !important; color:#edf2fb !important; }
html[data-theme="dark"] button:not(.primary),
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .dangerbtn,
html[data-theme="dark"] .secondary-link,
html[data-theme="dark"] .context-back,
html[data-theme="dark"] .endpoint-access>summary,
html[data-theme="dark"] .account-actions details>summary,
html[data-theme="dark"] .backup-disable-btn {
  background:#1a2433 !important; color:#e5edf9 !important; border-color:#35445b !important;
  box-shadow:none !important;
}
html[data-theme="dark"] button:not(.primary):hover,
html[data-theme="dark"] .secondary:hover,
html[data-theme="dark"] .dangerbtn:hover,
html[data-theme="dark"] .secondary-link:hover,
html[data-theme="dark"] .context-back:hover,
html[data-theme="dark"] .endpoint-access>summary:hover {
  background:#263750 !important; color:#fff !important; border-color:#5685ff !important;
  transform:scale(1.02); transition:transform .14s ease,background-color .14s ease,border-color .14s ease;
}
html[data-theme="dark"] .primary { background:#315eea !important; color:#fff !important; border-color:#5685ff !important; }
html[data-theme="dark"] .primary:hover { background:#416ff5 !important; transform:scale(1.02); }
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] { accent-color:#5685ff !important; color-scheme:dark; }
html[data-theme="dark"] .alert.warning,
html[data-theme="dark"] .alert.info,
html[data-theme="dark"] .alert.success,
html[data-theme="dark"] .alert.danger,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .demo-info,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .demo-permission-note {
  background:#192437 !important; color:#dce8fa !important; border-color:#354b6b !important;
}
html[data-theme="dark"] .alert.warning,
html[data-theme="dark"] .demo-permission-note { background:#2b2418 !important; color:#f4d9a4 !important; border-color:#66502a !important; }
html[data-theme="dark"] .alert.success { background:#142b25 !important; color:#b9ead7 !important; border-color:#285844 !important; }
html[data-theme="dark"] .alert.danger { background:#301d24 !important; color:#ffd5d9 !important; border-color:#69404a !important; }
html[data-theme="dark"] .tablewrap,
html[data-theme="dark"] .tablewrap table,
html[data-theme="dark"] table { background:#111722 !important; color:#dbe5f4 !important; }
html[data-theme="dark"] table th { background:#1b2637 !important; color:#aebed5 !important; border-color:#283244 !important; }
html[data-theme="dark"] table td { background:#111722 !important; color:#d2dced !important; border-color:#273246 !important; }
html[data-theme="dark"] table tbody tr:nth-child(even) td { background:#151e2c !important; }
html[data-theme="dark"] table tbody tr:hover td,
html[data-theme="dark"] table tbody tr:focus-within td { background:#202d40 !important; color:#edf2fb !important; }
html[data-theme="dark"] .filter-tabs a,
html[data-theme="dark"] .filter-tabs a.selected,
html[data-theme="dark"] .filter-tabs a[aria-current="page"] {
  background:#1a2433 !important; color:#dbe6f5 !important; border-color:#35445b !important;
}
html[data-theme="dark"] .filter-tabs a.selected,
html[data-theme="dark"] .filter-tabs a[aria-current="page"] {
  background:#202f49 !important; color:#fff !important; border-color:#5685ff !important;
}
html[data-theme="dark"] .sidebar .nav-dropdown:has(.nav-submenu a.active) > .nav-dropdown-summary {
  background:#243653 !important; color:#fff !important;
}
html[data-theme="dark"] footer { background:transparent !important; color:#78879c !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] button, html[data-theme="dark"] a { transition:none !important; }
}


/* FINAL DARK PRO PASS: eliminate light surfaces across every module.
   QR canvases retain a white quiet-zone only where QR scanning requires it. */
html[data-theme="dark"] .userpill,
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .connections-summary span,
html[data-theme="dark"] .connection-usage.over-limit,
html[data-theme="dark"] .connections-table th,
html[data-theme="dark"] .created-account-card,
html[data-theme="dark"] .created-account-code,
html[data-theme="dark"] .created-account-copy,
html[data-theme="dark"] .panel-created-card,
html[data-theme="dark"] .panel-created-code,
html[data-theme="dark"] .panel-created-copy,
html[data-theme="dark"] .alert-stats .alert-stat,
html[data-theme="dark"] .credits-table .credit-manage-menu[open] .formgrid,
html[data-theme="dark"] .performance-metric,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .about-metrics,
html[data-theme="dark"] .permission-card,
html[data-theme="dark"] .permissions-box,
html[data-theme="dark"] .backup-status,
html[data-theme="dark"] .backup-manual,
html[data-theme="dark"] .audit-clear-row,
html[data-theme="dark"] .firewall-output,
html[data-theme="dark"] pre,
html[data-theme="dark"] code:not(.inline-code) {
  background:#111722 !important;
  color:#dbe6f5 !important;
  border-color:#283244 !important;
  box-shadow:none !important;
}
html[data-theme="dark"] .created-account-code,
html[data-theme="dark"] .panel-created-code,
html[data-theme="dark"] pre,
html[data-theme="dark"] code:not(.inline-code) {
  background:#171e2b !important;
  color:#dbe6f5 !important;
}
html[data-theme="dark"] .created-account-copy,
html[data-theme="dark"] .panel-created-copy {
  background:#1a2b49 !important;
  color:#dce8ff !important;
  border-color:#4569b5 !important;
}
html[data-theme="dark"] .alert,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .help-box,
html[data-theme="dark"] .metric-note,
html[data-theme="dark"] .explain-box,
html[data-theme="dark"] .status-box,
html[data-theme="dark"] .backup-row,
html[data-theme="dark"] .backup-schedule,
html[data-theme="dark"] .permission-box,
html[data-theme="dark"] .permissions-box *,
html[data-theme="dark"] .backup-status *,
html[data-theme="dark"] .backup-manual * {
  background-color:transparent;
  color:#dbe6f5;
}
html[data-theme="dark"] .alert,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .help-box,
html[data-theme="dark"] .metric-note,
html[data-theme="dark"] .explain-box,
html[data-theme="dark"] .status-box,
html[data-theme="dark"] .backup-row,
html[data-theme="dark"] .backup-schedule,
html[data-theme="dark"] .permission-box {
  background:#192437 !important;
  border-color:#354b6b !important;
}
html[data-theme="dark"] .permissions-box,
html[data-theme="dark"] .permissions-box label,
html[data-theme="dark"] .permissions-box p,
html[data-theme="dark"] .backup-status,
html[data-theme="dark"] .backup-status *,
html[data-theme="dark"] .backup-manual,
html[data-theme="dark"] .backup-manual *,
html[data-theme="dark"] .audit-clear-row,
html[data-theme="dark"] .audit-clear-row * {
  color:#dbe6f5 !important;
}
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#f8"],
html[data-theme="dark"] [style*="background: #f8"],
html[data-theme="dark"] [style*="background:#f1"],
html[data-theme="dark"] [style*="background: #f1"],
html[data-theme="dark"] [style*="background:#eef"],
html[data-theme="dark"] [style*="background: #eef"] {
  background:#111722 !important;
  color:#dbe6f5 !important;
  border-color:#283244 !important;
  box-shadow:none !important;
}
/* Keep the fixed sidebar stable; only its navigation list scrolls when needed. */
.sidebar { overflow:hidden; }
.sidebar > nav {
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#35445b transparent;
  padding-right:3px;
}
.sidebar > nav::-webkit-scrollbar { width:6px; }
.sidebar > nav::-webkit-scrollbar-thumb { background:#35445b; border-radius:8px; }
.sidebar .sidebottom { flex:0 0 auto; }
html[data-theme="dark"] .sidebar { background:#05070b !important; }
html[data-theme="dark"] .sidebar .nav-dropdown-summary,
html[data-theme="dark"] .sidebar .nav-submenu a { color:#a9b9d4; }
html[data-theme="dark"] .sidebar .nav-dropdown[open] > .nav-dropdown-summary {
  background:#243653 !important; color:#fff !important;
}
html[data-theme="dark"] .sidebar .nav-submenu a.active {
  background:#202d40 !important; color:#fff !important;
  border-left:3px solid #5685ff !important;
}


/* Panel-Proxy-4 FINAL FIX: dark-mode contrast for backup controls and audit IP cards. */
html[data-theme="dark"] .backup-control-row,
html[data-theme="dark"] .backup-current-state,
html[data-theme="dark"] .backup-schedule-meta,
html[data-theme="dark"] .audit-ip-group,
html[data-theme="dark"] .audit-ip-group > summary,
html[data-theme="dark"] .audit-ip-search-form,
html[data-theme="dark"] .audit-clear-search,
html[data-theme="dark"] .audit-ip-group[open] {
  background:#111722 !important;
  color:#e7edf7 !important;
  border-color:#35445b !important;
  box-shadow:none !important;
}
html[data-theme="dark"] .backup-control-row > *,
html[data-theme="dark"] .backup-control-row strong,
html[data-theme="dark"] .backup-control-row small,
html[data-theme="dark"] .backup-control-row p,
html[data-theme="dark"] .backup-control-row span,
html[data-theme="dark"] .backup-schedule-meta strong,
html[data-theme="dark"] .backup-schedule-meta small,
html[data-theme="dark"] .backup-meta-label,
html[data-theme="dark"] .audit-ip-group > summary *,
html[data-theme="dark"] .audit-ip-search-form label,
html[data-theme="dark"] .audit-ip-search-row,
html[data-theme="dark"] .audit-clear-search {
  color:#dbe6f5 !important;
}
html[data-theme="dark"] .backup-current-state.is-on {
  background:#172945 !important;
  border-color:#36588b !important;
}
html[data-theme="dark"] .backup-current-state.is-off {
  background:#202a38 !important;
  border-color:#465366 !important;
}
html[data-theme="dark"] .backup-current-state small b,
html[data-theme="dark"] .backup-current-state.is-on small b {
  color:#8db5ff !important;
}
html[data-theme="dark"] .backup-schedule-meta { border-left-color:#35445b !important; }
html[data-theme="dark"] .backup-state-on {
  background:#172d4d !important; color:#a9c7ff !important; border-color:#36588b !important;
}
html[data-theme="dark"] .audit-ip-main strong { color:#a9c5ff !important; }
html[data-theme="dark"] .audit-ip-main small,
html[data-theme="dark"] .audit-ip-time small { color:#a9b9d4 !important; }
html[data-theme="dark"] .audit-ip-time strong,
html[data-theme="dark"] .audit-ip-country { color:#dbe6f5 !important; }
html[data-theme="dark"] .audit-ip-group > summary:hover { background:#1a2638 !important; }
html[data-theme="dark"] .audit-events-table { border-color:#35445b !important; }
html[data-theme="dark"] .audit-ip-search-form input,
html[data-theme="dark"] .audit-ip-search-row input { background:#171e2b !important; color:#edf2fb !important; border-color:#35445b !important; }
html[data-theme="dark"] .backup-disable-btn { background:#202a38 !important; color:#edf2fb !important; border-color:#465366 !important; }

/* Keep sidebar scroll position stable across page navigation; active item stays highlighted. */
.sidebar, .sidebar nav { overscroll-behavior:contain; }
.sidebar nav { scroll-behavior:auto !important; }
.sidebar nav a.active, .sidebar .nav-submenu a.active {
  position:relative;
  background:#243653 !important;
  color:#fff !important;
  box-shadow:inset 3px 0 0 #5685ff !important;
  outline:none;
}
html[data-theme="dark"] .sidebar nav a.active,
html[data-theme="dark"] .sidebar .nav-submenu a.active {
  background:#243653 !important; color:#fff !important;
}


/* Panel-Proxy-4: dark-mode contrast for the performance explanation card. */
html[data-theme="dark"] .performance-note {
  background:#111722 !important;
  color:#c5d2e5 !important;
  border-color:#35445b !important;
  box-shadow:none !important;
}
html[data-theme="dark"] .performance-note strong {
  color:#edf3fc !important;
}
html[data-theme="dark"] .performance-note p {
  color:#c5d2e5 !important;
}
html[data-theme="dark"] .performance-note .note-icon {
  background:#1d3154 !important;
  color:#8db5ff !important;
}


/* Panel-Proxy-4: dark-theme contrast fixes for remaining light information rows. */
html[data-theme="dark"] .fslb-endpoint-note,
html[data-theme="dark"] .audit-group-bulk-actions {
  background:#111a28 !important;
  color:#dbe6f5 !important;
  border-color:#35445b !important;
  box-shadow:none !important;
}
html[data-theme="dark"] .fslb-endpoint-note strong,
html[data-theme="dark"] .fslb-endpoint-note div,
html[data-theme="dark"] .fslb-endpoint-note span,
html[data-theme="dark"] .audit-group-bulk-actions small {
  color:#c6d4e8 !important;
}
html[data-theme="dark"] .fslb-endpoint-note code {
  background:#202d40 !important;
  color:#edf3ff !important;
  border-color:#435675 !important;
}
html[data-theme="dark"] .audit-group-bulk-actions .audit-group-clear-btn {
  color:#edf2fb !important;
}

/* MySQL legacy integration: compact save action and full-width expandable access. */
.legacy-save-btn{width:auto!important;min-width:0!important;min-height:36px!important;padding:8px 15px!important;justify-self:start;align-self:flex-start}
.legacy-access{width:100%;border:1px solid var(--line,#dbe3ef);border-radius:10px;overflow:hidden;background:var(--surface,#fff)}
.legacy-access>summary{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 15px;cursor:pointer;list-style:none;font-weight:750;color:var(--ink,#172235)}
.legacy-access>summary::-webkit-details-marker{display:none}
.legacy-access>summary:after{content:'⌄';font-size:18px;line-height:1;transition:transform .15s ease}
.legacy-access[open]>summary:after{transform:rotate(180deg)}
.legacy-access-hint{margin-left:auto;color:var(--muted,#667085);font-size:11px;font-weight:600}
.legacy-access-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:0 12px 12px}
.legacy-access-links a,.legacy-all-access{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 12px;border:1px solid var(--line,#dbe3ef);border-radius:8px;text-decoration:none;font-size:12px;font-weight:700;color:var(--ink,#172235);background:var(--surface-muted,#f7f9fc)}
.legacy-access-links a:hover,.legacy-all-access:hover{border-color:#5685ff;background:var(--surface,#fff)}
.legacy-all-access{width:100%;justify-content:space-between;min-height:48px}
.legacy-query-btn{width:auto!important;min-width:110px;align-self:end}
.legacy-result-panel{margin-top:16px;scroll-margin-top:20px}
.legacy-pagination-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}
.legacy-pagination-row .pagination-links{flex-wrap:wrap;gap:5px}
.legacy-pagination-row .pagination-links a,.legacy-pagination-row .pagination-links .current{min-width:34px;min-height:34px;padding:6px 9px}
.legacy-page-ellipsis{padding:5px;color:var(--muted,#667085)}
html[data-theme="dark"] .legacy-access{background:#111722;border-color:#35445b}
html[data-theme="dark"] .legacy-access>summary{color:#edf3fc}
html[data-theme="dark"] .legacy-access-links a,html[data-theme="dark"] .legacy-all-access{background:#1a2638;color:#dbe6f5;border-color:#35445b}
html[data-theme="dark"] .legacy-access-links a:hover,html[data-theme="dark"] .legacy-all-access:hover{background:#243653;border-color:#5685ff}
@media(max-width:650px){.legacy-access-links{grid-template-columns:1fr}.legacy-pagination-row{align-items:flex-start;flex-direction:column}.legacy-query-btn{width:100%!important}}


/* MySQL server cards: compact collapsed headers and consistent controls */
.legacy-server-accordion{padding:0!important;overflow:hidden;min-width:0}
.legacy-server-summary{display:flex;align-items:center;gap:12px;min-height:62px;padding:14px 18px;cursor:pointer;list-style:none}
.legacy-server-summary::-webkit-details-marker{display:none}
.legacy-server-summary:after{content:'⌄';margin-left:auto;font-size:19px;color:var(--muted,#8794a8);transition:transform .15s ease}
.legacy-server-accordion[open]>.legacy-server-summary:after{transform:rotate(180deg)}
.legacy-server-title{font-size:16px;font-weight:800;color:var(--ink,#172235)}
.legacy-server-caption{font-size:12px;color:var(--muted,#667085)}
.legacy-server-content{padding:0 18px 18px;border-top:1px solid var(--line,#dbe3ef);padding-top:16px}
.legacy-server-content .legacy-save-btn{display:inline-flex!important;width:max-content!important;min-width:0!important;max-width:220px!important;min-height:36px!important;padding:8px 16px!important;justify-self:start!important;align-self:flex-start!important}
.legacy-server-content .checkline{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important}
.legacy-server-content .checkline input[type=checkbox]{width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;margin:0!important;flex:0 0 16px!important;accent-color:#3563eb}
html[data-theme="dark"] .legacy-server-summary{color:#edf3fc}
html[data-theme="dark"] .legacy-server-title{color:#edf3fc}
@media(max-width:650px){.legacy-server-summary{flex-wrap:wrap}.legacy-server-caption{width:100%;padding-left:1px}.legacy-server-content{padding-left:12px;padding-right:12px}}

/* MySQL sources: compact server-name accordion and consistent bottom pagination. */
.legacy-server-summary{min-height:54px!important;padding:12px 18px!important}
.legacy-server-title{font-size:15px!important;font-weight:800!important}
.legacy-server-summary:after{margin-left:auto}
.legacy-server-caption{display:none!important}
.legacy-server-content small.muted{display:block;margin-top:5px;font-size:11px}
.legacy-server-content .legacy-save-btn{display:inline-flex!important;width:auto!important;min-width:0!important;max-width:190px!important;min-height:34px!important;padding:7px 13px!important;justify-self:start!important;align-self:flex-start!important}
.legacy-pagination-tools{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap}
.legacy-page-size-inline{margin:0}
.legacy-page-size-inline label{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:650}
.legacy-page-size-inline select{min-width:64px;width:auto;min-height:36px;padding:6px 10px}
@media(max-width:700px){.legacy-pagination-tools{justify-content:flex-start;width:100%}.legacy-pagination-row{align-items:flex-start!important;gap:12px!important}}


/* Unified compact pagination contract — all modules use the same geometry. */
.pagination-controls,
.legacy-pagination-row {
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  width:100%;
  box-sizing:border-box;
  padding:10px 2px 2px !important;
}
.pagination-controls > .page-size-form,
.pagination-controls > form.page-size-form,
.legacy-pagination-row > .page-size-form {
  order:1 !important;
  flex:0 0 auto !important;
  margin:0 auto 0 0 !important;
}
.pagination-controls > span,
.legacy-pagination-row > span {
  order:2 !important;
  flex:0 1 auto !important;
  margin:0 0 0 auto !important;
  text-align:right !important;
  white-space:nowrap;
}
.pagination-controls > .pagination-links,
.pagination-controls > nav.pagination-links,
.legacy-pagination-row > .pagination-links,
.legacy-pagination-row > nav.pagination-links {
  order:3 !important;
  flex:0 0 auto !important;
  margin:0 !important;
}
.pagination-controls .page-size-form label,
.legacy-pagination-row .page-size-form label {
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  white-space:nowrap;
}
.pagination-controls .page-size-form select,
.legacy-pagination-row .page-size-form select {
  width:auto !important;
  min-width:58px !important;
  min-height:30px !important;
  height:30px !important;
  padding:4px 8px !important;
  font-size:12px !important;
}
.pagination-controls .pagination-links a,
.pagination-controls .pagination-links .current,
.legacy-pagination-row .pagination-links a,
.legacy-pagination-row .pagination-links .current {
  min-width:30px !important;
  width:auto !important;
  min-height:30px !important;
  height:30px !important;
  padding:4px 8px !important;
  font-size:12px !important;
  border-radius:7px !important;
}
@media(max-width:700px) {
  .pagination-controls,
  .legacy-pagination-row { justify-content:flex-start !important; }
  .pagination-controls > span,
  .legacy-pagination-row > span {
    margin-left:0 !important;
    text-align:left !important;
  }
}


/* Estándar único global de paginación Panel-Proxy-4 */
.pagination-controls,
.legacy-pagination-row,
.pagination-controls.cardbody {
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  width:100%;
  box-sizing:border-box;
}
.pagination-controls > .page-size-form,
.pagination-controls > form.page-size-form,
.legacy-pagination-row > .page-size-form {
  order:1 !important;
  flex:0 0 auto !important;
  margin:0 auto 0 0 !important;
}
.pagination-controls > span,
.legacy-pagination-row > span {
  order:2 !important;
  margin:0 0 0 auto !important;
  text-align:right !important;
}
.pagination-controls > .pagination-links,
.pagination-controls > nav.pagination-links,
.legacy-pagination-row > nav.pagination-links {
  order:3 !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  margin:0 !important;
}
.pagination-controls .page-size-form select,
.legacy-pagination-row .page-size-form select {
  width:auto !important;
  min-width:56px !important;
  height:30px !important;
  min-height:30px !important;
  padding:3px 7px !important;
  font-size:12px !important;
}
.pagination-controls .pagination-links a,
.pagination-controls .pagination-links .current,
.legacy-pagination-row .pagination-links a,
.legacy-pagination-row .pagination-links .current {
  min-width:30px !important;
  width:auto !important;
  height:30px !important;
  min-height:30px !important;
  padding:3px 7px !important;
  font-size:12px !important;
  border-radius:7px !important;
}


/* Ajuste final de Auditoría y alertas: una sola barra compacta por listado. */
.audit-client-ip-panel > .pagination-controls,
.audit-groups-panel > .pagination-controls,
.audit-ungrouped-panel > .pagination-controls,
.connection-alerts .pagination-controls,
.card > .pagination-controls.cardbody {
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:12px 0 2px !important;
  margin:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.audit-client-ip-panel .pagination-controls .page-size-form,
.audit-groups-panel .pagination-controls .page-size-form,
.audit-ungrouped-panel .pagination-controls .page-size-form,
.card > .pagination-controls.cardbody .page-size-form {
  margin:0 auto 0 0 !important;
}
.audit-client-ip-panel .pagination-controls > span,
.audit-groups-panel .pagination-controls > span,
.audit-ungrouped-panel .pagination-controls > span,
.card > .pagination-controls.cardbody > span {
  margin:0 0 0 auto !important;
  white-space:nowrap;
  text-align:right !important;
}
.audit-client-ip-panel .pagination-controls .pagination-links,
.audit-groups-panel .pagination-controls .pagination-links,
.audit-ungrouped-panel .pagination-controls .pagination-links,
.card > .pagination-controls.cardbody .pagination-links {
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
}
.audit-client-ip-panel .pagination-controls select,
.audit-groups-panel .pagination-controls select,
.audit-ungrouped-panel .pagination-controls select,
.card > .pagination-controls.cardbody select {
  height:30px !important;
  min-height:30px !important;
  min-width:56px !important;
  width:auto !important;
  padding:3px 7px !important;
  font-size:12px !important;
}
.audit-client-ip-panel .pagination-controls a,
.audit-client-ip-panel .pagination-controls .current,
.audit-groups-panel .pagination-controls a,
.audit-groups-panel .pagination-controls .current,
.audit-ungrouped-panel .pagination-controls a,
.audit-ungrouped-panel .pagination-controls .current,
.card > .pagination-controls.cardbody .pagination-links a,
.card > .pagination-controls.cardbody .pagination-links .current {
  min-width:30px !important;
  height:30px !important;
  min-height:30px !important;
  padding:3px 7px !important;
  font-size:12px !important;
}
@media(max-width:700px) {
 .audit-client-ip-panel > .pagination-controls,
 .audit-groups-panel > .pagination-controls,
 .audit-ungrouped-panel > .pagination-controls,
 .card > .pagination-controls.cardbody { flex-wrap:wrap !important; justify-content:flex-start !important; }
}

/* DARK THEME FIX — account permissions and server assignment cards */
html[data-theme="dark"] dialog.server-assign-dialog .server-assign-option,
html[data-theme="dark"] dialog.action-config-dialog .server-assign-option {
  background:#171f2d !important;
  color:#e7eefb !important;
  border-color:#35445b !important;
  box-shadow:none !important;
}
html[data-theme="dark"] dialog.server-assign-dialog .server-assign-option:has(input:checked),
html[data-theme="dark"] dialog.action-config-dialog .server-assign-option:has(input:checked) {
  background:#1d3150 !important;
  color:#f3f7ff !important;
  border-color:#5685ff !important;
  box-shadow:inset 0 0 0 1px #5685ff30 !important;
}
html[data-theme="dark"] dialog.server-assign-dialog .server-assign-option span,
html[data-theme="dark"] dialog.action-config-dialog .server-assign-option span {
  color:#dce7f8 !important;
}
html[data-theme="dark"] dialog.server-assign-dialog .server-assign-option input,
html[data-theme="dark"] dialog.action-config-dialog .server-assign-option input {
  accent-color:#5685ff !important;
}
html[data-theme="dark"] dialog.server-assign-dialog .edit-dialog-actions,
html[data-theme="dark"] dialog.action-config-dialog .edit-dialog-actions {
  border-top-color:#35445b !important;
}
html[data-theme="dark"] dialog.server-assign-dialog .edit-dialog-form > p,
html[data-theme="dark"] dialog.action-config-dialog .edit-dialog-form > p,
html[data-theme="dark"] dialog.action-config-dialog .action-config-form > p {
  color:#a9b9d4 !important;
}

/* MySQL source management: remove only the panel-side connection. */
.legacy-delete-connection-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line)}
.legacy-delete-connection-form .dangerbtn{min-height:34px;padding:7px 11px}


/* ============================================================
   IKS button-size unification (final pass)
   The panel accumulated several one-off button sizes (34–48px) in
   different sections over time. This block forces every one of them
   down to the single compact size used in Estadísticas comerciales
   (min-height 32px, padding 7px 11px), so no button looks oversized
   next to the others. Appended last and with !important so it wins
   over every earlier, more specific rule above.
   ============================================================ */
.account-actions button,.account-actions summary,
.account-filters button,.client-filters button,
.account-filters .secondary-link,.client-filters .secondary-link,
.audit-client-ip-search-btn,.audit-client-ip-reset,.audit-client-ip-clear-btn,
.legacy-access-links a,.legacy-all-access,
.legacy-delete-connection-form .dangerbtn,
.legacy-save-btn,.legacy-server-content .legacy-save-btn,
dialog.manage-dialog .manage-actions-grid > button{min-height:32px!important;height:auto!important;padding:7px 11px!important;font-size:12px!important;line-height:1.2!important}


/* IKS: slightly larger sidebar nav labels and stat-card text for readability. */
.sidebar nav a{font-size:14px}
.statlabel{font-size:13px}
.stat small{font-size:12px}
.stat>strong{font-size:clamp(30px,2.4vw,36px)}


/* IKS: one shared stat-card look for every page's top summary row — Estadísticas
   comerciales and Auditoría y alertas FSLB used their own ad-hoc cards before;
   now they reuse the same .stats/.stat component as the dashboard and clientes. */
.stats-auto{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}


/* IKS: 4 pages (Bases PostgreSQL, Explorar esquemas, 2FA, Auditoría FSLB) used
   ".pagehead" for their header, which had no CSS of its own and so lost the
   spacing/alignment every other page's ".topbar" header gets. Make it match. */
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.pagehead h1{margin:4px 0 8px}

/* "Resumen" dashboard stat cards had too much white space / felt oversized
   vs. the rest of the panel (user feedback with screenshot, Oct 31). Scoped
   to the dashboard grids only, not the global .stat used elsewhere. */
.dashboard-stats,.dashboard-secondary{gap:12px}
.dashboard-stats .stat,.dashboard-secondary .stat{padding:14px 16px}
.dashboard-stats .stat>strong,.dashboard-secondary .stat>strong{font-size:24px;margin:6px 0 2px}
.dashboard-stats .statstatus{font-size:17px!important}

/* Same "moderate" tightening as the dashboard, applied to every stat-card
   grid inside "Clientes y cuentas": Estadisticas comerciales (.stats-auto),
   and Clientes/Demos normales + Multilogin (.clients-stats). User feedback
   with screenshots, Oct 31. */
.stats-auto,.clients-stats{gap:12px}
.stats-auto .stat,.clients-stats .stat{padding:14px 16px}
.stats-auto .stat>strong,.clients-stats .stat>strong{font-size:24px;margin:6px 0 2px}

/* IKS-COMPACT-V1: modo compacto global, pedido por el usuario (31 oct) a partir
   de capturas del panel viejo (tablas densas, letras bien definidas, botones
   chicos). Se aplica a TODAS las tablas y controles del panel, no solo a una
   página, usando selectores amplios + !important donde hace falta para ganarle
   a los ajustes más específicos de tablas individuales (clients-table,
   accounts-table, etc.) definidos antes en este archivo. */
.tablewrap thead th,
table th{padding:7px 9px!important;font-size:10.5px!important;letter-spacing:.04em!important}
.tablewrap tbody td,
table td{padding:6px 9px!important;font-size:12px!important;line-height:1.3!important;font-weight:600!important}
.clients-table td strong,.accounts-table td strong,table td strong{font-size:12.5px!important}
table{line-height:1.3!important}
.clients-table th,.clients-table td,.accounts-table th,.accounts-table td{padding:6px 8px!important}
button,.primary,.secondary,.dangerbtn,.secondary-link{
  min-height:26px!important;padding:5px 9px!important;font-size:11px!important;border-radius:7px!important;line-height:1.15!important;
}
.clients-table td:last-child button,.clients-table td:last-child .primary,
.clients-table td:last-child .secondary,.clients-table td:last-child .dangerbtn,
.clients-table td:last-child .secondary-link{min-height:24px!important;padding:4px 8px!important;font-size:10.5px!important}
.inlineform select{padding:5px!important;font-size:10.5px!important;min-height:24px!important}
.status,.connection-pill,.tag{padding:3px 7px!important;font-size:10px!important;line-height:1.2!important}
.client-filters input,.client-filters select,.account-filters input,.account-filters select,
.credits-filters input,.credits-filters select{min-height:32px!important;padding:6px 9px!important;font-size:11.5px!important}
.client-filters label,.account-filters label{font-size:10.5px!important}
.pagehead h1,header.topbar h1{font-size:19px!important}
.panel{padding:14px!important}
.sectionhead h2{font-size:14px!important}
@media(max-width:700px){
  .tablewrap thead th,table th{padding:6px 7px!important}
  .tablewrap tbody td,table td{padding:5px 7px!important}
}

/* Client status tabs: selected state is driven only by the active query.
   Mouse click focus must not look like a second selected filter. */
.filter-tabs a:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }
.filter-tabs a:focus-visible { outline: 2px solid #5685ff; outline-offset: 2px; }
.filter-tabs a:hover { transform: none !important; }
.filter-tabs a.selected { font-weight: 850; }

/* Corrección global: varias reglas de este archivo (.formrow, .permission-box,
   .checkline y otras) fijan "display" sin excluir [hidden], así que cuando el
   JS oculta un elemento con hidden=true (créditos iniciales, permisos de ROOT
   de servidor, etc.) el navegador lo sigue mostrando porque esas reglas de
   autor ganan sobre el estilo por defecto de [hidden]. Esta regla, al ir al
   final del archivo con !important, hace que [hidden] SIEMPRE oculte el
   elemento sin importar qué otra regla de display tenga encima. */
[hidden] { display: none !important; }

/* Las casillas de "Permisos de esta cuenta" que quedan bloqueadas para ROOT
   de servidor (siempre tiene todo activo, no hay nada que decidir) NO usan
   el atributo "disabled": Chrome ignora accent-color en checkboxes
   deshabilitados y los pinta siempre atenuados sin importar el CSS, dando la
   impresión equivocada de que el permiso está "apagado". En su lugar quedan
   marcadas normales (azul sólido, igual que cualquier casilla encendida) y
   el bloqueo de click/teclado lo hace el JS (ver guardLockedCheckbox); esta
   clase solo cambia el cursor para que se note que no es editable. */
.locked-checkbox { cursor: not-allowed !important; }
label:has(.locked-checkbox) { cursor: not-allowed !important; }