/* === CloudNetwork Tools dark theme v3 === */
:root{
  --cn-bg:#06131f;
  --cn-bg-2:#071827;
  --cn-surface:#0a2133;
  --cn-surface-2:#0c273c;
  --cn-surface-3:#0f2d44;
  --cn-line:#174560;
  --cn-line-soft:#12354c;
  --cn-text:#f4f7fb;
  --cn-muted:#93a9bc;
  --cn-cyan:#19e0cf;
  --cn-blue:#159fe8;
  --cn-blue-2:#1187cf;
  --cn-success:#36d69b;
  --cn-warning:#f2c66d;
  --cn-danger:#ff7a78;
}
html{color:var(--cn-text);background:var(--cn-bg)}
body{
  color:var(--cn-text);
  background:var(--cn-bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.app-shell{background:var(--cn-bg)}
.sidebar{
  background:linear-gradient(180deg,#051522 0%,#061a29 100%);
  color:var(--cn-text);
  border-right:1px solid var(--cn-line-soft);
  box-shadow:18px 0 50px rgba(0,0,0,.10);
}
.brand{padding:2px 8px 24px;gap:13px}
.brand-mark{
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(145deg,rgba(21,159,232,.18),rgba(25,224,207,.08));
  color:#35c6ff;border:1px solid #117eb8;
  box-shadow:inset 0 0 22px rgba(21,159,232,.08);
  font-size:.86rem;letter-spacing:-.02em;
}
.brand img{background:transparent;border:1px solid var(--cn-line);border-radius:14px}
.brand strong{color:#f7f9fc;font-weight:900;letter-spacing:-.025em}
.brand small{color:var(--cn-cyan);font-size:.69rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.side-nav{gap:6px}
.side-nav a{
  color:#8ea4b7;border:1px solid transparent;border-radius:14px;
  padding:11px 12px;font-weight:800;transition:.18s ease;
}
.side-nav a span{color:#5faed9}
.side-nav a:hover{background:#0b2234;color:#e9f4fb;border-color:#153d57}
.side-nav a.active{
  background:linear-gradient(180deg,#152535,#132231);
  color:#fff;border-color:#263b4e;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.side-nav a.active span{color:var(--cn-cyan)}
.sidebar-user{border-top-color:#15364d}
.sidebar-user strong{color:#fff}
.sidebar-user small{color:#8198ac}
.sidebar-user a{color:#64c8f5;font-weight:800}
.main-area{
  background:
    radial-gradient(circle at 88% 3%,rgba(14,115,170,.18),transparent 32%),
    linear-gradient(rgba(24,75,105,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,75,105,.07) 1px,transparent 1px),
    linear-gradient(180deg,#061622 0%,#071a28 100%);
  background-size:auto,64px 64px,64px 64px,auto;
}
.topbar{
  min-height:76px;
  background:rgba(5,18,29,.88);
  border-bottom:1px solid var(--cn-line-soft);
  backdrop-filter:blur(16px);
}
.topbar h1{color:#f4f7fb;font-weight:900;letter-spacing:-.035em}
.topbar p{color:#8fa6b9}
.topbar-user,.menu-toggle{
  color:#f1f6fa;background:#122332;border:1px solid #203648;
  border-radius:999px;
}
.menu-toggle{border-radius:12px}
.content{color:var(--cn-text)}
.alert{border:1px solid var(--cn-line);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.alert.success{background:#0c2b28;color:#8ef1c9;border-color:#18604e}
.alert.warning{background:#302819;color:#f3d493;border-color:#6b5728}
.alert.danger{background:#321c22;color:#ffaaa7;border-color:#6c3238}
.alert.info{background:#0b2638;color:#8dd8ff;border-color:#185577}
.card{
  background:linear-gradient(180deg,rgba(10,33,51,.98),rgba(8,29,45,.98));
  border:1px solid var(--cn-line);
  border-radius:20px;
  box-shadow:0 18px 44px rgba(0,0,0,.12);
}
.card-header{border-bottom:1px solid var(--cn-line-soft)}
.card-header h2,.card-header h3{color:#f5f8fb;font-weight:900;letter-spacing:-.02em}
.card-header p{color:var(--cn-muted)}
.metric-card .label{color:var(--cn-cyan);font-size:.72rem;letter-spacing:.13em}
.metric-card .value{color:#f6f9fc}
.metric-card .detail{color:var(--cn-muted)}
.metric-card.accent .value{color:#65c9ff}
.metric-card.success .value{color:var(--cn-success)}
.field label{color:#c8d5df}
.field small,.muted{color:var(--cn-muted)}
.input,.select,.textarea{
  background:#071a29;color:#eef5fa;border:1px solid #1a4a67;
  border-radius:13px;padding:12px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}
.input::placeholder,.textarea::placeholder{color:#617b8e}
.input:focus,.select:focus,.textarea:focus{
  border-color:#1aa8e7;box-shadow:0 0 0 3px rgba(21,159,232,.13);
}
.select option{background:#081c2b;color:#eef5fa}
.btn{border-radius:12px;font-weight:900;transition:.18s ease}
.btn.primary{
  color:#fff;background:linear-gradient(180deg,#18a8eb,#118bcf);
  border-color:#21b0ec;box-shadow:0 8px 22px rgba(17,139,207,.18);
}
.btn.primary:hover{background:linear-gradient(180deg,#22b4f2,#1294da);transform:translateY(-1px)}
.btn.secondary{background:#0b2234;border-color:#1d5677;color:#b9cee0}
.btn.secondary:hover{color:#fff;border-color:#2484b3;background:#0e2a40}
.btn.success{background:#0e2c28;color:#8be9c4;border-color:#1c654f}
.btn.danger{background:#2b1a20;color:#ff9b98;border-color:#71313a}
.table th{background:#071b2a;color:#8aa4b8;border-bottom-color:#17405a}
.table td{border-bottom-color:#12344a;color:#dbe7ef}
.table tr:hover td{background:#0b2335}
.table small{color:#8199ab}
.badge{background:#112a3d;color:#b6c9d7;border:1px solid #1a435d}
.badge.success{background:#0d3029;color:#81e8bf;border-color:#1b644e}
.badge.warning{background:#302918;color:#f0ce84;border-color:#69562a}
.badge.danger{background:#321d23;color:#ff9b98;border-color:#6e333b}
.badge.neutral{background:#112a3d;color:#a9becd;border-color:#1a435d}
.quick-form{background:#071c2b;border-color:#174560;border-radius:16px}
.list-item{background:#081d2c;border-color:#153e58;color:#e8f0f5}
.list-item small{color:#8099ab}
.days{color:#65c9ff}
.credential-value{background:#071826;color:#d8e8f3;border:1px solid #153d56}
.chart{border-bottom-color:#17415b}
.bar{background:linear-gradient(180deg,#1be1cf,#159fe8)}
.bar-label{color:#8ca4b6}
.pagination a{background:#0a2132;border-color:#174560;color:#aac0cf}
.pagination a.active{background:#159fe8;color:#fff;border-color:#159fe8}
.calculator-host-card>.card-header{border-bottom-color:#143b54}
.calculator-frame{background:#061622}

/* Login */
.login-page{
  background:
    radial-gradient(circle at 78% 10%,rgba(13,112,169,.26),transparent 33%),
    radial-gradient(circle at 8% 100%,rgba(25,224,207,.08),transparent 32%),
    linear-gradient(rgba(24,75,105,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,75,105,.08) 1px,transparent 1px),
    linear-gradient(180deg,#04111b,#071a28);
  background-size:auto,auto,56px 56px,56px 56px,auto;
}
.login-card{
  width:min(470px,100%);background:rgba(8,29,45,.97);color:var(--cn-text);
  border:1px solid #16455f;border-radius:22px;padding:36px;
  box-shadow:0 28px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.02);
}
.login-logo{margin-bottom:28px}
.login-card h1{color:#f5f8fb;font-weight:900;letter-spacing:-.035em}
.login-card p{color:#8fa6b8}
.login-card .brand-mark{width:52px;height:52px}
.login-card .btn.primary{min-height:46px}
.login-card .field label{font-size:.86rem}

@media(max-width:820px){
  .sidebar{box-shadow:20px 0 70px rgba(0,0,0,.35)}
  .topbar{min-height:70px}
}


/* === Ajustes V4 para tema Tools === */
.theme-picker label{color:#8fa6b9}.theme-select{background:#102333;color:#eef5fa;border-color:#23445b}.theme-select option{background:#081c2b;color:#eef5fa}
.login-theme-picker{background:rgba(7,26,40,.90);border:1px solid #174560;box-shadow:0 16px 45px rgba(0,0,0,.24)}
.client-hero p{color:var(--cn-muted)}
.client-tabs{background:#081d2c;border-color:#174560;box-shadow:0 14px 34px rgba(0,0,0,.12)}
.client-tabs a{color:#8ea4b7}.client-tabs a:hover{background:#0b2335;color:#fff}.client-tabs a.active{background:linear-gradient(180deg,#18a8eb,#118bcf);color:#fff;border-color:#21b0ec}
.stat-tile{background:linear-gradient(180deg,#0a2133,#081d2d);border-color:#174560;box-shadow:0 14px 34px rgba(0,0,0,.10)}
.stat-tile span{color:var(--cn-cyan)}.stat-tile strong{color:#f5f8fb}.stat-tile small{color:var(--cn-muted)}
.contact-block{background:#081d2c;border-color:#153e58}.contact-block span{color:var(--cn-muted)}
.btn.ghost-danger{background:transparent;color:#ff9b98;border-color:#71313a}.btn.ghost-danger:hover{background:#2b1a20}

/* === V5: controles de orden sobre tema azul === */
.nav-sort-hint{color:#668297}
.side-nav a.is-dragging,.client-tabs a.is-dragging{outline-color:#1be1cf;background:#0b2638}
.sort-help{color:#7892a5}

/* === V6: componentes nuevos sobre tema azul === */
.credential-status-item{background:#081d2c;border-color:#153e58;color:#e8f0f5}
.credential-status-heading small{color:#8099ab}
.row-drag-handle{background:#071826;border-color:#1a4a67;color:#7fa2ba}
.credential-sort-table tr.is-dragging{outline-color:#1be1cf;background:#0b2638}
.tools-subnav{background:#081d2c;border-color:#174560;box-shadow:0 14px 34px rgba(0,0,0,.12)}
.tools-subnav a{color:#8ea4b7}.tools-subnav a:hover{background:#0b2335;color:#fff}.tools-subnav a.active{background:linear-gradient(180deg,#18a8eb,#118bcf);color:#fff;border-color:#21b0ec}

/* V7 · filas ordenables de activos */
.asset-sort-table tr.is-dragging{outline-color:#1be1cf;background:#0b2638}

/* V8 · logo horizontal CloudNetwork sin deformación */
.brand.brand-has-logo{display:block;padding:4px 8px 20px}
.brand-logo-stack{display:block}
.brand-logo-stack img{display:block;width:100%;max-width:190px;height:54px;object-fit:contain;object-position:center;background:#fff;border-radius:11px;padding:5px 8px;border:1px solid var(--cn-line)}
.brand-logo-stack small{display:block;margin-top:7px;color:var(--cn-cyan);font-size:.68rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;text-align:left;padding-left:2px}
.login-logo-full{display:block;text-align:center}
.login-logo-full img{display:block;width:min(310px,100%);height:auto;max-height:86px;object-fit:contain;margin:0 auto 14px;background:#fff;border-radius:12px;padding:8px 12px}
.login-logo-full p{text-align:center}