:root{--ink:#1c2737;--muted:#718096;--line:#e8edf2;--paper:#f6f8fa;--white:#fff;--bg-card:#fff;--navy:#16283a;--blue:#155bd7;--green:#178553;--red:#c53c48;--amber:#a56708;--mint:#e9f7ef;--rose:#fff0ef;--sand:#fff6e6;--shadow:0 12px 38px #15283a14;--season-accent:#1763e9;--season-highlight:#e8f0ff;--season-glow:rgba(80,133,235,.18);--primary:var(--season-accent,var(--blue));--text:var(--ink)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'DM Sans',sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.shell{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--navy);color:#d9e3ed;padding:24px 16px;display:flex;flex-direction:column;gap:34px}.brand{display:flex;align-items:center;gap:11px;padding:0 8px}.logo{width:36px;height:36px;display:grid;place-items:center;background:#326fe5;border-radius:11px;color:white;font-weight:800;font-family:Manrope}.brand strong{font:700 15px Manrope;color:#fff;display:block}.brand small{font-size:11px;color:#9fb0c0}.nav-label{font-size:10px;letter-spacing:.13em;color:#8395a8;padding:0 10px;margin:0 0 9px}.nav{display:grid;gap:5px}.nav button{border:0;background:transparent;color:#b7c5d2;text-align:left;padding:11px 12px;border-radius:9px;display:flex;gap:11px;align-items:center}.nav button:hover,.nav button.active{background:#ffffff14;color:#fff}.nav button.active{box-shadow:inset 3px 0 #69a0ff}.ico{width:18px;text-align:center;font-size:15px}.sidefoot{margin-top:auto;border-top:1px solid #ffffff1a;padding:17px 8px 0;display:flex;align-items:center;gap:10px;font-size:12px}.avatar{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#dce8fa;color:#27456e;font-weight:700}.sidefoot small{display:block;color:#9bacbb;margin-top:2px}.main{min-width:0}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 36px}.crumb{font-size:12px;color:var(--muted)}.crumb b{color:var(--ink);font-weight:600}.top-actions{display:flex;align-items:center;gap:12px}.today{font-size:12px;color:var(--muted)}.iconbtn{border:1px solid var(--line);background:#fff;border-radius:9px;width:36px;height:36px;color:#617287}.content{max-width:1380px;margin:auto;padding:30px 36px 42px}.heading{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:24px}.eyebrow{color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin-bottom:7px}.heading h1{font:800 25px Manrope;margin:0;letter-spacing:-.045em}.heading p{margin:7px 0 0;color:var(--muted);font-size:13px}.primary{border:0;background:var(--blue);color:#fff;font-weight:700;padding:11px 16px;border-radius:9px;box-shadow:0 5px 12px #326fe52a}.primary:hover{background:#255fcc}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px 18px;position:relative;overflow:hidden}.stat-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}.stat-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#edf3ff;color:var(--blue);font-size:14px}.stat strong{display:block;font:800 26px Manrope;margin:11px 0 3px}.stat small{font-size:11px;color:var(--muted)}.stat small em{color:var(--green);font-style:normal;font-weight:700}.twocol{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(275px,.8fr);gap:16px;margin-bottom:19px}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:19px}.panelhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.panel h2{font:700 14px Manrope;margin:0}.sub{font-size:11px;color:var(--muted);margin-top:5px}.select{border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 10px;color:#5d6b7b;font-size:11px}.chart{height:139px;margin-top:18px;display:flex;align-items:stretch;gap:15px;border-bottom:1px solid var(--line);position:relative}.yaxis{display:flex;flex-direction:column;justify-content:space-between;color:var(--muted);font-size:10px;padding-bottom:20px}.bars{flex:1;display:flex;justify-content:space-around;align-items:end;position:relative;background:repeating-linear-gradient(to bottom,transparent 0,transparent 33px,var(--line) 34px);border-radius:4px}.bar-group{height:100%;display:flex;align-items:end;gap:5px;position:relative;padding-bottom:20px}.bar{width:12px;border-radius:4px 4px 0 0;background:var(--season-accent,var(--blue,#155bd7));box-shadow:0 2px 6px var(--season-glow,rgba(50,111,229,.25));transition:height .3s ease,background .25s ease,transform .15s ease}.bar:hover{transform:scaleY(1.05);filter:brightness(1.12)}.bar.late{background:var(--amber,#a56708);box-shadow:0 2px 6px rgba(245,158,11,.25)}.bar-label{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted);font-weight:600}.legend{display:flex;gap:16px;margin:11px 0 0 32px;font-size:10px;color:var(--muted)}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--season-accent,var(--blue,#155bd7));margin-right:5px;box-shadow:0 0 4px var(--season-glow,rgba(50,111,229,.4))}.dot.amber{background:var(--amber,#a56708);box-shadow:0 0 4px rgba(245,158,11,.4)}.side-metrics{display:grid;gap:15px;margin-top:22px}.metric{display:flex;justify-content:space-between;align-items:center;font-size:12px}.metric span:first-child{color:var(--muted)}.metric b{font:700 13px Manrope}.metric-detail{color:var(--muted);font:400 10px 'DM Sans';margin-left:4px}.track{height:6px;background:var(--paper,#edf0f3);border:1px solid var(--line);border-radius:8px;margin-top:7px;overflow:hidden}.fill{height:100%;background:var(--season-accent,var(--blue));border-radius:8px}.fill.green{background:var(--green)}.fill.amber{background:var(--amber)}.assist[hidden]{display:none}.assist{margin-top:17px;background:#f1f5ff;border-radius:9px;padding:12px;display:flex;gap:9px;align-items:flex-start;color:#40546f;font-size:11px;line-height:1.55}.assist b{color:#3656a0}.assist-icon{font-size:15px}.listpanel{padding:0;overflow:hidden}.list-head{padding:19px 20px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.list-head h2{font:700 14px Manrope;margin:0}.filters{display:flex;gap:8px;align-items:center}.search{border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:11px;width:180px}.tablewrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:770px}th{text-align:left;color:#8290a0;background:#fafbfc;font-size:10px;text-transform:uppercase;letter-spacing:.07em;padding:11px 18px;font-weight:700}td{padding:13px 18px;border-top:1px solid #eef1f4;font-size:12px;vertical-align:middle}tr:hover td{background:#fcfdff}.equip{display:flex;align-items:center;gap:10px}.pc-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:#f0f4f9;font-size:15px}.equip b{font-size:12px;display:block}.equip small{color:var(--muted);font-size:10px;display:block;margin-top:3px}.tech{display:flex;align-items:center;gap:7px;white-space:nowrap}.mini{width:23px;height:23px;border-radius:50%;background:#eaf1fb;color:#365d8e;display:grid;place-items:center;font-size:9px;font-weight:700}.due{white-space:nowrap;color:#566477;font-size:11px}.status{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:6px 9px;font-size:10px;font-weight:700;white-space:nowrap}.status:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.done{background:var(--mint);color:var(--green)}.done-late{background:var(--sand);color:var(--amber)}.pending{background:#edf3ff;color:#426dc0}.late{background:var(--rose);color:var(--red);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}.soon{background:var(--sand);color:var(--amber)}.rowactions{display:flex;gap:5px}.sm-btn{border:1px solid var(--line);background:white;border-radius:6px;padding:6px 8px;color:#5b6b7c;font-size:10px}.sm-btn:hover{background:#f5f8fc}.complete-btn{color:var(--green);border-color:#cee9db}.empty{padding:40px;text-align:center;color:var(--muted)}.footer{display:flex;justify-content:space-between;padding:12px 20px;color:var(--muted);font-size:10px;border-top:1px solid var(--line)}.modal-backdrop{position:fixed;inset:0;background:#13223466;display:none;place-items:center;padding:18px;z-index:5}.modal-backdrop.open{display:grid}.modal{background:#fff;width:min(550px,100%);border-radius:14px;padding:23px;box-shadow:var(--shadow);max-height:90vh;overflow:auto}.modal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.modal h2{font:800 18px Manrope;margin:0}.close{border:0;background:none;font-size:22px;color:#738196}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:11px;color:#5e6d7e;font-weight:600}.field input,.field select,.field textarea{width:100%;padding:10px;border:1px solid #dfe5eb;border-radius:8px;outline-color:#7ea4eb;background:#fff}.field textarea{min-height:75px;resize:vertical}.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.secondary{border:1px solid var(--line);background:#fff;color:#58687a;padding:10px 14px;border-radius:8px}.photos{font-size:10px;color:var(--muted)}.toast{position:fixed;right:24px;bottom:24px;background:#20364b;color:#fff;padding:12px 16px;border-radius:9px;box-shadow:0 10px 25px rgba(0,0,0,0.4);font-size:12px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none;z-index:99999}.toast.show{opacity:1;transform:translateY(0);pointer-events:auto}.evidence-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}.evidence-list img{width:37px;height:30px;object-fit:cover;border-radius:4px}
@media(max-width:950px){.shell{grid-template-columns:68px minmax(0,1fr)}.sidebar{padding:22px 10px;align-items:center}.brand{padding:0}.brand div:not(.logo),.nav-label,.nav button span:not(.ico),.sidefoot>div:last-child{display:none}.nav{width:100%}.nav button{justify-content:center;padding:12px 0}.sidefoot{padding:15px 0 0}.twocol{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.topbar{padding:0 16px}.content{padding:22px 15px}.heading{align-items:flex-start;flex-direction:column}.heading h1{font-size:22px}.stats{gap:9px}.stat{padding:13px}.stat strong{font-size:23px}.today{display:none}.list-head{align-items:flex-start;flex-direction:column}.filters{width:100%}.search{flex:1}.formgrid{grid-template-columns:1fr}.field.full{grid-column:auto}}
.management-toolbar{display:flex;gap:8px;align-items:center;margin:12px 0}.management-toolbar input,.management-toolbar select{border:1px solid var(--line);border-radius:7px;padding:9px;font-size:12px}.table-actions{display:flex;gap:5px;white-space:nowrap}.delete-schedule-btn{color:#b54750;border-color:#f0d4d7}.manage-count{font-size:11px;color:var(--muted);margin-left:auto}.modal-backdrop{z-index:5}#techniciansBackdrop,#inventoryBackdrop,#assetEditBackdrop,#evidenceBackdrop,#relocateAssetModal{z-index:6}@media print{.sidebar,.topbar,.heading,.stats,.twocol,.listpanel,.modal-backdrop,.toast{display:none!important}}.transfer-choice{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-bottom:1px solid #eef1f4;cursor:pointer}.transfer-choice:hover{background:#f7f9fc}.transfer-choice input{width:auto!important;margin:2px 0 0}.transfer-choice span{display:block;min-width:0}.transfer-choice b{display:block;font-size:11px;color:#32445a}.transfer-choice small{display:block;margin-top:4px;color:#7b8897;font-size:10px;overflow-wrap:anywhere}.decommission-choice{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-bottom:1px solid #eef1f4;cursor:pointer}.decommission-choice:hover{background:#f7f9fc}.decommission-choice input{width:auto!important;margin:2px 0 0}.decommission-choice span{display:block;min-width:0}.decommission-choice b{display:inline;font-size:11px;color:#32445a}.decommission-choice small{display:block;margin-top:4px;color:#7b8897;font-size:10px;overflow-wrap:anywhere}.nav-group>.nav-submenu{display:none;gap:3px;margin:0 0 4px 29px}.nav-group.open>.nav-submenu{display:grid}.nav-submenu button{font-size:11px;padding:8px 9px!important;color:#aebed0!important;line-height:1.35}.nav-submenu button.active{color:#fff!important;background:#ffffff14}#maintenanceNavGroup.open>button{background:#ffffff14;color:#fff;box-shadow:inset 3px 0 #69a0ff}#maintenanceNavGroup>.nav-submenu{position:relative;gap:4px;margin:2px 0 8px 28px;padding-left:11px}#maintenanceNavGroup>.nav-submenu:before{content:"";position:absolute;left:2px;top:4px;bottom:7px;width:2px;border-radius:2px;background:#ffffff24}#maintenanceNavGroup>.nav-submenu button{min-height:36px;padding:7px 10px!important;border-left:2px solid transparent;border-radius:8px;color:#b7c5d2!important;font-size:11px;line-height:1.35;transition:background .15s,color .15s,border-color .15s}#maintenanceNavGroup>.nav-submenu button:hover{background:#ffffff0c;color:#fff!important}#maintenanceNavGroup>.nav-submenu button.active{background:#2a4056;color:#fff!important;border-left-color:#69a0ff;font-weight:700;box-shadow:none!important}#maintenanceNavGroup button:focus:not(:focus-visible){outline:none}#maintenanceNavGroup button:focus-visible{outline:2px solid #79a9ff;outline-offset:2px}.stats{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}.clickable-stat{cursor:pointer;transition:transform .15s,box-shadow .15s}.clickable-stat:hover{transform:translateY(-2px);box-shadow:0 8px 18px #17233712}.clickable-stat:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.maintenance-status-stat{grid-column:span 2}.status-legend{display:block;color:var(--muted);font-size:10px;line-height:1.4;margin-top:5px}.maintenance-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.maintenance-status-button{min-width:0;text-align:left;border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px;color:var(--ink)}.maintenance-status-button:hover{background:#f8faff;border-color:#cddaf0}.maintenance-status-button span{display:block;color:var(--muted);font-size:10px}.maintenance-status-button b{display:block;font:800 20px Manrope;margin:5px 0}.maintenance-status-button small{display:block;color:var(--muted);font-size:9px;line-height:1.35}.maintenance-status-button.scheduled-state b{color:var(--blue)}.maintenance-status-button.completed b{color:var(--green)}.maintenance-status-button.pending-state b{color:var(--amber)}.maintenance-status-button.overdue b{color:var(--red)}@media(max-width:760px){.maintenance-status-stat{grid-column:1/-1}.maintenance-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.register-device{border:1px solid var(--line);border-radius:10px;padding:13px;margin:10px 0;background:#fff}.register-device-head{display:flex;align-items:flex-start;gap:10px}.register-device-head input{width:auto;margin-top:3px}.register-device-title{font-weight:700;color:var(--ink)}.register-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:7px;margin:12px 0}.register-check{display:flex;align-items:flex-start;gap:7px;font-size:11px;color:var(--muted)}.register-check input{width:auto;margin:2px 0 0}.register-ip{max-width:320px}.register-note{margin-top:8px}.register-evidence{border:1.5px dashed var(--line,#b9cbe0);padding:12px;border-radius:10px;background:var(--paper,#f8faff)}@media(max-width:700px){.register-device-head{flex-wrap:wrap}.register-checks{grid-template-columns:1fr}}
.register-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px}.register-step{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--muted);font-size:12px;transition:.18s}.register-step-number{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:50%;background:#eef2f8;color:#62748b;font-weight:800}.register-step.is-current{border-color:#9ab8fa;background:#f5f8ff;color:var(--ink)}.register-step.is-current .register-step-number{background:#326ff0;color:#fff}.register-step.is-done{border-color:#b8e4d1;background:#f2fbf6;color:#166a48}.register-step.is-done .register-step-number{background:#1f9a68;color:#fff}.register-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.register-count{font-size:11px;color:var(--muted);margin-right:auto}.register-device{position:relative;border:1px solid var(--line);border-left:3px solid #d6deea;border-radius:11px;padding:12px 14px;margin:9px 0;background:#fff;transition:border-color .18s,box-shadow .18s}.register-device:hover{box-shadow:0 5px 14px #1723370d}.register-device.is-selected{border-left-color:#3977ed}.register-device.is-ready{border-color:#b8e4d1;border-left-color:#20a06c;background:#fbfefc}.register-device-head{display:flex;align-items:flex-start;gap:9px}.register-device-head input{width:auto;margin:3px 0 0;accent-color:#326ff0}.register-device-title{font-weight:750;color:var(--ink);font-size:13px}.register-device-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}.register-state{margin-left:auto;padding:4px 8px;border-radius:999px;background:#f0f3f7;color:#68788e;font-size:10px;font-weight:700;white-space:nowrap}.register-state.is-ready{background:#e6f6ee;color:#16734c}.register-state.is-selected{background:#edf3ff;color:#3166c7}/* --- COMPONENTES DE RED Y VERIFICACIÓN EN REGISTRO DE MANTENIMIENTO --- */
.register-network {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(220px, 1fr);
  gap: 12px;
  align-items: end;
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: var(--paper, #f7f9fc);
  border: 1px solid var(--line, #e2e8f0);
  transition: all 0.2s ease;
}

.register-ip {
  max-width: none;
}

.register-ip label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.register-ip input {
  padding: 8px 10px;
}

.register-wifi {
  padding: 8px 12px;
  border: 1px solid var(--line, #e5eaf1);
  border-radius: 8px;
  background: var(--card, var(--white, #fff));
  min-height: 38px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.register-wifi:hover {
  border-color: var(--season-accent, var(--blue, #326fe5));
}

.register-wifi .register-check {
  margin: 0 !important;
  align-items: center;
}

.register-wifi .register-check span {
  line-height: 1.35;
}

.register-wifi .register-check b {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.register-wifi .register-check small {
  font-size: 10px;
  color: var(--muted);
}

.register-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 12px 2px;
}

.register-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--ink, #334155);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: color 0.15s ease;
}

.register-check:hover {
  color: var(--season-accent, var(--blue, #326fe5));
}

.register-check input {
  width: auto;
  margin: 2px 0 0;
  accent-color: var(--season-accent, var(--blue, #326fe5));
  cursor: pointer;
}

.register-note {
  margin-top: 8px;
}

.register-note input {
  padding: 8px 10px;
}

/* Modo Nocturno (Dark Mode) para Red y Verificaciones */
[data-mode="night"] .register-network,
body[data-mode="night"] .register-network {
  background: rgba(18, 26, 38, 0.75) !important;
  border-color: #303b4a !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

[data-mode="night"] .register-ip label,
body[data-mode="night"] .register-ip label {
  color: #e2e8f0 !important;
}

[data-mode="night"] .register-wifi,
body[data-mode="night"] .register-wifi {
  background: #151e2a !important;
  border-color: #303b4a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

[data-mode="night"] .register-wifi:hover,
body[data-mode="night"] .register-wifi:hover {
  background: #1c2738 !important;
  border-color: #4a5d78 !important;
}

[data-mode="night"] .register-wifi .register-check b,
body[data-mode="night"] .register-wifi .register-check b {
  color: #f1f5f9 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

[data-mode="night"] .register-wifi .register-check small,
body[data-mode="night"] .register-wifi .register-check small {
  color: #94a3b8 !important;
}

[data-mode="night"] .register-check,
body[data-mode="night"] .register-check {
  color: #cbd5e1 !important;
}

[data-mode="night"] .register-check:hover,
body[data-mode="night"] .register-check:hover {
  color: #ffffff !important;
}

[data-mode="night"] .register-device.is-ready,
body[data-mode="night"] .register-device.is-ready {
  background: rgba(22, 34, 46, 0.92) !important;
  border-color: rgba(32, 160, 108, 0.45) !important;
  border-left-color: #20a06c !important;
}

[data-mode="night"] .register-state.is-ready,
body[data-mode="night"] .register-state.is-ready {
  background: rgba(22, 115, 76, 0.3) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.3) !important;
}

[data-mode="night"] .register-state.is-selected,
body[data-mode="night"] .register-state.is-selected {
  background: rgba(37, 99, 235, 0.3) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(96, 165, 250, 0.3) !important;
}/* --- COMPONENTE DE EVIDENCIA ADAPTABLE A TEMAS (CLARO, OSCURO Y ESTACIONAL) --- */
.register-evidence-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1.5px dashed var(--line, #9bb2d0);
  border-radius: 12px;
  background: var(--paper, #f8faff);
  transition: all 0.2s ease;
}

.register-evidence-drop:hover {
  border-color: var(--season-accent, var(--blue, #326fe5));
  background: var(--season-highlight, rgba(50, 111, 229, 0.05));
}

.register-evidence-drop.is-drag {
  border-color: var(--season-accent, var(--blue, #326fe5)) !important;
  background: var(--season-highlight, rgba(50, 111, 229, 0.12)) !important;
  box-shadow: 0 0 0 4px var(--season-glow, rgba(50, 111, 229, 0.2)) !important;
}

.register-evidence-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--season-glow, rgba(50, 111, 229, 0.12));
  color: var(--season-accent, var(--blue, #326fe5));
  font-size: 20px;
  border: 1px solid rgba(50, 111, 229, 0.2);
  transition: all 0.2s ease;
}

.register-evidence-copy {
  min-width: 0;
  flex: 1;
}

.register-evidence-copy b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.register-evidence-copy small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.register-evidence-name {
  margin-top: 6px;
  color: var(--green, #178553);
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.register-evidence-drop input[type=file] {
  max-width: 250px;
  font-size: 11px;
  color: var(--ink);
}

.register-evidence-drop input[type=file]::file-selector-button,
.register-evidence-drop input[type=file]::-webkit-file-upload-button {
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid var(--line, #cbd5e1);
  background: var(--card, var(--paper, #f1f5f9));
  color: var(--ink, #1c2737);
  transition: all 0.2s ease;
  margin-right: 10px;
}

.register-evidence-drop input[type=file]::file-selector-button:hover,
.register-evidence-drop input[type=file]::-webkit-file-upload-button:hover {
  background: var(--season-accent, var(--blue, #326fe5));
  color: #ffffff;
  border-color: var(--season-accent, var(--blue, #326fe5));
}

/* Modo Nocturno (Dark Mode) para Evidencia */
[data-mode="night"] .register-evidence,
body[data-mode="night"] .register-evidence {
  background: rgba(20, 29, 42, 0.88) !important;
  border-color: #3a4b62 !important;
}

[data-mode="night"] .register-evidence-drop,
body[data-mode="night"] .register-evidence-drop {
  background: rgba(20, 29, 42, 0.88) !important;
  border: 1.5px dashed #3a4b62 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-mode="night"] .register-evidence-drop:hover,
body[data-mode="night"] .register-evidence-drop:hover {
  border-color: var(--season-accent, #60a5fa) !important;
  background: rgba(26, 38, 54, 0.95) !important;
}

[data-mode="night"] .register-evidence-drop.is-drag,
body[data-mode="night"] .register-evidence-drop.is-drag {
  border-color: var(--season-accent, #60a5fa) !important;
  background: rgba(30, 46, 68, 0.95) !important;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25) !important;
}

[data-mode="night"] .register-evidence-icon,
body[data-mode="night"] .register-evidence-icon {
  background: rgba(45, 65, 95, 0.5) !important;
  color: var(--season-accent, #60a5fa) !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

[data-mode="night"] .register-evidence-copy b,
body[data-mode="night"] .register-evidence-copy b {
  color: #f1f5f9 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-mode="night"] .register-evidence-copy small,
body[data-mode="night"] .register-evidence-copy small {
  color: #94a3b8 !important;
}

[data-mode="night"] .register-evidence-name,
body[data-mode="night"] .register-evidence-name {
  color: #4ade80 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

[data-mode="night"] .register-evidence-drop input[type=file]::file-selector-button,
[data-mode="night"] .register-evidence-drop input[type=file]::-webkit-file-upload-button,
body[data-mode="night"] .register-evidence-drop input[type=file]::file-selector-button,
body[data-mode="night"] .register-evidence-drop input[type=file]::-webkit-file-upload-button {
  background: #253346 !important;
  color: #f1f5f9 !important;
  border-color: #43556d !important;
}

[data-mode="night"] .register-evidence-drop input[type=file]::file-selector-button:hover,
[data-mode="night"] .register-evidence-drop input[type=file]::-webkit-file-upload-button:hover,
body[data-mode="night"] .register-evidence-drop input[type=file]::file-selector-button:hover,
body[data-mode="night"] .register-evidence-drop input[type=file]::-webkit-file-upload-button:hover {
  background: var(--season-accent, #3b82f6) !important;
  color: #ffffff !important;
  border-color: var(--season-accent, #60a5fa) !important;
}

/* Previews de evidencia en historial y modales */
[data-mode="night"] .evidence-preview,
body[data-mode="night"] .evidence-preview {
  background: #151e2a !important;
  border-color: #303b4a !important;
}

[data-mode="night"] .evidence-pdf,
body[data-mode="night"] .evidence-pdf,
[data-mode="night"] .evidence-list .evidence-image,
body[data-mode="night"] .evidence-list .evidence-image {
  background: #111823 !important;
  border-color: #303b4a !important;
}.register-summary{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:14px;padding:13px 14px;border:1px solid #dbe6f4;border-radius:10px;background:#f6f9fe}.register-summary-title{font-size:12px;font-weight:750}.register-summary-detail{font-size:10px;color:var(--muted);margin-top:4px}.register-summary-badge{padding:6px 10px;border-radius:999px;background:#eaf0fb;color:#3c5e9a;font-size:10px;font-weight:750;white-space:nowrap}@media(max-width:700px){.register-progress{grid-template-columns:1fr;gap:6px}.register-step{padding:9px 11px}.register-network{grid-template-columns:1fr}.register-checks{grid-template-columns:1fr}.register-state{margin-left:0}.register-summary{align-items:flex-start;flex-direction:column}}
/* Keep registration labels and equipment names aligned at narrow and wide widths. */
#maintenance-registerPage .panelhead{align-items:center;flex-wrap:wrap}#maintenance-registerPage .panelhead>div:first-child{flex:1 1 260px;min-width:0}#maintenance-registerPage .register-tools{flex:1 1 360px;justify-content:flex-end}#maintenance-registerPage .register-count{flex:1 1 100%;text-align:right;margin:0}.register-device-title{min-width:0;overflow-wrap:anywhere;line-height:1.4}.register-device-meta{min-width:0}.register-device-meta .sub{margin:0;line-height:1.45;overflow-wrap:anywhere}.register-state{flex:0 0 auto}.register-network .field{min-width:0}.register-wifi .register-check{align-items:center}.register-wifi .register-check span{line-height:1.35}.register-checks .register-check{min-width:0;overflow-wrap:anywhere}@media(max-width:700px){#maintenance-registerPage .panelhead{align-items:flex-start}#maintenance-registerPage .register-tools{flex-basis:100%;justify-content:flex-start}#maintenance-registerPage .register-count{text-align:left}.register-device-head{align-items:flex-start}.register-device-meta{padding-right:0}.register-state{white-space:normal;text-align:center;max-width:120px}}


/* --- VISOR DE EVIDENCIAS Y SOPORTES EN TAMAÑO COMPLETO --- */
.evidence-gallery {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  margin: 12px 0;
}

.evidence-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card, var(--paper, #f8fafc));
  transition: all 0.2s ease;
}

.evidence-preview > a {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 220px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  padding: 10px;
  box-sizing: border-box;
}

.evidence-preview img,
.evidence-image {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 72vh !important;
  object-fit: contain !important;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.evidence-preview img:hover,
.evidence-image:hover {
  transform: scale(1.01);
}

.evidence-pdf {
  width: 100%;
  height: min(72vh, 750px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f5f7fa;
}

.evidence-file-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* Modo Nocturno (Dark Mode) para el Visor de Evidencias */
[data-mode="night"] .evidence-preview,
body[data-mode="night"] .evidence-preview {
  background: #151e2a !important;
  border-color: #303b4a !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

[data-mode="night"] .evidence-preview > a,
body[data-mode="night"] .evidence-preview > a {
  background: rgba(10, 16, 24, 0.6) !important;
}

[data-mode="night"] .evidence-preview img,
[data-mode="night"] .evidence-image,
body[data-mode="night"] .evidence-preview img,
body[data-mode="night"] .evidence-image {
  background: transparent !important;
  border: 1px solid #303b4a !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
}

[data-mode="night"] .evidence-pdf,
body[data-mode="night"] .evidence-pdf {
  background: #111823 !important;
  border-color: #303b4a !important;
}

[data-mode="night"] .evidence-file-label,
body[data-mode="night"] .evidence-file-label {
  color: #f1f5f9 !important;
}

/* Maintenance tables: readable columns and consistent action controls. */
#maintenanceList .tablewrap table{min-width:1120px;table-layout:fixed}#maintenanceList th:nth-child(1){width:17%}#maintenanceList th:nth-child(2){width:12%}#maintenanceList th:nth-child(3){width:12%}#maintenanceList th:nth-child(4){width:18%}#maintenanceList th:nth-child(5){width:13%}#maintenanceList th:nth-child(6){width:12%}#maintenanceList th:nth-child(7){width:16%}#historyTable table{min-width:1130px;table-layout:fixed}#historyTable th:nth-child(1){width:20%}#historyTable th:nth-child(2){width:8%}#historyTable th:nth-child(3){width:12%}#historyTable th:nth-child(4),#historyTable th:nth-child(5){width:11%}#historyTable th:nth-child(6){width:16%}#historyTable th:nth-child(7){width:11%}#historyTable th:nth-child(8){width:11%}#maintenanceList td,#historyTable td{overflow-wrap:normal;word-break:normal}#maintenanceList td[data-label="Técnico"],#historyTable td[data-label="Técnico"],#maintenanceList td[data-label="Programación / realización"],#historyTable td[data-label="Programado"],#historyTable td[data-label="Realizado"]{white-space:nowrap}.rowactions{display:flex;flex-wrap:wrap;gap:5px;min-width:200px}.rowactions .sm-btn,.support-btn{white-space:nowrap}.support-btn{color:#275bb8;border-color:#d1def5}#historyTable .sm-btn{white-space:nowrap}
@media(max-width:760px){#maintenanceList .tablewrap,#historyTable{overflow:visible}#maintenanceList .tablewrap table,#historyTable table{min-width:0;width:100%;table-layout:auto;border-collapse:separate;border-spacing:0}#maintenanceList thead,#historyTable thead{display:none}#maintenanceList tbody,#historyTable tbody{display:grid;gap:10px;padding:10px}#maintenanceList tbody tr,#historyTable tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}#maintenanceList tbody tr:hover td,#historyTable tbody tr:hover td{background:transparent}#maintenanceList tbody td,#historyTable tbody td{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:6px 4px;border:0;border-top:0;font-size:12px;white-space:normal;overflow-wrap:anywhere}#maintenanceList tbody td:before,#historyTable tbody td:before{content:attr(data-label);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8190a2}#maintenanceList tbody td[data-label="Área / subárea"],#maintenanceList tbody td[data-label="Acciones"],#historyTable tbody td[data-label="Área / subárea"],#historyTable tbody td[data-label="Acciones"]{grid-column:1/-1}#maintenanceList tbody td[data-label="Acciones"] .rowactions{min-width:0;width:100%}#maintenanceList tbody td[data-label="Acciones"] .sm-btn,#historyTable tbody td[data-label="Acciones"] .sm-btn{white-space:normal}#maintenanceList .equip{align-items:flex-start}#historyTable td[data-label="Técnico"]{white-space:normal}}
.view-switch{display:flex;gap:7px;margin:0 0 12px}.view-switch .is-active{background:#eaf1ff;color:#245dc4;border-color:#bfd0f2}.maintenance-alert-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.maintenance-alert-summary>div{display:flex;flex-direction:column;gap:3px;margin-right:auto}.maintenance-alert-summary>div span,.calendar-event small{font-size:11px;color:#728096}.alert-late{color:#b62936}.alert-upcoming{color:#245dc4}.calendar-toolbar{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px}.calendar-toolbar h2{min-width:170px;text-align:center}.calendar-weekdays,.maintenance-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.calendar-weekdays span{text-align:center;padding:8px;color:#728096;font-size:11px;font-weight:700;text-transform:uppercase}.calendar-cell{min-height:105px;border:1px solid var(--line);padding:6px;overflow:hidden}.calendar-date{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:4px}.calendar-date span{color:#728096;font-size:10px}.calendar-cell.is-outside{background:#f7f9fc;color:#aab3bf}.calendar-cell.is-today{outline:2px solid #6a9bff;outline-offset:-2px}.calendar-event{font-size:10px;line-height:1.2;border-radius:4px;padding:3px 4px;margin:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-event small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pending-dot{background:#edf3ff;color:#315fae}.late-dot{background:#fff0f0;color:#ad3038}.done-dot{background:#e9f7f0;color:#16754b}.calendar-legend{display:flex;gap:16px;padding-top:12px;font-size:11px;color:#718096}.calendar-legend span{display:flex;align-items:center;gap:5px}.calendar-dot{width:8px;height:8px;border-radius:50%}.visit-progress{max-width:150px;margin-top:5px;font-size:10px;color:#74839a}.visit-progress>div{height:5px;background:#e8edf3;border-radius:9px;overflow:hidden;margin-top:3px}.visit-progress i{display:block;height:100%;background:#31a779;border-radius:9px}.calendar-more{color:#62738b}.maintenance-insights{margin-bottom:14px}.insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:12px}.insight-card{border:1px solid var(--line);border-radius:9px;padding:11px;background:#fbfcfe;display:flex;flex-direction:column;gap:5px;min-width:0;overflow-wrap:anywhere}.insight-card b{font-size:15px;color:#18334f}.insight-card span{font-size:11px;color:#728096}@media(max-width:650px){.calendar-cell{min-height:76px;padding:3px}.calendar-event{font-size:9px}.calendar-event small{display:none}.calendar-toolbar{flex-wrap:wrap}.maintenance-alert-summary{align-items:stretch}.maintenance-alert-summary>div{width:100%}}.asset-actions-menu{position:relative;display:inline-block}.asset-actions-menu summary{list-style:none;border:1px solid var(--line);border-radius:7px;padding:6px 9px;background:#fff;color:#40546b;font-size:11px;cursor:pointer;white-space:nowrap}.asset-actions-menu summary::-webkit-details-marker{display:none}.asset-actions-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:3;display:grid;gap:5px;min-width:150px;padding:7px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #162b451a}.asset-actions-pop .sm-btn{width:100%;text-align:left;white-space:normal}.selection-review{border:1px solid #d7e4f6;border-radius:8px;background:#f7faff;padding:9px 11px;margin:0 0 9px;font-size:11px;color:#50647d}.selection-review b{color:#1d3552}.selection-review small{display:block;color:#6d7e93;margin-top:4px}.evidence-file-meta{display:block;min-height:16px;margin-top:5px;color:#536980;font-size:10px}.inventory-table-wrap{overflow-x:auto}.inventory-table-wrap table{min-width:900px}.inventory-table-wrap th:last-child,.inventory-table-wrap td:last-child{position:sticky;right:0;background:#fff;box-shadow:-5px 0 8px #162b4509;z-index:1}.inventory-table-wrap th:last-child{background:#fafbfc;z-index:2}.missing-identity{display:inline-block;margin-left:5px;color:#b5741e;font-size:9px;font-style:normal}.download-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:17px}.download-controls label{font-size:11px;font-weight:600;color:#5e6d7e}.download-controls .select{min-width:250px}.download-controls .sub{margin:0}@media(max-width:760px){.selection-review{line-height:1.5}.asset-actions-pop{position:fixed;right:12px;top:auto}} /* ========================================================================= */
/* FASE 1: PALETAS HOMOGÉNEAS, FRESCAS Y DESCANSADAS (MODO CLÍNICO & ERGONÓMICO) */
/* ========================================================================= */

/* Temas Diurnos Profesionales */
:root[data-season="classic"],body[data-season="classic"]{
  --paper:#f8fafc;--white:#ffffff;--navy:#0f172a;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;
  --blue:#0284c7;--season-accent:#0284c7;--season-highlight:#e0f2fe;--season-glow:rgba(2,132,199,.06);
  --green:#059669;--red:#dc2626;--amber:#d97706;--mint:#ecfdf5;--rose:#fef2f2;--sand:#fffbeb;
}
:root[data-season="spring"],body[data-season="spring"]{
  --paper:#f4fbf7;--white:#ffffff;--navy:#064e3b;--ink:#064e3b;--muted:#047857;--line:#d1fae5;
  --blue:#0d9488;--season-accent:#0d9488;--season-highlight:#ccfbf1;--season-glow:rgba(13,148,136,.06);
  --green:#059669;--red:#dc2626;--amber:#d97706;--mint:#ecfdf5;--rose:#fef2f2;--sand:#fffbeb;
}
:root[data-season="summer"],body[data-season="summer"]{
  --paper:#f8f9ff;--white:#ffffff;--navy:#1e1b4b;--ink:#1e1b4b;--muted:#475569;--line:#e0e7ff;
  --blue:#4f46e5;--season-accent:#4f46e5;--season-highlight:#e0e7ff;--season-glow:rgba(79,70,229,.06);
  --green:#059669;--red:#dc2626;--amber:#d97706;--mint:#ecfdf5;--rose:#fef2f2;--sand:#fffbeb;
}
:root[data-season="autumn"],body[data-season="autumn"]{
  --paper:#f8fafc;--white:#ffffff;--navy:#1e293b;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;
  --blue:#475569;--season-accent:#334155;--season-highlight:#f1f5f9;--season-glow:rgba(71,85,105,.05);
  --green:#059669;--red:#dc2626;--amber:#d97706;--mint:#ecfdf5;--rose:#fef2f2;--sand:#fffbeb;
}
:root[data-season="halloween"],body[data-season="halloween"]{
  --paper:#fdfaf7;--white:#ffffff;--navy:#3a2012;--ink:#2b180d;--muted:#785848;--line:#f5e5d9;
  --blue:#c25e1a;--season-accent:#d97706;--season-highlight:#fef3c7;--season-glow:rgba(217,119,6,.06);
  --green:#059669;--red:#dc2626;--amber:#d97706;--mint:#ecfdf5;--rose:#fef2f2;--sand:#fffbeb;
}
:root[data-season="christmas"],body[data-season="christmas"]{
  --paper:#f4faf6;--white:#ffffff;--navy:#0c3626;--ink:#0c281d;--muted:#4b6f5d;--line:#d6ede0;
  --blue:#15803d;--season-accent:#16a34a;--season-highlight:#dcfce7;--season-glow:rgba(22,163,74,.06);
  --green:#16a34a;--red:#dc2626;--amber:#d97706;--mint:#ecfdf5;--rose:#fef2f2;--sand:#fffbeb;
}
:root[data-season="newyear"],body[data-season="newyear"]{
  --paper:#f7f9fd;--white:#ffffff;--navy:#12213d;--ink:#0f1d35;--muted:#576b8a;--line:#dae4f5;
  --blue:#2563eb;--season-accent:#3b82f6;--season-highlight:#dbeafe;--season-glow:rgba(59,130,246,.06);
  --green:#059669;--red:#dc2626;--amber:#d97706;--mint:#ecfdf5;--rose:#fef2f2;--sand:#fffbeb;
}
:root[data-season="valentine"],body[data-season="valentine"]{
  --paper:#faf6f8;--white:#ffffff;--navy:#3b1d2e;--ink:#2a1521;--muted:#704d60;--line:#f5d0e3;
  --blue:#be185d;--season-accent:#db2777;--season-highlight:#fce7f3;--season-glow:rgba(219,39,119,.06);
  --green:#059669;--red:#dc2626;--amber:#d97706;--mint:#ecfdf5;--rose:#fef2f2;--sand:#fffbeb;
}
:root[data-season="easter"],body[data-season="easter"]{
  --paper:#f9f7fc;--white:#ffffff;--navy:#2e1f47;--ink:#221735;--muted:#6b5a82;--line:#e8dff4;
  --blue:#7c3aed;--season-accent:#8b5cf6;--season-highlight:#ede9fe;--season-glow:rgba(139,92,246,.06);
  --green:#059669;--red:#dc2626;--amber:#d97706;--mint:#ecfdf5;--rose:#fef2f2;--sand:#fffbeb;
}

body{background:var(--paper);transition:background .25s ease,color .2s ease}
body::before{display:none !important}

/* Superficies principales, Sidebar y Header */
.shell{position:relative;z-index:1}
.sidebar{
  background:#0f172a !important;
  color:#94a3b8;
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:4px 0 24px rgba(0,0,0,.08);
}
.sidebar .logo{background:var(--season-accent,#0284c7) !important;box-shadow:0 4px 12px rgba(2,132,199,.25)}
.sidebar .brand strong{color:#f8fafc}
.nav button{color:#94a3b8;transition:all .18s ease;font-weight:500}
.nav button:hover{background:rgba(255,255,255,.06);color:#f8fafc}
.nav button.active{
  background:rgba(255,255,255,.08) !important;
  color:#ffffff !important;
  box-shadow:inset 3px 0 var(--season-accent,#0284c7) !important;
  font-weight:600;
}

.topbar{
  position:sticky;top:0;z-index:4;
  background:var(--white) !important;
  border-bottom:1px solid var(--line) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}

/* Paneles, Métricas y Tarjetas Ligeras y Homogéneas */
.panel,.stat,.modal,.maintenance-status-button,.maintenance-calendar-panel,.maintenance-insights,.insight-card,.register-device,.listpanel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 1px 3px 0 rgba(0,0,0,.03),0 1px 2px -1px rgba(0,0,0,.03);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.panel::before,.stat::before,.modal::before,.maintenance-insights::before,.insight-card::before,.register-device::before{
  display:none !important;
}
.panel:hover,.stat:hover{
  border-color:color-mix(in srgb,var(--season-accent) 40%,var(--line));
  box-shadow:0 4px 14px -2px rgba(0,0,0,.06);
  transform:translateY(-1px);
}

.theme-picker,.mode-switch,.glass-toggle,.iconbtn{
  background:var(--white);
  border:1px solid var(--line);
  color:var(--ink);
  box-shadow:none;
}
.theme-picker select{
  color:var(--ink);
  border:0;background:transparent;
  font:600 11px 'DM Sans',sans-serif;outline:0;cursor:pointer;max-width:140px;
}

.primary{
  background:var(--season-accent,#0284c7) !important;
  color:#fff !important;
  border:0;
  box-shadow:0 2px 8px color-mix(in srgb,var(--season-accent) 30%,transparent) !important;
  transition:all .18s ease !important;
}
.primary:hover{
  filter:brightness(1.08) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--season-accent) 40%,transparent) !important;
}
.eyebrow{color:var(--season-accent);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.fill{background:var(--season-accent)}
.stat-ico,.assist-icon,.register-summary-badge{
  background:var(--season-highlight);
  color:var(--season-accent);
}

/* ========================================================================= */
/* MODO NOCTURNO: DARK SLATE CONFORT (DESCANSO VISUAL TOTAL Y ALTA CLARIDAD) */
/* ========================================================================= */
:root[data-mode="night"],body[data-mode="night"]{
  color-scheme:dark;
  --paper:#0b1120;
  --navy:#0f172a;
  --white:#1e293b;
  --bg-card:#0f172a;
  --ink:#f8fafc;
  --muted:#94a3b8;
  --line:#334155;
  --green:#34d399;
  --red:#f87171;
  --amber:#fbbf24;
  --mint:rgba(52,211,153,.14);
  --rose:rgba(248,113,113,.14);
  --sand:rgba(251,191,36,.14);
  --shadow:0 10px 28px rgba(0,0,0,.35);
}
:root[data-mode="night"][data-season="classic"],body[data-mode="night"][data-season="classic"]{
  --blue:#38bdf8;--season-accent:#38bdf8;--season-highlight:rgba(56,189,248,.12);--season-glow:rgba(56,189,248,.04);
}
:root[data-mode="night"][data-season="spring"],body[data-mode="night"][data-season="spring"]{
  --blue:#2dd4bf;--season-accent:#2dd4bf;--season-highlight:rgba(45,212,191,.12);--season-glow:rgba(45,212,191,.04);
}
:root[data-mode="night"][data-season="summer"],body[data-mode="night"][data-season="summer"]{
  --blue:#818cf8;--season-accent:#818cf8;--season-highlight:rgba(129,140,248,.12);--season-glow:rgba(129,140,248,.04);
}
:root[data-mode="night"][data-season="autumn"],body[data-mode="night"][data-season="autumn"]{
  --blue:#94a3b8;--season-accent:#cbd5e1;--season-highlight:rgba(203,213,225,.1);--season-glow:rgba(203,213,225,.03);
}
:root[data-mode="night"][data-season="halloween"],body[data-mode="night"][data-season="halloween"]{
  --blue:#fb923c;--season-accent:#fb923c;--season-highlight:rgba(251,146,60,.12);--season-glow:rgba(251,146,60,.04);
}
:root[data-mode="night"][data-season="christmas"],body[data-mode="night"][data-season="christmas"]{
  --blue:#4ade80;--season-accent:#4ade80;--season-highlight:rgba(74,222,128,.12);--season-glow:rgba(74,222,128,.04);
}
:root[data-mode="night"][data-season="newyear"],body[data-mode="night"][data-season="newyear"]{
  --blue:#60a5fa;--season-accent:#60a5fa;--season-highlight:rgba(96,165,250,.12);--season-glow:rgba(96,165,250,.04);
}
:root[data-mode="night"][data-season="valentine"],body[data-mode="night"][data-season="valentine"]{
  --blue:#f472b6;--season-accent:#f472b6;--season-highlight:rgba(244,114,182,.12);--season-glow:rgba(244,114,182,.04);
}
:root[data-mode="night"][data-season="easter"],body[data-mode="night"][data-season="easter"]{
  --blue:#a78bfa;--season-accent:#a78bfa;--season-highlight:rgba(167,139,250,.12);--season-glow:rgba(167,139,250,.04);
}
:root[data-mode="night"] body,body[data-mode="night"]{
  color:var(--ink);
  background:var(--paper) !important;
}

:root[data-mode="night"] .topbar,body[data-mode="night"] .topbar{
  background:#0f172a !important;
  border-color:#334155 !important;
  color:var(--ink) !important;
}
:root[data-mode="night"] .panel,:root[data-mode="night"] .stat,:root[data-mode="night"] .modal,
:root[data-mode="night"] .maintenance-status-button,:root[data-mode="night"] .maintenance-calendar-panel,
:root[data-mode="night"] .maintenance-insights,:root[data-mode="night"] .insight-card,:root[data-mode="night"] .register-device,
:root[data-mode="night"] .listpanel,body[data-mode="night"] .panel,body[data-mode="night"] .stat,body[data-mode="night"] .modal{
  background:#1e293b !important;
  border-color:#334155 !important;
  color:#f8fafc !important;
  box-shadow:0 4px 16px rgba(0,0,0,.25) !important;
}
:root[data-mode="night"] .panel:hover,:root[data-mode="night"] .stat:hover{
  border-color:var(--season-accent) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.35) !important;
}
:root[data-mode="night"] input:not([type=checkbox]):not([type=radio]),:root[data-mode="night"] select,:root[data-mode="night"] textarea,
:root[data-mode="night"] .asset-actions-menu summary,:root[data-mode="night"] .asset-actions-pop,:root[data-mode="night"] .iconbtn,
:root[data-mode="night"] .secondary,:root[data-mode="night"] .sm-btn,:root[data-mode="night"] .calendar-cell,
body[data-mode="night"] input:not([type=checkbox]):not([type=radio]),body[data-mode="night"] select,body[data-mode="night"] textarea{
  background-color:#0f172a !important;
  color:var(--ink) !important;
  border-color:#334155 !important;
}
:root[data-mode="night"] select option,body[data-mode="night"] select option{
  background:#0f172a !important;
  color:#f8fafc !important;
}
:root[data-mode="night"] table th,body[data-mode="night"] table th{
  background:#0f172a !important;
  color:#94a3b8 !important;
  border-color:#334155 !important;
}
:root[data-mode="night"] table td,body[data-mode="night"] table td,:root[data-mode="night"] .inventory-table-wrap td:last-child{
  background:transparent !important;
  color:#e2e8f0 !important;
  border-color:#334155 !important;
}
:root[data-mode="night"] .inventory-table-wrap th:last-child{background:#0f172a !important}
:root[data-mode="night"] tr:hover td,body[data-mode="night"] tr:hover td{background:rgba(255,255,255,.03) !important}

:root[data-mode="night"] .theme-picker,:root[data-mode="night"] .mode-switch,:root[data-mode="night"] .glass-toggle,
body[data-mode="night"] .theme-picker,body[data-mode="night"] .mode-switch,body[data-mode="night"] .glass-toggle{
  background:#1e293b !important;
  border-color:#334155 !important;
  color:#f8fafc !important;
}
:root[data-mode="night"] .theme-picker select,body[data-mode="night"] .theme-picker select{
  color:#f8fafc !important;
}
:root[data-mode="night"] .nav button.active,body[data-mode="night"] .nav button.active{
  color:#fff !important;
}
:root[data-mode="night"] .assist,:root[data-mode="night"] .selection-review,:root[data-mode="night"] .register-summary,:root[data-mode="night"] .register-step,
body[data-mode="night"] .assist,body[data-mode="night"] .selection-review{
  background:#0f172a !important;
  border-color:#334155 !important;
  color:#e2e8f0 !important;
}
:root[data-mode="night"] .sub,:root[data-mode="night"] small,body[data-mode="night"] .sub{
  color:#94a3b8 !important;
}
:root[data-mode="night"] .stat-ico,:root[data-mode="night"] .assist-icon,:root[data-mode="night"] .register-summary-badge{
  background:rgba(255,255,255,.08) !important;
  color:var(--season-accent) !important;
}

/* Callouts y Paneles Notificadores Armonizados */
.theme-callout-info{
  background:var(--season-highlight,#e0f2fe);
  border:1px solid color-mix(in srgb,var(--season-accent) 30%,transparent);
  border-radius:10px;padding:12px 14px;color:var(--ink);line-height:1.55;
}
.theme-callout-info .theme-callout-title{
  font-size:12.5px;font-weight:700;color:var(--season-accent);margin-bottom:6px;
  display:flex;align-items:center;gap:6px;
}
.theme-callout-info .theme-callout-body{display:flex;flex-direction:column;gap:6px;font-size:12px}
.theme-callout-info label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:inherit}
.theme-callout-info input[type=checkbox]{accent-color:var(--season-accent)}

.theme-callout-danger{
  background:var(--rose,#fef2f2);
  border:1px solid rgba(239,68,68,.3);
  border-radius:10px;padding:12px 14px;color:var(--red,#dc2626);
}
.theme-panel-amber{
  background:var(--sand,#fffbeb);
  border:1.5px solid rgba(245,158,11,.3);
  border-radius:10px;padding:16px;
}
.theme-panel-amber h2{color:#b45309}
.theme-panel-amber .sub{color:#92400e}
.theme-panel-amber .empty-state{color:#b45309}
.theme-panel-amber .empty-state p{color:#92400e}
.theme-panel-amber table{background:var(--white,#fff);border:1px solid rgba(245,158,11,.25);border-radius:8px}
.theme-panel-amber table thead tr,.theme-panel-amber table th{background:var(--sand,#fffbeb);color:#b45309}

:root[data-mode="night"] .theme-callout-info,body[data-mode="night"] .theme-callout-info{
  background:rgba(15,23,42,.6) !important;
  border-color:rgba(56,189,248,.3) !important;
  color:#e2e8f0 !important;
}
:root[data-mode="night"] .theme-callout-info .theme-callout-title,body[data-mode="night"] .theme-callout-info .theme-callout-title{
  color:var(--season-accent) !important;
}
:root[data-mode="night"] .theme-callout-info .theme-callout-body,body[data-mode="night"] .theme-callout-info .theme-callout-body{
  color:#cbd5e1 !important;
}
:root[data-mode="night"] .theme-callout-danger,body[data-mode="night"] .theme-callout-danger{
  background:rgba(69,26,33,.6) !important;border-color:rgba(239,68,68,.35) !important;color:#fca5a5 !important;
}
:root[data-mode="night"] .theme-panel-amber,body[data-mode="night"] .theme-panel-amber{
  background:rgba(43,34,24,.6) !important;border-color:rgba(245,158,11,.35) !important;
}
:root[data-mode="night"] .theme-panel-amber h2,body[data-mode="night"] .theme-panel-amber h2{color:#fbbf24 !important}
:root[data-mode="night"] .theme-panel-amber .sub,body[data-mode="night"] .theme-panel-amber .sub{color:#fcd34d !important}
:root[data-mode="night"] .theme-panel-amber .empty-state,body[data-mode="night"] .theme-panel-amber .empty-state{color:#fde68a !important}
:root[data-mode="night"] .theme-panel-amber table,body[data-mode="night"] .theme-panel-amber table{
  background:rgba(21,29,41,.85) !important;border-color:rgba(245,158,11,.2) !important;
}
:root[data-mode="night"] .theme-panel-amber table thead tr,:root[data-mode="night"] .theme-panel-amber table th{
  background:rgba(30,41,59,.95) !important;color:#fde68a !important;
}

:root[data-mode="night"] .login-alert,body[data-mode="night"] .login-alert{
  background:rgba(69,26,33,.7) !important;border-color:rgba(239,68,68,.35) !important;color:#fca5a5 !important;
}
:root[data-mode="night"] .btn-action-perm,body[data-mode="night"] .btn-action-perm{
  background:rgba(30,45,66,.75) !important;border-color:rgba(99,137,186,.35) !important;color:#93c5fd !important;
}
:root[data-mode="night"] #serverSyncBadge,body[data-mode="night"] #serverSyncBadge{
  background:#1e293b !important;border-color:#334155 !important;color:#94a3b8 !important;
}
:root[data-mode="night"] .bars,body[data-mode="night"] .bars{
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 33px,rgba(255,255,255,.05) 34px) !important;
}
:root[data-mode="night"] .yaxis,body[data-mode="night"] .yaxis,:root[data-mode="night"] .bar-label,body[data-mode="night"] .bar-label,:root[data-mode="night"] .legend,body[data-mode="night"] .legend{
  color:var(--muted) !important;
}
:root[data-mode="night"] .track,body[data-mode="night"] .track{
  background:#0f172a !important;border-color:#334155 !important;
}
:root[data-mode="night"] .assetWizardIndicator,body[data-mode="night"] .assetWizardIndicator{
  background:rgba(255,255,255,.04) !important;border-color:#334155 !important;color:#94a3b8 !important;
}
:root[data-mode="night"] .assetWizardIndicator.active,body[data-mode="night"] .assetWizardIndicator.active{
  background:rgba(56,189,248,.12) !important;border-color:var(--season-accent) !important;color:var(--season-accent) !important;
}
:root[data-mode="night"] .assetWizardIndicator.active span,body[data-mode="night"] .assetWizardIndicator.active span{
  background:var(--season-accent) !important;color:#0f172a !important;
}
:root[data-mode="night"] #relocateAssetCard,body[data-mode="night"] #relocateAssetCard{
  background:rgba(15,23,42,.6) !important;border-color:#334155 !important;color:var(--ink) !important;
}
:root[data-mode="night"] #singleMaintAssetCard,body[data-mode="night"] #singleMaintAssetCard{
  background:rgba(15,23,42,.6) !important;border-color:var(--season-accent,#38bdf8) !important;color:var(--ink) !important;
}
:root[data-mode="night"] .single-maint-spec-grid,body[data-mode="night"] .single-maint-spec-grid{
  background:rgba(15,23,42,.85) !important;border-color:#334155 !important;color:var(--ink) !important;
}
:root[data-mode="night"] #singleMaintSearchResults,body[data-mode="night"] #singleMaintSearchResults{
  background:#1e293b !important;border-color:#334155 !important;color:#f8fafc !important;
}
:root[data-mode="night"] #upsModal form>div,body[data-mode="night"] #upsModal form>div{
  background:#0f172a !important;border-color:#334155 !important;
}
:root[data-mode="night"] #upsModal form>div>div:first-child,body[data-mode="night"] #upsModal form>div>div:first-child{
  color:var(--season-accent) !important;
}
:root[data-mode="night"] #assetWizardSaveAndClone,body[data-mode="night"] #assetWizardSaveAndClone{
  background:rgba(30,45,66,.75) !important;border-color:rgba(99,137,186,.45) !important;color:#93c5fd !important;
}

/* Transición suave de entrada de secciones */
.section-enter{animation:sectionEnter .35s cubic-bezier(.16,1,.3,1) both}
@keyframes sectionEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.section-enter .heading{animation:headingEnter .3s .03s cubic-bezier(.16,1,.3,1) both}
@keyframes headingEnter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.nav button{transition:background .2s ease,color .2s ease,transform .18s ease}
.nav button:hover{transform:translateX(2px)}
@media(prefers-reduced-motion:reduce){.section-enter,.section-enter .heading{animation:none!important}.nav button:hover{transform:none}}

/* Soporte de efecto de vidrio ligero (opcional) */
.glass-toggle{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 8px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);cursor:pointer;transition:all .2s ease}
.glass-toggle:hover{border-color:var(--season-accent)}
.glass-toggle svg{width:16px;height:16px;fill:none;stroke:var(--season-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.glass-switch{width:27px;height:15px;padding:2px;border-radius:99px;background:#cbd5e1;display:flex;align-items:center;transition:background .25s ease}
.glass-switch i{width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
:root[data-glass="on"] .glass-switch,body[data-glass="on"] .glass-switch{background:var(--season-accent)}
:root[data-glass="on"] .glass-switch i,body[data-glass="on"] .glass-switch i{transform:translateX(12px)}
:root[data-mode="night"] .glass-switch{background:#475569}

:root[data-glass="on"] .panel,:root[data-glass="on"] .stat,:root[data-glass="on"] .modal,:root[data-glass="on"] .topbar{
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
@media(max-width:760px){.glass-toggle{height:30px;padding:0 6px;gap:5px}}
.newyear-fireworks{pointer-events:none}

.register-wizard-panel[hidden]{display:none!important}.register-wizard-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.register-wizard-count{margin-right:auto;font-size:12px;color:var(--muted);font-weight:700}.register-wizard-controls button[hidden]{display:none!important}.register-step-arrive{animation:sectionEnter .42s cubic-bezier(.2,.8,.2,1) both}:root[data-mode="night"] .register-wizard-controls{background:rgba(27,36,48,.82);border-color:#303b4a}@media(max-width:600px){.register-wizard-controls{position:sticky;bottom:8px;z-index:3;flex-wrap:wrap;padding:10px;background:rgba(255,255,255,.9)}.register-wizard-controls .primary,.register-wizard-controls .secondary{flex:1}}

/* Keep row actions readable and prevent dropdowns from being clipped by scrollable tables */
#historyTable table{min-width:1240px}#historyTable td[data-label="Soportes"]{min-width:145px}#historyTable td[data-label="Acciones"]{min-width:135px}.rowactions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:120px}#historyTable .support-btn{white-space:normal;max-width:125px;line-height:1.25}.inventory-table-wrap td:last-child{overflow:visible}.asset-actions-menu{position:static}.asset-actions-pop{position:fixed;z-index:1000;min-width:150px;max-width:min(230px,calc(100vw - 24px));max-height:min(65vh,380px);overflow-y:auto;background:var(--white);color:var(--ink);border:1px solid var(--line);box-shadow:0 14px 34px rgba(10,25,45,.22)}.asset-actions-pop .sm-btn{min-height:32px;padding:7px 9px;white-space:normal;line-height:1.25;text-align:left}.asset-actions-menu summary{position:relative;z-index:1;cursor:pointer}.asset-actions-menu[open] summary{border-color:var(--season-accent);color:var(--season-accent)}:root[data-mode="night"] .asset-actions-pop,body[data-mode="night"] .asset-actions-pop{background:#18212d;border-color:#45536a;color:#edf2f8;box-shadow:0 16px 36px rgba(0,0,0,.42)}:root[data-mode="night"] .asset-actions-pop .sm-btn,body[data-mode="night"] .asset-actions-pop .sm-btn{background:#202b39;color:#edf2f8;border-color:#45536a}
@media(max-width:760px){#historyTable table{min-width:0}#historyTable td[data-label="Soportes"],#historyTable td[data-label="Acciones"]{min-width:0}.rowactions{min-width:0}}

.asset-actions-menu summary:focus-visible,.sm-btn:focus-visible,.primary:focus-visible,.secondary:focus-visible{outline:2px solid var(--season-accent);outline-offset:2px}:root[data-mode="night"] .insight-card b,body[data-mode="night"] .insight-card b{color:#edf2f8}
.asset-actions-pop[hidden]{display:none!important}

/* Reserve dedicated width and modern styling for history table */
.history-insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}
.history-kpi-card{display:flex;align-items:center;gap:12px;padding:12px 15px;background:var(--white,#fff);border:1px solid var(--line,#e2e8f0);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.03);transition:all .2s ease}
.history-kpi-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.06);border-color:color-mix(in srgb,var(--season-accent,#0284c7) 40%,var(--line,#e2e8f0))}
.history-kpi-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.history-kpi-body{display:flex;flex-direction:column;min-width:0}
.history-kpi-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#64748b);margin-bottom:2px}
.history-kpi-value{font-size:17px;font-weight:800;color:var(--ink,#0f172a);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-kpi-hint{font-size:11px;color:var(--muted,#64748b);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-mode="night"] .history-kpi-card{background:#1e293b;border-color:#334155}
:root[data-mode="night"] .history-kpi-value{color:#f8fafc}
#historyTable table{min-width:1180px;table-layout:fixed;border-collapse:separate;border-spacing:0}
#historyTable th{background:#f8fafc;color:#475569;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:12px 14px;border-bottom:2px solid #e2e8f0}
:root[data-mode="night"] #historyTable th{background:#1e293b;color:#94a3b8;border-bottom-color:#334155}
#historyTable td{padding:12px 14px;border-bottom:1px solid var(--line,#e2e8f0);vertical-align:middle;font-size:12.5px}
#historyTable tr:hover td{background:rgba(2,132,199,.025)}
:root[data-mode="night"] #historyTable tr:hover td{background:rgba(255,255,255,.02)}
#historyTable th:nth-child(1){width:15%}
#historyTable th:nth-child(2){width:6%;text-align:center}
#historyTable th:nth-child(3){width:15%}
#historyTable th:nth-child(4){width:9%}
#historyTable th:nth-child(5){width:9%}
#historyTable th:nth-child(6){width:12%}
#historyTable th:nth-child(7){width:17%}
#historyTable th:nth-child(8){width:8%;text-align:right}
#historyTable th:nth-child(9){width:9%;text-align:center}
#historyTable th:nth-child(10){width:7%;text-align:center}
#historyTable td[data-label="Soportes"],#historyTable td[data-label="Acciones"]{width:auto;min-width:0;padding-left:8px;padding-right:8px}
.history-tech-badge{display:inline-flex;align-items:center;gap:8px;max-width:100%}
.history-tech-avatar{width:28px;height:28px;border-radius:50%;background:#e0f2fe;color:#0284c7;font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
:root[data-mode="night"] .history-tech-avatar{background:#0369a1;color:#e0f2fe}
.history-tech-name{font-weight:600;color:var(--ink,#0f172a);white-space:normal;line-height:1.25;word-break:break-word}
:root[data-mode="night"] .history-tech-name{color:#f8fafc}
.history-status-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700;white-space:nowrap}
.history-status-pill.on-time{background:rgba(16,185,129,.12);color:#059669;border:1px solid rgba(16,185,129,.25)}
.history-status-pill.late{background:rgba(245,158,11,.12);color:#d97706;border:1px solid rgba(245,158,11,.25)}
.history-status-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.history-part-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:600;background:#f1f5f9;color:#334155;border:1px solid #cbd5e1;margin:2px 3px 2px 0;line-height:1.25}
:root[data-mode="night"] .history-part-pill{background:#334155;color:#e2e8f0;border-color:#475569}
.history-part-pill.upgrade{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
:root[data-mode="night"] .history-part-pill.upgrade{background:#1e3a8a;color:#bfdbfe;border-color:#3b82f6}
.history-delete-btn{background:transparent;color:#ef4444;border:1px solid rgba(239,68,68,.3);padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.history-delete-btn:hover{background:#ef4444;color:#fff;border-color:#ef4444}
@media(max-width:760px){#historyTable table{min-width:0;width:100%;table-layout:auto}#historyTable th:nth-child(n){width:auto}#historyTable td[data-label="Soportes"],#historyTable td[data-label="Acciones"]{min-width:0;width:auto}}

#dedicatedGpuFields{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.asset-ip-error{display:block;min-height:1em;margin-top:3px;color:#dc2626;font-size:11px;font-weight:600}.asset-ipv4-octet{min-width:0;text-align:center}#asset-ipv6{width:100%}
#assetChangeNoteField[hidden]{display:none!important}
#standardSubareaParentField[hidden]{display:none!important}
.asset-checkbox-control{display:flex;align-items:center;gap:9px;min-height:42px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;cursor:pointer}.asset-checkbox-control input{width:16px!important;height:16px;margin:0;padding:0;accent-color:var(--primary);flex:0 0 auto}.asset-checkbox-control span{font-size:12px;color:var(--text)}

#assetForm{max-height:90vh}#assetWizardProgress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 18px}.assetWizardIndicator{display:flex;align-items:center;gap:8px;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:10px;color:var(--muted);background:rgba(127,145,170,.06);font-size:12px}.assetWizardIndicator span{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:rgba(127,145,170,.16);font-weight:700}.assetWizardIndicator b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.assetWizardIndicator.active{border-color:var(--primary);color:var(--primary);background:rgba(49,105,232,.1)}.assetWizardIndicator.active span{background:var(--primary);color:#fff}.assetWizardPanel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.assetWizardPanel[hidden]{display:none!important}.assetWizardHeading{grid-column:1/-1;padding:2px 0 3px}.assetWizardHeading h3{margin:0 0 4px;font-size:16px}.assetWizardHeading p{margin:0;color:var(--muted);font-size:12px}.assetWizardFooter{position:sticky;bottom:-23px;z-index:5;margin:18px -23px -23px;padding:12px 23px 18px;border-top:1px solid var(--line);background:inherit;box-shadow:0 -8px 16px rgba(15,23,42,.06)}#assetWizardPrev{margin-right:auto}
@media(max-width:650px){#assetWizardProgress{grid-template-columns:repeat(4,minmax(130px,1fr));overflow-x:auto;padding-bottom:4px}.assetWizardPanel{grid-template-columns:1fr}.assetWizardHeading{grid-column:1}}

.assetWizardIndicator{appearance:none;width:100%;font-family:inherit;text-align:left;cursor:pointer}

/* --- LOGIN SCREEN & MODERN TRANSITIONS --- */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 25%, rgba(22, 40, 58, 0.94), rgba(10, 18, 30, 0.98));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ocultar asistente Gemini completamente en pantalla de Login y usuarios no autenticados */
body:not([data-user-role]) #hsjGeminiFabBtn,
body:not([data-user-role]) #hsjGeminiDrawer,
.login-overlay:not(.login-hidden) ~ #hsjGeminiFabBtn,
.login-overlay:not(.login-hidden) ~ #hsjGeminiDrawer,
#loginOverlay:not(.login-hidden) ~ #hsjGeminiFabBtn,
#loginOverlay:not(.login-hidden) ~ #hsjGeminiDrawer {
  display: none !important;
}

.login-overlay.login-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.02);
}

.login-container {
  width: min(440px, 92vw);
  margin: auto;
}

.login-card {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(225, 235, 245, 0.9);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 25px 60px -15px rgba(10, 25, 45, 0.4), 0 0 1px rgba(0, 0, 0, 0.15);
  animation: loginCardEnter 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
  overflow: hidden;
}

@keyframes loginCardEnter {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.login-card.is-shaking {
  animation: loginShake 0.45s ease-in-out;
}

@keyframes loginShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-9px); }
  40%, 80% { transform: translateX(9px); }
}

.login-card.is-logging-in {
  transform: scale(1.04);
  opacity: 0;
  filter: blur(6px);
  transition: all 0.4s ease;
}

.login-header {
  text-align: center;
  margin-bottom: 22px;
}

.login-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px;
  width: 100%;
}

.login-logo-img {
  height: 155px;
  width: auto;
  max-width: 330px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(15, 23, 42, 0.08));
}

body.dark .login-logo-wrap {
  background: #ffffff;
  border-radius: 16px;
  padding: 10px 20px;
  width: fit-content;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.login-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f2942;
  margin: 14px 0 6px;
  letter-spacing: -0.3px;
  text-align: center;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-alert {
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  animation: loginFadeIn 0.3s ease;
}

@keyframes loginFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}

.login-field label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-ico {
  position: absolute;
  left: 12px;
  font-size: 14px;
  color: #94a3b8;
  pointer-events: none;
}

.login-input {
  width: 100%;
  padding: 10px 38px 10px 36px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 13px;
  background: #fff;
  color: #1e293b;
  box-sizing: border-box;
  transition: all 0.2s ease;
  font-family: inherit;
}

.login-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.login-toggle-pw {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  font-size: 14px;
  color: #94a3b8;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-toggle-pw:hover {
  color: #475569;
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #64748b;
  margin-top: -2px;
}

.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.login-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  transition: all 0.2s ease;
  margin-top: 4px;
}

.login-submit-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.login-submit-btn:active {
  transform: translateY(0);
}

.login-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.25);
  transform: none;
  box-shadow: none;
}

body.dark .login-card {
  background: rgba(18, 30, 48, 0.98);
  border-color: rgba(71, 85, 105, 0.5);
  color: #f1f5f9;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
}

body.dark .login-title { color: #f8fafc; }
body.dark .login-subtitle { color: #94a3b8; }
body.dark .login-badge { background: rgba(37, 99, 235, 0.2); color: #60a5fa; }
body.dark .login-field label { color: #cbd5e1; }
body.dark .login-input { background: #0f172a; border-color: #334155; color: #f8fafc; }
body.dark .login-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25); }
body.dark .login-options { color: #94a3b8; }

/* --- TOPBAR USER PILL --- */
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px 3px 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-left: 6px;
  font-size: 11px;
}

.user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #326fe5, #1d4ed8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(50, 111, 229, 0.3);
}

.user-details {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.user-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 11px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-role-badge {
  font-size: 9px;
  color: #3b82f6;
  font-weight: 600;
}

body.dark .user-pill {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(71, 85, 105, 0.4);
}

body.dark .user-name {
  color: #f1f5f9;
}

/* --- SUBAREA CATALOG: ALTA VISIBILIDAD EN MODO CLARO Y OSCURO --- */
.area-catalog-details {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 14px;
  background: var(--paper, #f8fafc);
  margin-bottom: 6px;
  transition: all 0.2s ease;
}

[data-mode="night"] .area-catalog-details,
body[data-mode="night"] .area-catalog-details {
  background: rgba(22, 32, 46, 0.75) !important;
  border-color: #303b4a !important;
}

.area-catalog-summary {
  cursor: pointer;
  padding: 13px 2px;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.01em;
  user-select: none;
}

.area-catalog-summary-count {
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  margin-left: 6px;
}

.subarea-catalog-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 9px;
  background: #ffffff;
  border: 1px solid var(--line, #e2e8f0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.subarea-catalog-item:hover {
  border-color: var(--blue, #326fe5);
  box-shadow: 0 2px 8px rgba(50, 111, 229, 0.12);
}

.subarea-catalog-text {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.subarea-catalog-title {
  font-size: 13px;
  font-weight: 800;
  color: #16283a;
  letter-spacing: 0.02em;
}

.subarea-catalog-meta {
  font-size: 12px;
  font-weight: 600;
  color: #59697b;
}

/* Modo Nocturno (Dark Mode) */
[data-mode="night"] .subarea-catalog-item,
body[data-mode="night"] .subarea-catalog-item {
  background: #151e2a !important;
  border-color: #303b4a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

[data-mode="night"] .subarea-catalog-item:hover,
body[data-mode="night"] .subarea-catalog-item:hover {
  background: #1b2636 !important;
  border-color: #4a5d78 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45) !important;
}

[data-mode="night"] .subarea-catalog-title,
body[data-mode="night"] .subarea-catalog-title {
  color: #f1f5f9 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

[data-mode="night"] .subarea-catalog-meta,
body[data-mode="night"] .subarea-catalog-meta {
  color: #94a3b8 !important;
}

/* --- CONTROL DE SEGURIDAD BASADO EN MATRIZ GRANULAR JERÁRQUICA (13 ÍTEMS) --- */
/* 1. Panel General */
body[data-perm-panel-general="0"] .nav button[data-page="dashboard"] {
  display: none !important;
}

/* 2. Gestión de Activos: Ocultamiento granular de submódulos */
body[data-perm-traslados="0"] #assetsNavGroup button[data-page="transfers"],
body[data-perm-traslados="0"] .nav button[data-page="transfers"] {
  display: none !important;
}
body[data-perm-bajas-equipos="0"] #assetsNavGroup button[data-page="decommissioned"],
body[data-perm-bajas-equipos="0"] .nav button[data-page="decommissioned"] {
  display: none !important;
}
body[data-perm-inventario-area="0"] #assetsNavGroup button[data-page="area-inventory"],
body[data-perm-inventario-area="0"] .nav button[data-page="area-inventory"] {
  display: none !important;
}
body[data-perm-inventario-hojas-vida="0"] #assetsNavGroup button[data-page="life-sheet"],
body[data-perm-inventario-hojas-vida="0"] .nav button[data-page="life-sheet"] {
  display: none !important;
}
body[data-perm-importar-descargar="0"] #assetsNavGroup button[data-page="inventory-download"],
body[data-perm-importar-descargar="0"] .nav button[data-page="inventory-download"] {
  display: none !important;
}
/* Ocultamiento del grupo padre si todos sus submódulos están en 0 */
body[data-perm-traslados="0"][data-perm-bajas-equipos="0"][data-perm-inventario-area="0"][data-perm-inventario-hojas-vida="0"][data-perm-importar-descargar="0"] #assetsNavGroup {
  display: none !important;
}

/* 3. Activos de Redes: Ocultamiento granular de submódulos */
body[data-perm-equipos-activos="0"] #networkNavGroup button[data-page="net-active"] {
  display: none !important;
}
body[data-perm-equipos-pasivos="0"] #networkNavGroup button[data-page="net-passive"] {
  display: none !important;
}
body[data-perm-cuartos-telecom="0"] #networkNavGroup button[data-page="net-rooms"] {
  display: none !important;
}
body[data-perm-gestion-ips="0"] #networkNavGroup button[data-page="net-ips"] {
  display: none !important;
}
body[data-perm-equipos-activos="0"] #networkNavGroup button[data-page="net-topology"] {
  display: none !important;
}
/* Ocultamiento del grupo padre si todos sus submódulos están en 0 */
body[data-perm-equipos-activos="0"][data-perm-equipos-pasivos="0"][data-perm-cuartos-telecom="0"][data-perm-gestion-ips="0"] #networkNavGroup,
body[data-perm-activos-redes="0"] #networkNavGroup,
body[data-perm-activos-red="0"] #networkNavGroup {
  display: none !important;
}

/* 4. Gestión de UPS: Ocultamiento granular de submódulos */
body[data-perm-inventario-ups="0"] #upsNavGroup button[data-page="ups-inventory"] {
  display: none !important;
}
body[data-perm-traslados-ups="0"] #upsNavGroup button[data-page="ups-transfers"] {
  display: none !important;
}
body[data-perm-bajas-ups="0"] #upsNavGroup button[data-page="ups-decommissioned"] {
  display: none !important;
}
body[data-perm-hojas-vida-qr="0"] #upsNavGroup button[data-page="ups-life-qr"] {
  display: none !important;
}
/* Ocultamiento del grupo padre si todos sus submódulos están en 0 */
body[data-perm-inventario-ups="0"][data-perm-traslados-ups="0"][data-perm-bajas-ups="0"][data-perm-hojas-vida-qr="0"] #upsNavGroup,
body[data-perm-gestion-ups="0"] #upsNavGroup,
body[data-perm-gestion-ups="0"] #upsDashboardAlertCard {
  display: none !important;
}

/* 5. Mantenimientos: Ocultamiento granular de submódulos */
body[data-perm-programacion="0"] #maintenanceNavGroup button[data-page="scheduling"],
body[data-perm-programacion="0"] .nav button[data-page="scheduling"] {
  display: none !important;
}
body[data-perm-registrar-mantenimiento="0"] #maintenanceNavGroup button[data-page="maintenance-register"],
body[data-perm-registrar-mantenimiento="0"] .nav button[data-page="maintenance-register"] {
  display: none !important;
}
body[data-perm-mantenimiento-individual="0"] #maintenanceNavGroup button[data-page="single-asset-maintenance"],
body[data-perm-mantenimiento-individual="0"] .nav button[data-page="single-asset-maintenance"] {
  display: none !important;
}
body[data-perm-historial="0"] #maintenanceNavGroup button[data-page="history"],
body[data-perm-historial="0"] .nav button[data-page="history"] {
  display: none !important;
}
body[data-perm-mantenimiento-ups="0"] #navUpsMaintenanceBtn,
body[data-perm-mantenimiento-ups="0"] #maintenanceNavGroup button[data-page="ups-maintenance"],
body[data-perm-mantenimientos-ups="0"] #navUpsMaintenanceBtn,
body[data-perm-mantenimientos-ups="0"] #maintenanceNavGroup button[data-page="ups-maintenance"] {
  display: none !important;
}
/* Ocultamiento del grupo padre si todos sus submódulos están en 0 */
body[data-perm-programacion="0"][data-perm-registrar-mantenimiento="0"][data-perm-historial="0"][data-perm-mantenimiento-ups="0"] #maintenanceNavGroup {
  display: none !important;
}

/* 6. Usuarios y Técnicos */
body[data-perm-usuarios-tecnicos="0"] #topUserManagerBtn,
body[data-perm-usuarios-tecnicos="0"] #navUserManagerBtn,
body[data-perm-gestion-usuarios="0"] #topUserManagerBtn,
body[data-perm-gestion-usuarios="0"] #navUserManagerBtn {
  display: none !important;
}

/* --- RESTRICCIONES DE ACCIÓN Y ESCRITURA (NIVEL 2 REQUERIDO) --- */
/* Traslados */
body:not([data-perm-traslados="2"]) #transfersPage button[type="submit"],
body:not([data-perm-traslados="2"]) #transfersPage form button.primary {
  display: none !important;
}

/* Bajas de equipos */
body:not([data-perm-bajas-equipos="2"]) #decommissionedPage button[type="submit"],
body:not([data-perm-bajas-equipos="2"]) #decommissionedPage form button.primary {
  display: none !important;
}

/* Inventario por área */
body:not([data-perm-inventario-area="2"]) button[onclick*="openAreaCatalogModal"],
body:not([data-perm-inventario-area="2"]) button[onclick*="openStandardization"],
body:not([data-perm-inventario-area="2"]) button[onclick*="removeCatalogArea"],
body:not([data-perm-inventario-area="2"]) button[onclick*="renameCatalogArea"],
body:not([data-perm-inventario-area="2"]) button[data-standard-delete] {
  display: none !important;
}

/* Inventario y hojas de vida (Administrador y Coordinador de Infraestructura tienen permiso de edición) */
body:not([data-perm-inventario-hojas-vida="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) button[onclick*="deleteAsset"],
body:not([data-perm-inventario-hojas-vida="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) button[onclick*="editAsset"],
body:not([data-perm-inventario-hojas-vida="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) .btn-edit-asset {
  display: none !important;
}

/* Importar y descargar inventario (Lectura = descargar/exportar, Escritura = importar) */
body:not([data-perm-importar-descargar="2"]) #inventoryImportDropzone,
body:not([data-perm-importar-descargar="2"]) label:has(input[type="file"])#importFileLabel,
body:not([data-perm-importar-descargar="2"]) #inventoryDownloadPage .dropzone,
body:not([data-perm-importar-descargar="2"]) #btnImportInventorySubmit {
  display: none !important;
}

/* Activos de redes: Restricciones de escritura (Nivel 2 requerido) */
body:not([data-perm-equipos-activos="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) #net-activePage button[onclick*="openNetworkAssetForm"],
body:not([data-perm-equipos-activos="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) #net-activePage button[onclick*="deleteNetworkAsset"],
body:not([data-perm-equipos-activos="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) #net-activePage .net-btn-edit {
  display: none !important;
}
body:not([data-perm-equipos-pasivos="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) #net-passivePage button[onclick*="openNetworkAssetForm"],
body:not([data-perm-equipos-pasivos="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) #net-passivePage button[onclick*="deleteNetworkAsset"],
body:not([data-perm-equipos-pasivos="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) #net-passivePage .net-btn-edit {
  display: none !important;
}
body:not([data-perm-gestion-ips="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) #net-ipsPage .net-btn-edit {
  display: none !important;
}

/* Gestión de UPS: Restricciones de escritura (Nivel 2 requerido) */
body:not([data-perm-inventario-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #ups-inventoryPage button[onclick*="openUpsForm"],
body:not([data-perm-inventario-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #ups-inventoryPage button[onclick*="openUpsMaintenanceModal"],
body:not([data-perm-inventario-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #ups-inventoryPage button[onclick*="openUpsMovementModal"],
body:not([data-perm-inventario-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #ups-inventoryPage button[onclick*="undoUpsDecommission"],
body:not([data-perm-inventario-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #ups-inventoryPage button[onclick*="deleteUps"],
body:not([data-perm-inventario-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #ups-inventoryPage button[onclick*="downloadUpsBackup"],
body:not([data-perm-inventario-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #ups-inventoryPage button[onclick*="openUpsBulkUploadModal"],
body:not([data-perm-inventario-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #ups-inventoryPage button[onclick*="resetUpsToSeedConfirm"],
body:not([data-perm-inventario-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #ups-inventoryPage .ups-admin-only,
body:not([data-perm-inventario-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #btnUpsRegisterMaint,
body:not([data-perm-inventario-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #btnDownloadUpsBackup,
body:not([data-perm-inventario-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #btnOpenUpsBulkUpload,
body:not([data-perm-inventario-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #btnResetUpsSeed,
/* Restricciones para rol técnico y solo lectura */
body[data-user-role="tech"] #ups-inventoryPage button[onclick*="openUpsForm"],
body[data-user-role="tech"] #ups-inventoryPage button[onclick*="openUpsMaintenanceModal"],
body[data-user-role="tech"] #ups-inventoryPage button[onclick*="openUpsMovementModal"],
body[data-user-role="tech"] #ups-inventoryPage button[onclick*="undoUpsDecommission"],
body[data-user-role="tech"] #ups-inventoryPage button[onclick*="deleteUps"],
body[data-user-role="tech"] #ups-inventoryPage button[onclick*="downloadUpsBackup"],
body[data-user-role="tech"] #ups-inventoryPage button[onclick*="openUpsBulkUploadModal"],
body[data-user-role="tech"] #ups-inventoryPage button[onclick*="resetUpsToSeedConfirm"],
body[data-user-role="tech"] #ups-inventoryPage .ups-admin-only,
body[data-user-role="tech"] #btnUpsRegisterMaint,
body[data-user-role="tech"] #btnDownloadUpsBackup,
body[data-user-role="tech"] #btnOpenUpsBulkUpload,
body[data-user-role="tech"] #btnResetUpsSeed,
body[data-user-role="tech"] #upsLifeSheetMaintBtn,
body[data-user-role="tech"] #inventory-downloadPage .sec-system-disaster-recovery,
body[data-user-role="tech"] #inventory-downloadPage .sec-inventory-bulk-upload,
body[data-user-role="tech"] #inventory-downloadPage .btn-system-restore,
body[data-user-role="tech"] #inventory-downloadPage #inventoryDropZone,
body[data-user-role="tech"] #inventory-downloadPage button[onclick*="exportSystemBackup"],
body[data-user-role="audit"] #ups-inventoryPage button[onclick*="openUpsForm"],
body[data-user-role="audit"] #ups-inventoryPage button[onclick*="openUpsMaintenanceModal"],
body[data-user-role="audit"] #ups-inventoryPage button[onclick*="openUpsMovementModal"],
body[data-user-role="audit"] #ups-inventoryPage button[onclick*="undoUpsDecommission"],
body[data-user-role="audit"] #ups-inventoryPage button[onclick*="deleteUps"],
body[data-user-role="audit"] #ups-inventoryPage button[onclick*="downloadUpsBackup"],
body[data-user-role="audit"] #ups-inventoryPage button[onclick*="openUpsBulkUploadModal"],
body[data-user-role="audit"] #ups-inventoryPage button[onclick*="resetUpsToSeedConfirm"],
body[data-user-role="audit"] #ups-inventoryPage .ups-admin-only,
body[data-user-role="audit"] #btnUpsRegisterMaint,
body[data-user-role="audit"] #btnDownloadUpsBackup,
body[data-user-role="audit"] #btnOpenUpsBulkUpload,
body[data-user-role="audit"] #btnResetUpsSeed,
body[data-user-role="audit"] #upsLifeSheetMaintBtn,
body[data-user-role="audit"] #inventory-downloadPage .sec-system-disaster-recovery,
body[data-user-role="audit"] #inventory-downloadPage .sec-inventory-bulk-upload,
body[data-user-role="audit"] #inventory-downloadPage .btn-system-restore,
body[data-user-role="audit"] #inventory-downloadPage #inventoryDropZone,
body[data-user-role="audit"] #inventory-downloadPage button[onclick*="exportSystemBackup"],
body:not([data-perm-importar-descargar="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) #inventory-downloadPage .sec-system-disaster-recovery,
body:not([data-perm-importar-descargar="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) #inventory-downloadPage .sec-inventory-bulk-upload,
body:not([data-perm-importar-descargar="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) #inventory-downloadPage .btn-system-restore,
body:not([data-perm-importar-descargar="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) #inventory-downloadPage #inventoryDropZone,
body:not([data-perm-importar-descargar="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]) #inventory-downloadPage button[onclick*="exportSystemBackup"] {
  display: none !important;
}
body:not([data-perm-traslados-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #ups-transfersPage button[type="submit"],
body:not([data-perm-traslados-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #ups-transfersPage form button.primary {
  display: none !important;
}
body:not([data-perm-bajas-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #ups-decommissionedPage button[type="submit"],
body:not([data-perm-bajas-ups="2"]):not([data-user-role="admin"]):not([data-user-role="infra"]):not([data-user-role="helpdesk"]) #ups-decommissionedPage form button.primary {
  display: none !important;
}

/* --- ESTILOS COMPARTIDOS PARA DESPLEGABLES DEL MENÚ LATERAL --- */
.nav-group.open > button {
  background: #ffffff14;
  color: #fff;
  box-shadow: inset 3px 0 #69a0ff;
}
.nav-group > .nav-submenu {
  position: relative;
  gap: 4px;
  margin: 2px 0 8px 28px;
  padding-left: 11px;
}
.nav-group > .nav-submenu:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: #ffffff24;
}
.nav-group > .nav-submenu button {
  min-height: 36px;
  padding: 7px 10px !important;
  border-left: 2px solid transparent;
  border-radius: 8px;
  color: #b7c5d2 !important;
  font-size: 11px;
  line-height: 1.35;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-group > .nav-submenu button:hover {
  background: #ffffff0c;
  color: #fff !important;
}
.nav-group > .nav-submenu button.active {
  background: #2a4056;
  color: #fff !important;
  border-left-color: #69a0ff;
  font-weight: 700;
  box-shadow: none !important;
}
.nav-group > button .nav-arrow {
  transition: transform .2s ease;
  display: inline-block;
  margin-left: auto;
}
.nav-group.open > button .nav-arrow {
  transform: rotate(180deg);
}


/* Programación de mantenimientos */
body:not([data-perm-programacion="2"]) button[onclick*="openModal"],
body:not([data-perm-programacion="2"]) button[onclick*="deleteSchedule"],
body:not([data-perm-programacion="2"]) .delete-schedule-btn,
body:not([data-perm-programacion="2"]) #scheduleSubmitButton {
  display: none !important;
}

/* Registrar mantenimiento */
body:not([data-perm-registrar-mantenimiento="2"]) button[onclick*="registerAddMissingAsset"],
body:not([data-perm-registrar-mantenimiento="2"]) #maintenanceRegisterForm button[type="submit"],
body:not([data-perm-registrar-mantenimiento="2"]) #registerSave {
  display: none !important;
}

/* Historial de mantenimientos */
body:not([data-perm-historial="2"]) button[onclick*="deleteMaintenanceRecord"] {
  display: none !important;
}

/* Mantenimiento UPS */
body:not([data-perm-mantenimiento-ups="2"]) button[onclick*="openUpsMaintenanceModal"],
body[data-user-role="tech"] #ups-inventoryPage button[onclick*="openUpsMaintenanceModal"],
body[data-user-role="audit"] button[onclick*="openUpsMaintenanceModal"] {
  display: none !important;
}

/* Usuarios y Técnicos */
body:not([data-perm-usuarios-tecnicos="2"]) #btnAddUser,
body:not([data-perm-usuarios-tecnicos="2"]) #technicianForm,
body:not([data-perm-usuarios-tecnicos="2"]) button[onclick*="deleteUser"],
body:not([data-perm-usuarios-tecnicos="2"]) button[onclick*="removeTechnician"] {
  display: none !important;
}






/* Estilos para Selección Múltiple y Eliminación de Áreas en Programación */
.schedule-targets-section {
  transition: all 0.2s ease;
}
.schedule-target-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.schedule-target-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.06) !important;
}
.target-del-btn:hover {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
}
.schedule-target-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  background: var(--paper, #f1f5f9);
  color: var(--ink, #1e293b);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  padding: 2px 7px;
  margin: 2px 4px 2px 0;
}
[data-mode="night"] .schedule-targets-section {
  background: #182230 !important;
  border-color: #303b4a !important;
}
[data-mode="night"] .schedule-target-card {
  background: #1f2b3a !important;
  border-color: #374558 !important;
  color: #f1f5f9 !important;
}
[data-mode="night"] .target-del-btn:hover {
  background: #451a1a !important;
  border-color: #ef4444 !important;
}
[data-mode="night"] .schedule-target-pill {
  background: #1f2b3a !important;
  border-color: #374558 !important;
  color: #cbd5e1 !important;
}


/* Estilos unificados y armónicos para Gestión de Usuarios y Técnicos (Diurno y Nocturno) */
.user-manager-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  padding-bottom: 12px;
}
.user-manager-tabs .sm-btn {
  background: var(--paper, #f1f5f9);
  color: var(--muted, #64748b);
  border: 1px solid var(--line, #e2e8f0);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.user-manager-tabs .sm-btn.is-active {
  background: var(--blue, #326fe5) !important;
  color: #ffffff !important;
  border-color: var(--blue, #326fe5) !important;
}
.user-manager-tabs .sm-btn.is-active span[id^="tabCount"] {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Banners y avisos informativos */
.user-manager-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--paper, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, #64748b);
}

/* Contenedores y cajas de formularios */
.user-manager-box {
  background: var(--paper, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  transition: all 0.2s ease;
}

.user-manager-label {
  font-size: 11px;
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
  color: var(--ink, #1e293b);
  letter-spacing: 0.02em;
}

.user-manager-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #ffffff;
  color: var(--ink, #0f172a);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.user-manager-input:focus {
  outline: none;
  border-color: var(--blue, #326fe5) !important;
  box-shadow: 0 0 0 3px rgba(50, 111, 229, 0.18) !important;
}

.user-manager-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted, #64748b);
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}
.user-manager-checkbox-label input[type="checkbox"] {
  accent-color: var(--blue, #326fe5);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Tarjetas de técnicos asignables */
.technician-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.technician-item-card:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

.tech-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(50, 111, 229, 0.1);
  color: var(--blue, #326fe5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.tech-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink, #0f172a);
}
.tech-badge-account {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  background: #e6f6ee;
  color: #16734c;
  border: 1px solid #bbf7d0;
}
.tech-badge-nameonly {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
.tech-card-sub {
  font-size: 11px;
  color: var(--muted, #64748b);
}

.btn-action-create-account {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 600;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-action-create-account:hover {
  background: #edf2f7;
  border-color: #94a3b8;
}

.btn-action-delete {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 600;
  background: #fff5f5;
  border: 1px solid #fecaca;
  color: #dc2626;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-action-delete:hover {
  background: #fee2e2;
  border-color: #f87171;
}

/* Badges de rol */
.role-badge-admin {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eaf1ff;
  color: #2563eb;
  font-weight: 700;
  font-size: 10px;
  border: 1px solid #bfdbfe;
}
.role-badge-tech {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6f6ee;
  color: #16734c;
  font-weight: 700;
  font-size: 10px;
  border: 1px solid #bbf7d0;
}
.user-area-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink, #1e293b);
  background: var(--paper, #f1f5f9);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line, #e2e8f0);
}

/* Adaptación completa y perfecta al Modo Nocturno ([data-mode="night"]) */
[data-mode="night"] .user-manager-tabs .sm-btn:not(.is-active),
body[data-mode="night"] .user-manager-tabs .sm-btn:not(.is-active) {
  background: #182230 !important;
  border-color: #303b4a !important;
  color: #94a3b8 !important;
}
[data-mode="night"] .user-manager-info-banner,
body[data-mode="night"] .user-manager-info-banner {
  background: #182230 !important;
  border-color: #303b4a !important;
  color: #94a3b8 !important;
}
[data-mode="night"] .user-manager-box,
body[data-mode="night"] .user-manager-box {
  background: #182230 !important;
  border-color: #303b4a !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
[data-mode="night"] .user-manager-label,
body[data-mode="night"] .user-manager-label {
  color: #e2e8f0 !important;
}
[data-mode="night"] .user-manager-input,
body[data-mode="night"] .user-manager-input {
  background: #10151e !important;
  border-color: #374558 !important;
  color: #f8fafc !important;
}
[data-mode="night"] .user-manager-input:focus,
body[data-mode="night"] .user-manager-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}
[data-mode="night"] .user-manager-checkbox-label,
body[data-mode="night"] .user-manager-checkbox-label {
  color: #cbd5e1 !important;
}
[data-mode="night"] .technician-item-card,
body[data-mode="night"] .technician-item-card {
  background: #182230 !important;
  border-color: #2d3b4e !important;
  color: #f1f5f9 !important;
}
[data-mode="night"] .technician-item-card:hover,
body[data-mode="night"] .technician-item-card:hover {
  background: #1e2b3c !important;
  border-color: #3d4f68 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
[data-mode="night"] .tech-avatar,
body[data-mode="night"] .tech-avatar {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}
[data-mode="night"] .tech-name,
body[data-mode="night"] .tech-name {
  color: #f8fafc !important;
}
[data-mode="night"] .tech-badge-account,
body[data-mode="night"] .tech-badge-account {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, 0.35) !important;
}
[data-mode="night"] .tech-badge-nameonly,
body[data-mode="night"] .tech-badge-nameonly {
  background: rgba(148, 163, 184, 0.15) !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}
[data-mode="night"] .tech-card-sub,
body[data-mode="night"] .tech-card-sub {
  color: #94a3b8 !important;
}
[data-mode="night"] .btn-action-create-account,
body[data-mode="night"] .btn-action-create-account {
  background: #253346 !important;
  border-color: #43556d !important;
  color: #f1f5f9 !important;
}
[data-mode="night"] .btn-action-create-account:hover,
body[data-mode="night"] .btn-action-create-account:hover {
  background: #33445c !important;
  border-color: #556c8b !important;
}
[data-mode="night"] .btn-action-delete,
body[data-mode="night"] .btn-action-delete {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
}
[data-mode="night"] .btn-action-delete:hover,
body[data-mode="night"] .btn-action-delete:hover {
  background: rgba(239, 68, 68, 0.22) !important;
}
[data-mode="night"] .role-badge-admin,
body[data-mode="night"] .role-badge-admin {
  background: rgba(37, 99, 235, 0.25) !important;
  color: #60a5fa !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}
[data-mode="night"] .role-badge-tech,
body[data-mode="night"] .role-badge-tech {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, 0.35) !important;
}
[data-mode="night"] .user-area-badge,
body[data-mode="night"] .user-area-badge {
  background: #10151e !important;
  color: #cbd5e1 !important;
  border-color: #303b4a !important;
}
[data-mode="night"] #userManagerBackdrop table thead tr,
body[data-mode="night"] #userManagerBackdrop table thead tr {
  background: #182230 !important;
  border-bottom-color: #303b4a !important;
  color: #cbd5e1 !important;
}
[data-mode="night"] #userManagerBackdrop table tbody tr,
body[data-mode="night"] #userManagerBackdrop table tbody tr {
  border-bottom-color: #283546 !important;
  color: #f1f5f9 !important;
}
[data-mode="night"] #userManagerBackdrop .tablewrap,
body[data-mode="night"] #userManagerBackdrop .tablewrap {
  border-color: #303b4a !important;
}
[data-mode="night"] #userEditForm,
body[data-mode="night"] #userEditForm {
  background: #182230 !important;
  border-color: #303b4a !important;
}


/* Logo del Hospital en panel lateral */
.logo-hospital-brand {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.sidebar-hospital-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Botón secundario para restaurar respaldos */
.btn-system-restore {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid var(--line, #cbd5e1);
  background: var(--paper, #f8fafc);
  color: var(--ink, #1e293b);
  transition: all 0.2s ease;
}
.btn-system-restore:hover {
  background: var(--line, #e2e8f0);
}
[data-mode="night"] .btn-system-restore,
body[data-mode="night"] .btn-system-restore {
  background: #182230 !important;
  border-color: #303b4a !important;
  color: #f1f5f9 !important;
}
[data-mode="night"] .btn-system-restore:hover,
body[data-mode="night"] .btn-system-restore:hover {
  background: #253346 !important;
  border-color: #475569 !important;
}

/* Guía de estructura de inventario */
.inventory-structure-guide summary {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(50, 111, 229, 0.06);
  border: 1px solid rgba(50, 111, 229, 0.2);
  transition: background 0.15s ease;
}
.inventory-structure-guide summary:hover {
  background: rgba(50, 111, 229, 0.12);
}
[data-mode="night"] .inventory-structure-guide summary,
body[data-mode="night"] .inventory-structure-guide summary {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
  color: #93c5fd !important;
}

/* Botones primarios en tema clasico y base */
:root:not([data-season="christmas"]) .primary,
body:not([data-season="christmas"]) .primary {
  background: linear-gradient(135deg, #155bd7, #1e6bf2) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(21, 91, 215, 0.28) !important;
}
:root:not([data-season="christmas"]) .primary:hover,
body:not([data-season="christmas"]) .primary:hover {
  background: linear-gradient(135deg, #1e6bf2, #155bd7) !important;
  box-shadow: 0 6px 18px rgba(21, 91, 215, 0.38) !important;
}

/* Armonización de botones principales en temas estacionales */
:root[data-season="christmas"] .primary,
body[data-season="christmas"] .primary {
  background: linear-gradient(135deg, #0d7652, #15803d) !important;
  box-shadow: 0 4px 14px rgba(13, 118, 82, 0.35) !important;
}
:root[data-season="christmas"] .primary:hover,
body[data-season="christmas"] .primary:hover {
  background: linear-gradient(135deg, #15803d, #0d7652) !important;
  box-shadow: 0 6px 18px rgba(13, 118, 82, 0.45) !important;
}
:root[data-mode="night"][data-season="christmas"] .primary,
body[data-mode="night"][data-season="christmas"] .primary {
  background: linear-gradient(135deg, #15803d, #166534) !important;
  box-shadow: 0 4px 14px rgba(22, 101, 52, 0.4) !important;
}
:root[data-season="christmas"] .nav button.active,
body[data-season="christmas"] .nav button.active,
:root[data-season="christmas"] .nav-submenu button.active,
body[data-season="christmas"] .nav-submenu button.active {
  background: rgba(13, 118, 82, 0.2) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.4) !important;
}


/* Activos de redes y UPS administrados dinámicamente por la matriz de permisos */

/* --- ESTILOS DE LA MATRIZ DE PERMISOS GRANULARES --- */
.btn-action-perm {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 700;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-action-perm:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
  box-shadow: 0 2px 5px rgba(29, 78, 216, 0.15);
}
[data-mode="night"] .btn-action-perm,
body[data-mode="night"] .btn-action-perm {
  background: rgba(59, 130, 246, 0.18) !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
  color: #93c5fd !important;
}
[data-mode="night"] .btn-action-perm:hover,
body[data-mode="night"] .btn-action-perm:hover {
  background: rgba(59, 130, 246, 0.3) !important;
  border-color: rgba(96, 165, 250, 0.6) !important;
  color: #bfdbfe !important;
}

/* Segmented Control para Matriz de Permisos */
.perm-segmented-control {
  display: inline-flex;
  background: var(--paper, #f1f5f9);
  padding: 3px;
  border-radius: 9px;
  border: 1px solid var(--line, #e2e8f0);
  gap: 3px;
}
.perm-segmented-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted, #64748b);
  transition: all 0.15s ease;
  user-select: none;
}
.perm-segmented-item input[type="radio"] {
  display: none;
}
.perm-segmented-item:hover {
  color: var(--ink, #1e293b);
  background: rgba(0, 0, 0, 0.04);
}
.perm-segmented-item.is-active.perm-lvl-0 {
  background: #fee2e2;
  color: #b91c1c;
  box-shadow: 0 1px 3px rgba(185, 28, 28, 0.15);
}
.perm-segmented-item.is-active.perm-lvl-1 {
  background: #fef3c7;
  color: #b45309;
  box-shadow: 0 1px 3px rgba(180, 83, 9, 0.15);
}
.perm-segmented-item.is-active.perm-lvl-2 {
  background: #dcfce7;
  color: #15803d;
  box-shadow: 0 1px 3px rgba(21, 128, 61, 0.15);
}

[data-mode="night"] .perm-segmented-control,
body[data-mode="night"] .perm-segmented-control {
  background: #10151e !important;
  border-color: #2b384a !important;
}
[data-mode="night"] .perm-segmented-item,
body[data-mode="night"] .perm-segmented-item {
  color: #94a3b8 !important;
}
[data-mode="night"] .perm-segmented-item:hover,
body[data-mode="night"] .perm-segmented-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e2e8f0 !important;
}
[data-mode="night"] .perm-segmented-item.is-active.perm-lvl-0,
body[data-mode="night"] .perm-segmented-item.is-active.perm-lvl-0 {
  background: rgba(239, 68, 68, 0.22) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}
[data-mode="night"] .perm-segmented-item.is-active.perm-lvl-1,
body[data-mode="night"] .perm-segmented-item.is-active.perm-lvl-1 {
  background: rgba(245, 158, 11, 0.22) !important;
  color: #fde68a !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
[data-mode="night"] .perm-segmented-item.is-active.perm-lvl-2,
body[data-mode="night"] .perm-segmented-item.is-active.perm-lvl-2 {
  background: rgba(34, 197, 94, 0.22) !important;
  color: #86efac !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
}


/* Pestañas dentro del formulario de usuario */
.perm-tab-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 8px;
  border: 1px solid var(--line, #e2e8f0);
  background: var(--paper, #f1f5f9);
  color: var(--muted, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.perm-tab-pill:hover {
  color: var(--ink, #1e293b);
  border-color: #cbd5e1;
}
.perm-tab-pill.is-active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
}
[data-mode="night"] .perm-tab-pill,
body[data-mode="night"] .perm-tab-pill {
  background: #10151e !important;
  border-color: #2b384a !important;
  color: #94a3b8 !important;
}
[data-mode="night"] .perm-tab-pill:hover,
body[data-mode="night"] .perm-tab-pill:hover {
  background: #182230 !important;
  color: #f1f5f9 !important;
}
[data-mode="night"] .perm-tab-pill.is-active,
body[data-mode="night"] .perm-tab-pill.is-active {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Árbol Jerárquico de Permisos */
.perm-tree-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.perm-node-item,
.perm-node-group {
  background: var(--paper, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  transition: all 0.15s ease;
}
.perm-node-item:hover,
.perm-node-group:hover {
  border-color: #cbd5e1;
}
.perm-node-subitem {
  background: #ffffff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  transition: all 0.15s ease;
}
.perm-node-subitem:hover {
  background: #fdfdfd;
  border-color: #cbd5e1;
}
.perm-quick-bar {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 10px;
}

[data-mode="night"] .perm-node-item,
body[data-mode="night"] .perm-node-item,
[data-mode="night"] .perm-node-group,
body[data-mode="night"] .perm-node-group {
  background: #141c27 !important;
  border-color: #263345 !important;
}
[data-mode="night"] .perm-node-item:hover,
body[data-mode="night"] .perm-node-item:hover,
[data-mode="night"] .perm-node-group:hover,
body[data-mode="night"] .perm-node-group:hover {
  border-color: #394b63 !important;
}
[data-mode="night"] .perm-node-subitem,
body[data-mode="night"] .perm-node-subitem {
  background: #1b2533 !important;
  border-color: #2b394c !important;
}
[data-mode="night"] .perm-node-subitem:hover,
body[data-mode="night"] .perm-node-subitem:hover {
  background: #202c3d !important;
  border-color: #3d506a !important;
}
[data-mode="night"] .perm-quick-bar,
body[data-mode="night"] .perm-quick-bar {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: #2b384a !important;
}


/* ============================================================= */
/* ESTILOS: GESTIÓN DE SWITCHES POR CENTRO DE CABLEADO Y FACEPLATE (ESQUEMA DARK INSTITUCIONAL) */
/* ================================================================================================= */

#net-activePage {
  background: #0f172a;
  color: #f8fafc;
}
#net-activePage .heading h1 {
  color: #f8fafc;
}
#net-activePage .heading p {
  color: #94a3b8;
}
#net-activePage .panel {
  background: #111827;
  border: 1px solid #334155;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
#net-activePage .panelhead h2 {
  color: #f8fafc;
}
#net-activePage .panelhead .sub {
  color: #94a3b8;
}
#net-activePage .filters-bar {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}
#net-activePage .filters-bar label {
  color: #94a3b8 !important;
}
#net-activePage .filters-bar input,
#net-activePage .filters-bar select {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
#net-activePage .filters-bar input::placeholder {
  color: #64748b;
}

.wiring-center-accordion {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 12px;
}
.wiring-center-accordion:hover {
  border-color: #38bdf8;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.18);
}
.wiring-center-accordion.is-mdf {
  border: 2px solid #38bdf8;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.25), inset 0 0 14px rgba(56, 189, 248, 0.06);
}
.wiring-center-accordion.is-mdf:hover {
  border-color: #7dd3fc;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.4);
}
.wiring-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: #1e293b;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-wrap: nowrap;
}
.wiring-center-accordion.open .wiring-center-header {
  border-bottom-color: #334155;
  background: #172033;
}
.wiring-center-accordion.is-mdf .wiring-center-header {
  background: linear-gradient(90deg, #1e293b 0%, #1e1b4b 100%);
}
.center-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.center-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
  flex-shrink: 0;
}
.is-mdf .center-icon-badge {
  background: linear-gradient(135deg, #7c3aed, #0284c7);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}
.center-order-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #38bdf8;
  text-transform: uppercase;
  white-space: nowrap;
}
.center-name-text {
  font-size: 14.5px;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.center-code-pill {
  font-size: 11px;
  font-weight: 800;
  background: rgba(14, 165, 233, 0.2);
  color: #38bdf8;
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.4);
}
.mdf-badge {
  background: linear-gradient(135deg, #7c3aed, #0284c7);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #a78bfa;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.center-stats-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.center-stat-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 14px;
  background: #0f172a;
  color: #cbd5e1;
  border: 1px solid #334155;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.center-stat-pill.switches {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}
.center-stat-pill.ports {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}
.center-ups-section {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #0f172a;
  border: 1px solid #334155;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  max-width: 360px;
}
.center-ups-section label {
  font-size: 10.5px;
  font-weight: 700;
  color: #f59e0b;
  white-space: nowrap;
}
.center-ups-section select {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #334155;
  background: #1e293b;
  color: #f8fafc;
  max-width: 215px;
}
.center-actions-box {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.accordion-toggle-arrow {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #94a3b8;
  border-radius: 6px;
  transition: transform 0.25s ease, background 0.2s ease;
  background: transparent;
  border: 1px solid transparent;
}
.wiring-center-accordion.open .accordion-toggle-arrow {
  transform: rotate(180deg);
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.2);
}
.wiring-center-body {
  padding: 14px 16px;
  display: none;
  background: #111827;
  border-top: 1px solid #334155;
}
.wiring-center-accordion.open .wiring-center-body {
  display: block;
}

.switch-grid-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.switch-item-row {
  display: grid;
  grid-template-columns: 2.1fr 1.5fr 1.3fr 1.3fr 1.2fr 1.1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid #334155;
  transition: all 0.2s ease;
}
.switch-item-row:hover {
  border-color: #38bdf8;
  background: #243347;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
@media (max-width: 1280px) {
  .wiring-center-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
}
@media (max-width: 1100px) {
  .switch-item-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* INSIGNIAS DE CAPA ESTANDARIZADAS */
.badge-capa-core {
  background: #3b0764 !important;
  color: #fef08a !important;
  border: 1px solid #f59e0b !important;
  font-weight: 800 !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3) !important;
}
.badge-capa-distribucion {
  background: #0c4a6e !important;
  color: #7dd3fc !important;
  border: 1px solid #0284c7 !important;
  font-weight: 800 !important;
}
.badge-capa-acceso {
  background: #064e3b !important;
  color: #6ee7b7 !important;
  border: 1px solid #059669 !important;
  font-weight: 800 !important;
}

/* MODALES DE SWITCHES EN ESQUEMA DARK */
#switchFaceplateModal .modal,
#switchEditModal .modal,
#switchLifeSheetModal .modal,
#manageVlansModal .modal {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
}
#switchFaceplateModal .modal-top,
#switchEditModal .modal-top,
#switchLifeSheetModal .modal-top,
#manageVlansModal .modal-top {
  border-bottom: 1px solid #334155 !important;
}
#switchFaceplateModal .modal-top h2,
#switchEditModal .modal-top h2,
#switchLifeSheetModal .modal-top h2,
#manageVlansModal .modal-top h2 {
  color: #f8fafc !important;
}
#switchFaceplateModal .modal-top .close,
#switchEditModal .modal-top .close,
#switchLifeSheetModal .modal-top .close,
#manageVlansModal .modal-top .close {
  color: #94a3b8 !important;
}


/* ============================================================= */
/* ARQUITECTURA DE RED AMPLIADA - ESTILOS INSTITUCIONALES (DARK) */
/* ============================================================= */

/* Armonización de Cuartos, Pasivos, Gestión de IPs y Topología al esquema Dark Institucional */
#net-passivePage, #net-roomsPage, #net-ipsPage, #net-topologyPage {
  background: #0f172a !important;
  color: #f8fafc !important;
}
#net-passivePage .heading h1, #net-roomsPage .heading h1, #net-ipsPage .heading h1, #net-topologyPage .heading h1 {
  color: #f8fafc !important;
}
#net-passivePage .heading p, #net-roomsPage .heading p, #net-ipsPage .heading p, #net-topologyPage .heading p {
  color: #94a3b8 !important;
}
#net-passivePage .panel, #net-roomsPage .panel, #net-ipsPage .panel {
  background: #111827 !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
#net-passivePage .panelhead h2, #net-roomsPage .panelhead h2, #net-ipsPage .panelhead h2 {
  color: #f8fafc !important;
}
#net-passivePage .panelhead .sub, #net-roomsPage .panelhead .sub, #net-ipsPage .panelhead .sub {
  color: #94a3b8 !important;
}
#net-passivePage .filters-bar, #net-roomsPage .filters-bar, #net-ipsPage .filters-bar {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}
#net-passivePage .filters-bar label, #net-roomsPage .filters-bar label, #net-ipsPage .filters-bar label {
  color: #94a3b8 !important;
}
#net-passivePage .filters-bar input, #net-passivePage .filters-bar select,
#net-roomsPage .filters-bar input, #net-roomsPage .filters-bar select,
#net-ipsPage .filters-bar input, #net-ipsPage .filters-bar select {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

/* Modales institucionales en dark theme */
#passiveAssetModal .modal,
#wiringCenterModal .modal,
#patchPanelModal .modal,
#networkTopologyModal .modal,
#networkLinkModal .modal,
#manageNetworkLinksModal .modal,
#activeExpandedDeviceModal .modal,
#activeExpandedDetailModal .modal {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
}
#passiveAssetModal .modal-top,
#wiringCenterModal .modal-top,
#patchPanelModal .modal-top,
#networkTopologyModal .modal-top,
#networkLinkModal .modal-top,
#manageNetworkLinksModal .modal-top,
#activeExpandedDeviceModal .modal-top,
#activeExpandedDetailModal .modal-top {
  border-bottom: 1px solid #334155 !important;
}
#passiveAssetModal .modal-top h2,
#wiringCenterModal .modal-top h2,
#patchPanelModal .modal-top h2,
#networkTopologyModal .modal-top h2,
#networkLinkModal .modal-top h2,
#manageNetworkLinksModal .modal-top h2,
#activeExpandedDeviceModal .modal-top h2,
#activeExpandedDetailModal .modal-top h2 {
  color: #f8fafc !important;
}
#passiveAssetModal .modal-top .close,
#wiringCenterModal .modal-top .close,
#patchPanelModal .modal-top .close,
#networkTopologyModal .modal-top .close,
#networkLinkModal .modal-top .close,
#manageNetworkLinksModal .modal-top .close,
#activeExpandedDeviceModal .modal-top .close,
#activeExpandedDetailModal .modal-top .close {
  color: #94a3b8 !important;
}

/* Estilos de sub-pestañas y Mapa Visual de Pool IP (/24) */
.ip-view-subnav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid #334155;
  padding-bottom: 8px;
}
.ip-view-tab-btn {
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.ip-view-tab-btn:hover {
  background: #334155;
  color: #f8fafc;
}
.ip-view-tab-btn.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.4);
}
.ip-pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 7px;
  max-height: 580px;
  overflow-y: auto;
  padding: 12px;
  background: #0b1120;
  border: 1px solid #334155;
  border-radius: 10px;
}
.ip-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  min-height: 52px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  position: relative;
  text-align: center;
  user-select: none;
  box-sizing: border-box;
}
.ip-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  z-index: 3;
}
.ip-box.assigned {
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.ip-box.available {
  background: #0f172a;
  border: 1px solid #334155;
  color: #94a3b8;
}
.ip-box.available:hover {
  border-color: #38bdf8;
  color: #f8fafc;
  background: #1e293b;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}
.ip-box.is-inspecting {
  outline: 3px solid #38bdf8 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.9) !important;
  transform: scale(1.05) !important;
  z-index: 10 !important;
}
.ip-inspector-drawer {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
@media (max-width: 960px) {
  .ip-map-workspace {
    flex-direction: column !important;
  }
  .ip-inspector-drawer {
    width: 100% !important;
    position: static !important;
    max-height: none !important;
  }
}
.ip-pool-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #cbd5e1;
}

/* Selector de Categorías de Equipos Activos (Sin barra de scroll horizontal) */
.net-category-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #334155;
  overflow: visible;
}
@media (max-width: 1200px) {
  .net-category-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .net-category-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.net-category-btn {
  background: var(--white, #ffffff);
  border: 1px solid var(--line, #cbd5e1);
  color: var(--muted, #475569);
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 0;
}
.net-category-btn > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.net-category-btn:hover {
  background: var(--paper, #f1f5f9);
  color: var(--ink, #0f172a);
  border-color: #94a3b8;
}
.net-category-btn.active {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}
.net-category-btn .badge {
  background: rgba(0, 0, 0, 0.16);
  color: inherit;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 800;
  flex-shrink: 0;
}
:root[data-mode="night"] .net-category-btn:not(.active),
body[data-mode="night"] .net-category-btn:not(.active) {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
:root[data-mode="night"] .net-category-btn:not(.active):hover,
body[data-mode="night"] .net-category-btn:not(.active):hover {
  background: #334155 !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}
.net-view-switcher {
  display: inline-flex;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.net-view-switcher button {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}
.net-view-switcher button.active {
  background: #1e293b;
  color: #38bdf8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.net-tools-dropdown {
  position: relative;
  display: inline-block;
}
.net-tools-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 240px;
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  padding: 6px;
  z-index: 60;
  display: none;
}
.net-tools-menu.open {
  display: block;
}
.net-tools-menu button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 600;
  padding: 9px 11px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.net-tools-menu button:hover {
  background: #334155;
}
.net-tools-menu .menu-divider {
  height: 1px;
  background: #334155;
  margin: 5px 4px;
}
.net-tools-menu button.danger-item {
  color: #fca5a5;
}
.net-tools-menu button.danger-item:hover {
  background: rgba(239, 68, 68, 0.18);
}

/* Pestañas de Infraestructura Pasiva */
.passive-subtabs-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  border-bottom: 2px solid #334155;
  padding-bottom: 6px;
}
.passive-subtab-btn {
  background: var(--white, #ffffff);
  border: 1px solid var(--line, #cbd5e1);
  color: var(--ink, #334155);
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.passive-subtab-btn:hover {
  background: var(--paper, #f1f5f9);
  color: var(--ink, #0f172a);
}
.passive-subtab-btn.active {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #ffffff;
  border-color: #a78bfa;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}
:root[data-mode="night"] .passive-subtab-btn:not(.active),
body[data-mode="night"] .passive-subtab-btn:not(.active) {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #94a3b8 !important;
}
:root[data-mode="night"] .passive-subtab-btn:not(.active):hover,
body[data-mode="night"] .passive-subtab-btn:not(.active):hover {
  background: #334155 !important;
  color: #f8fafc !important;
}


/* RACK ELEVATION VISUAL CHASSIS */
.rack-elevation-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 14px;
  flex-wrap: wrap;
}
.rack-frame-wrapper {
  background: #090d16;
  border: 3px solid #475569;
  border-radius: 12px;
  padding: 18px 14px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.8), 0 8px 30px rgba(0,0,0,0.6);
  min-width: 620px;
  max-width: 820px;
  flex: 1 1 620px;
}
.rack-frame-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #334155;
}
.rack-frame-header h3 {
  margin: 0;
  font-size: 15px;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rack-slots-column {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #0b1120;
  padding: 12px 10px;
  border-radius: 8px;
  border: 1px solid #1e293b;
  max-height: 780px;
  overflow-y: auto;
}
.rack-u-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 7px;
  background: linear-gradient(90deg, #1e293b 0%, #172033 100%);
  border: 1px solid #334155;
  border-left: 4px solid #38bdf8;
  transition: all 0.15s ease;
  min-height: 48px;
  height: auto;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.rack-u-row.is-type-switch {
  border-left-color: #3b82f6;
  background: linear-gradient(90deg, rgba(30, 58, 138, 0.38) 0%, #172033 100%);
}
.rack-u-row.is-type-patchpanel {
  border-left-color: #06b6d4;
  background: linear-gradient(90deg, rgba(12, 74, 110, 0.38) 0%, #172033 100%);
}
.rack-u-row.is-type-firewalls {
  border-left-color: #ef4444;
  background: linear-gradient(90deg, rgba(127, 29, 29, 0.42) 0%, #172033 100%);
}
.rack-u-row.is-type-servers {
  border-left-color: #a855f7;
  background: linear-gradient(90deg, rgba(88, 28, 135, 0.38) 0%, #172033 100%);
}
.rack-u-row.is-type-nas {
  border-left-color: #10b981;
  background: linear-gradient(90deg, rgba(6, 78, 59, 0.40) 0%, #172033 100%);
}
.rack-u-row.is-type-wlc_pbx {
  border-left-color: #f59e0b;
  background: linear-gradient(90deg, rgba(120, 53, 15, 0.38) 0%, #172033 100%);
}
.rack-u-row.is-type-ups {
  border-left-color: #eab308;
  background: linear-gradient(90deg, rgba(113, 63, 18, 0.45) 0%, #172033 100%);
}
.rack-u-row.is-type-organizador {
  border-left-color: #64748b;
  background: linear-gradient(90deg, rgba(51, 65, 85, 0.4) 0%, #172033 100%);
}
.rack-u-row[draggable="true"] {
  cursor: grab;
}
.rack-u-row[draggable="true"]:active {
  cursor: grabbing;
}
.rack-u-row.is-dragging {
  opacity: 0.45;
  border: 1px dashed #38bdf8;
}
.rack-u-row.drag-over-target,
.rack-u-row.drag-over {
  border: 2px solid #38bdf8 !important;
  background: rgba(14, 165, 233, 0.22) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
}
.rack-u-row.is-multi-2u {
  min-height: 68px;
  padding: 10px 12px;
}
.rack-u-row.is-multi-3u,
.rack-u-row.is-multi-4u {
  min-height: 86px;
  padding: 12px 12px;
}
.rack-u-row:hover {
  border-color: #38bdf8;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.rack-u-row.is-empty {
  background: rgba(15, 23, 42, 0.55);
  border: 1px dashed #263346;
  border-left: 3px solid #334155;
  min-height: 32px;
  padding: 4px 12px;
  opacity: 0.8;
}
.rack-u-row.is-empty:hover {
  opacity: 1;
  border-color: #38bdf8;
  background: rgba(30, 41, 59, 0.75);
}
.rack-u-label {
  font-family: monospace;
  font-size: 11.5px;
  font-weight: 800;
  color: #38bdf8;
  text-align: center;
  background: #0f172a;
  padding: 5px 6px;
  border-radius: 5px;
  border: 1px solid #334155;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rack-u-content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
.rack-u-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.rack-u-meta {
  font-size: 11px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rack-u-meta > span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rack-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}
.rack-shelf-card {
  background: #0f172a;
  border: 1px solid #334155;
  border-top: 2px solid #10b981;
  border-radius: 7px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 5px;
  cursor: grab;
  transition: all 0.15s ease;
  min-width: 0;
  box-sizing: border-box;
}
.rack-shelf-card:hover {
  border-color: #38bdf8;
  background: #162235;
}
.rack-shelf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.rack-shelf-card-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.rack-shelf-card-meta {
  font-size: 10.5px;
  color: #94a3b8;
  min-width: 0;
}
.rack-shelf-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(51, 65, 85, 0.6);
}
.rack-shelf-card-actions button {
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  font-weight: 600;
}
.rack-shelf-card-actions button:hover {
  background: #38bdf8;
  color: #0f172a;
  border-color: #38bdf8;
}
.rack-side-tray-item {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 7px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  cursor: grab;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.rack-side-tray-item:hover {
  border-color: #38bdf8;
  background: #172336;
}
.rack-u-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.rack-u-actions button {
  background: #0f172a;
  border: 1px solid #334155;
  color: #cbd5e1;
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 600;
  white-space: nowrap;
}
.rack-u-actions button:hover {
  background: #38bdf8;
  color: #0f172a;
  border-color: #38bdf8;
}

/* Insignias de Tipos de Enlace */
.badge-link-backbone {
  background: #0c4a6e !important;
  color: #38bdf8 !important;
  border: 1px solid #0284c7 !important;
  font-weight: 800;
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-link-cascade {
  background: #78350f !important;
  color: #fbbf24 !important;
  border: 1px solid #d97706 !important;
  font-weight: 800;
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-link-horizontal {
  background: #3b0764 !important;
  color: #c084fc !important;
  border: 1px solid #9333ea !important;
  font-weight: 800;
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Topología Gráfica SVG & Contenedor */
.topology-diagram-container {
  width: 100%;
  height: 620px;
  background: radial-gradient(circle at center, #111827 0%, #090d16 100%);
  border-radius: 10px;
  border: 1px solid #334155;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.8);
}
.topology-svg {
  width: 100%;
  height: 100%;
  user-select: none;
}
.topology-inspector-card {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 360px;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid #38bdf8;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
  color: #f8fafc;
  font-size: 12px;
  z-index: 10;
  transition: all 0.2s ease;
}

/* CARÁTULA FRONTAL DEL SWITCH (FACEPLATE INTERACTIVO) */
.switch-chassis-container {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 3px solid #334155;
  border-radius: 12px;
  padding: 16px 12px;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.08), 0 12px 28px rgba(0,0,0,0.45);
  margin: 16px 0;
  user-select: none;
  overflow-x: auto;
}
.chassis-rack-ears-wrapper {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.chassis-rack-ear {
  width: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(90deg, #334155 0%, #1e293b 100%);
  border: 1px solid #475569;
  border-radius: 4px;
  padding: 10px 0;
  flex-shrink: 0;
}
.rack-screw-hole {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #090d16;
  border: 1.5px solid #64748b;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}
.chassis-inner-bay {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #0b111e;
  border: 2px solid #1e293b;
  border-radius: 8px;
  flex: 1;
  min-width: 820px;
}
.chassis-brand-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
  padding-right: 12px;
  border-right: 2px solid #1e293b;
  flex-shrink: 0;
}
.chassis-brand-logo {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #f1f5f9;
  text-transform: uppercase;
}
.chassis-model-name {
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  font-family: ui-monospace, monospace;
}
.chassis-led-group {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.chassis-led-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 800;
  color: #64748b;
}
.led-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  display: inline-block;
}
.led-indicator.amber {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}
.led-indicator.red {
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
}
.led-indicator.off {
  background: #334155;
  box-shadow: none;
}

.rj45-bay-grid {
  display: flex;
  gap: 8px;
  flex: 1;
}
.rj45-cluster {
  display: grid;
  grid-template-rows: repeat(2, 42px);
  grid-auto-flow: column;
  gap: 6px 4px;
  background: #070a12;
  padding: 5px;
  border-radius: 6px;
  border: 1px solid #1e293b;
}
.port-faceplate-item {
  width: 32px;
  height: 40px;
  background: #0f172a;
  border: 1.5px solid #334155;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2px 1px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}
.port-faceplate-item:hover {
  transform: translateY(-2px);
  border-color: #38bdf8;
  box-shadow: 0 4px 10px rgba(56, 189, 248, 0.4), inset 0 2px 4px rgba(0,0,0,0.8);
  z-index: 2;
}
.port-faceplate-item.port-selected {
  border-color: #38bdf8 !important;
  background: #1e3a5f !important;
  box-shadow: 0 0 0 2px #38bdf8, 0 0 14px rgba(56, 189, 248, 0.8) !important;
  transform: translateY(-3px) scale(1.05);
  z-index: 3;
}
.port-mode-tag {
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 3px;
}
.port-mode-tag.mode-a {
  background: rgba(2, 132, 199, 0.35);
  color: #38bdf8;
  border: 1px solid #0284c7;
}
.port-mode-tag.mode-t {
  background: rgba(168, 85, 247, 0.35);
  color: #c084fc;
  border: 1px solid #9333ea;
}
.port-mode-tag.mode-h {
  background: rgba(16, 185, 129, 0.35);
  color: #34d399;
  border: 1px solid #059669;
}
.port-vlan-num {
  font-size: 11px;
  font-weight: 900;
  color: #f8fafc;
  font-family: ui-monospace, monospace;
  line-height: 1;
  margin: 1px 0;
}
.port-num-label {
  font-size: 8.5px;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1;
}
.port-status-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-top: 1px;
}
.port-status-dot.active {
  background: #10b981;
  box-shadow: 0 0 4px #10b981;
}
.port-status-dot.free {
  background: #475569;
}
.port-status-dot.fault {
  background: #ef4444;
  box-shadow: 0 0 4px #ef4444;
}

.sfp-faceplate-block {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 2px solid #64748b;
  border-radius: 8px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.sfp-block-title {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #cbd5e1;
  text-transform: uppercase;
  text-align: center;
}
.sfp-cage-grid {
  display: grid;
  grid-template-rows: repeat(2, 42px);
  grid-auto-flow: column;
  gap: 6px 5px;
}
.sfp-faceplate-item {
  width: 36px;
  height: 40px;
  background: #090e17;
  border: 1.5px solid #94a3b8;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.9);
}
.sfp-faceplate-item:hover {
  transform: translateY(-2px);
  border-color: #38bdf8;
  box-shadow: 0 4px 10px rgba(56, 189, 248, 0.5);
  z-index: 2;
}
.sfp-faceplate-item.port-selected {
  border-color: #38bdf8 !important;
  background: #1e3a5f !important;
  box-shadow: 0 0 0 2px #38bdf8, 0 0 14px rgba(56, 189, 248, 0.8) !important;
  transform: translateY(-3px) scale(1.05);
  z-index: 3;
}

.faceplate-tooltip {
  position: fixed;
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid #38bdf8;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 11px;
  pointer-events: none;
  z-index: 100000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  display: none;
  max-width: 380px;
  line-height: 1.4;
}

/* === ENHANCED RESPONSIVE SYSTEM (MOBILE & TABLETS) === */
@media (max-width: 768px) {
  /* Diseno fluido a 1 columna en movil (elimina la franja fija de 68px) */
  .shell {
    display: block !important;
    width: 100% !important;
    min-height: 100vh;
  }
  .main {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Barra lateral convertida en Cajon Deslizante (Off-canvas Drawer) */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 290px !important;
    max-width: 86vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 18px 14px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    align-items: stretch !important;
    background: #0f172a !important;
  }
  .sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 14px 0 40px rgba(0, 0, 0, 0.75) !important;
  }

  /* Restaurar visibilidad completa de nombres, iconos y categorias dentro del drawer movil */
  .sidebar .brand {
    display: flex !important;
    padding: 0 4px !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .sidebar .brand div:not(.logo),
  .sidebar .nav-label,
  .sidebar .nav button span:not(.ico),
  .sidebar .sidefoot > div:last-child {
    display: block !important;
  }
  .sidebar .nav {
    display: grid !important;
    gap: 5px !important;
    width: 100% !important;
  }
  .sidebar .nav button {
    justify-content: flex-start !important;
    padding: 11px 12px !important;
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
  }
  .sidebar .nav button span:not(.ico) {
    display: inline !important;
  }
  .sidebar .sidefoot {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: auto !important;
    padding: 16px 8px 0 !important;
  }

  /* Boton de cierre dentro de la cabecera de la barra lateral en movil */
  .sidebar-mobile-close-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .sidebar-mobile-close-btn:hover {
    background: rgba(255, 255, 255, 0.18);
  }

  /* Telon o fondo translucido (Backdrop) */
  .sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 99998 !important;
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .sidebar-backdrop.active {
    display: block !important;
    opacity: 1 !important;
  }

  /* Boton de menu hamburguesa visible solo en movil */
  .mobile-menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    font-size: 19px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
  }
  :root[data-mode="night"] .mobile-menu-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
  }

  /* Cabecera optimizada y compacta en movil */
  .topbar {
    height: auto !important;
    min-height: 52px;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 6px 10px;
  }
  .topbar .crumb {
    font-size: 11.5px !important;
    max-width: 140px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .top-actions {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
  }
  #serverSyncBadge {
    padding: 4px 8px !important;
    font-size: 10px !important;
    margin-right: 2px !important;
  }
  .mode-switch {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }
  .user-pill {
    padding: 4px 8px !important;
  }
  .user-pill .user-role-badge {
    display: none !important;
  }
  .user-pill .user-name {
    max-width: 85px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }

  .content {
    padding: 14px 12px 32px !important;
  }
  .heading h1 {
    font-size: 21px !important;
  }
  .modal {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 16px !important;
    margin: 8px auto !important;
  }
  .management-toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .tablewrap, .inventory-table-wrap {
    -webkit-overflow-scrolling: touch;
  }
  .formgrid {
    grid-template-columns: 1fr !important;
  }
  .field.full {
    grid-column: 1 / -1 !important;
  }
  .rack-elevation-container {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .topology-diagram-container {
    height: 480px !important;
  }
  .topology-inspector-card {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px;
    box-sizing: border-box;
  }
  #assetWizardProgress {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  #replaceIpComparisonGrid {
    grid-template-columns: 1fr !important;
  }
}

/* Estilos para el Modal de Reemplazo de Equipo por Conflicto de IP */
.replace-ip-banner {
  background: var(--paper, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.replace-old-card {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.replace-old-card .replace-card-tag {
  font-size: 11px;
  font-weight: 800;
  color: #dc2626;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.replace-old-card .replace-card-title {
  font-weight: 800;
  font-size: 14px;
  color: #1e293b;
  margin-top: 6px;
}
.replace-old-card .replace-card-meta {
  font-size: 12px;
  color: #475569;
  margin-top: 6px;
  line-height: 1.5;
}
.replace-old-card .replace-card-badge {
  font-size: 11px;
  font-weight: 700;
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  padding: 6px 10px;
  border-radius: 6px;
}

.replace-new-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.replace-new-card .replace-card-tag {
  font-size: 11px;
  font-weight: 800;
  color: #16a34a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.replace-new-card .replace-card-title {
  font-weight: 800;
  font-size: 14px;
  color: #1e293b;
  margin-top: 6px;
}
.replace-new-card .replace-card-meta {
  font-size: 12px;
  color: #475569;
  margin-top: 6px;
  line-height: 1.5;
}
.replace-new-card .replace-card-badge {
  font-size: 11px;
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  padding: 6px 10px;
  border-radius: 6px;
}

.replace-info-note {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 9px;
  padding: 11px 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: #1e40af;
  line-height: 1.45;
}

/* Modo Nocturno para replaceAssetIpModal */
:root[data-mode="night"] #replaceAssetIpModal .modal,
body[data-mode="night"] #replaceAssetIpModal .modal {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
}
:root[data-mode="night"] .replace-ip-banner {
  background: #1e293b !important;
  border-color: #334155 !important;
}
:root[data-mode="night"] .replace-old-card {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
:root[data-mode="night"] .replace-old-card .replace-card-title {
  color: #f8fafc !important;
}
:root[data-mode="night"] .replace-old-card .replace-card-meta {
  color: #cbd5e1 !important;
}
:root[data-mode="night"] .replace-old-card .replace-card-badge {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}
:root[data-mode="night"] .replace-new-card {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}
:root[data-mode="night"] .replace-new-card .replace-card-title {
  color: #f8fafc !important;
}
:root[data-mode="night"] .replace-new-card .replace-card-meta {
  color: #cbd5e1 !important;
}
:root[data-mode="night"] .replace-new-card .replace-card-badge {
  background: rgba(34, 197, 94, 0.25) !important;
  color: #86efac !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}
:root[data-mode="night"] .replace-info-note {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: #93c5fd !important;
}

/* ============================================================================
   ESTILOS DILIGENCIAMIENTO ACTA DE ENTREGA (GI-FO-52)
   Organización en 3 bloques: ENTREGADO POR, RECIBIDO POR, FIRMA JEFE
   ============================================================================ */
.da-summary-card {
  background: var(--paper, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.da-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

@media (max-width: 820px) {
  .da-roles-grid {
    grid-template-columns: 1fr;
  }
}

.da-role-box {
  border-radius: 10px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Card 1: Entregado Por (Azul / Técnico) */
.da-role-box.entregado {
  background: #f0f9ff;
  border: 1.5px solid #bae6fd;
}
.da-role-box.entregado .da-role-title { color: #0284c7; }
.da-role-box.entregado .da-role-badge {
  color: #0369a1;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
}

/* Card 2: Recibido Por (Verde / Funcionario) */
.da-role-box.recibido {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
}
.da-role-box.recibido .da-role-title { color: #16a34a; }
.da-role-box.recibido .da-role-badge {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #86efac;
}

/* Card 3: Firma Jefe (Púrpura / Jefe Inmediato) */
.da-role-box.jefe {
  background: #faf5ff;
  border: 1.5px solid #e9d5ff;
}
.da-role-box.jefe .da-role-title { color: #9333ea; }
.da-role-box.jefe .da-role-badge {
  color: #7e22ce;
  background: #f3e8ff;
  border: 1px solid #d8b4fe;
}

.da-role-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.da-role-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.da-role-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.da-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.da-field label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.01em;
}

.da-field input,
.da-field select {
  width: 100%;
  font-size: 12px;
  padding: 7px 10px;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.da-field input:focus,
.da-field select:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

/* Checklist de Pruebas */
.da-checklist-card {
  background: var(--paper, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.da-checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
@media (max-width: 640px) {
  .da-checklist-grid { grid-template-columns: 1fr; }
}
.da-checklist-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.da-checklist-item span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #1e293b);
}
.da-checklist-select {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}

/* Selector de Condición del Equipo para Acta GI-FO-52 */
.da-condition-select {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1.5px solid #0284c7;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.2s ease;
}
.da-condition-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25);
}
:root[data-mode="night"] .da-condition-select,
body[data-mode="night"] .da-condition-select {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #38bdf8 !important;
}

/* Modo Nocturno para Delivery Act */
:root[data-mode="night"] #deliveryActModal .modal,
:root[data-mode="night"] #backupActModal .modal,
:root[data-mode="night"] #backupActUploadModal .modal,
:root[data-mode="night"] #backupActApprovalModal .modal,
:root[data-mode="night"] #backupActSelectorModal .modal,
body[data-mode="night"] #deliveryActModal .modal,
body[data-mode="night"] #backupActModal .modal,
body[data-mode="night"] #backupActUploadModal .modal,
body[data-mode="night"] #backupActApprovalModal .modal,
body[data-mode="night"] #backupActSelectorModal .modal {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
}
:root[data-mode="night"] .da-summary-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}
:root[data-mode="night"] .da-role-box.entregado {
  background: rgba(2, 132, 199, 0.12) !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
}
:root[data-mode="night"] .da-role-box.entregado .da-role-title { color: #38bdf8 !important; }
:root[data-mode="night"] .da-role-box.entregado .da-role-badge {
  background: rgba(2, 132, 199, 0.25) !important;
  color: #7dd3fc !important;
  border-color: rgba(2, 132, 199, 0.4) !important;
}

:root[data-mode="night"] .da-role-box.recibido {
  background: rgba(22, 163, 74, 0.12) !important;
  border-color: rgba(22, 163, 74, 0.35) !important;
}
:root[data-mode="night"] .da-role-box.recibido .da-role-title { color: #4ade80 !important; }
:root[data-mode="night"] .da-role-box.recibido .da-role-badge {
  background: rgba(22, 163, 74, 0.25) !important;
  color: #86efac !important;
  border-color: rgba(22, 163, 74, 0.4) !important;
}

:root[data-mode="night"] .da-role-box.jefe {
  background: rgba(147, 51, 234, 0.12) !important;
  border-color: rgba(147, 51, 234, 0.35) !important;
}
:root[data-mode="night"] .da-role-box.jefe .da-role-title { color: #c084fc !important; }
:root[data-mode="night"] .da-role-box.jefe .da-role-badge {
  background: rgba(147, 51, 234, 0.25) !important;
  color: #d8b4fe !important;
  border-color: rgba(147, 51, 234, 0.4) !important;
}

:root[data-mode="night"] .da-field label {
  color: #cbd5e1 !important;
}
:root[data-mode="night"] .da-field input,
:root[data-mode="night"] .da-field select,
:root[data-mode="night"] .da-checklist-select {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}
:root[data-mode="night"] .da-checklist-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}
:root[data-mode="night"] .da-checklist-item {
  border-color: #334155 !important;
}
:root[data-mode="night"] .da-checklist-item span {
  color: #f1f5f9 !important;
}
:root[data-mode="night"] .da-role-header {
  border-color: rgba(255,255,255,0.08) !important;
}

/* Ocultar elementos moviles en pantallas de escritorio */
@media (min-width: 769px) {
  .mobile-menu-btn,
  .sidebar-mobile-close-btn,
  .sidebar-backdrop {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .modal {
    padding: 14px 10px !important;
    width: 98vw !important;
    max-width: 98vw !important;
  }
  .modal-top {
    margin-bottom: 12px !important;
  }
  .modal-top h2 {
    font-size: 16px !important;
  }
  .modal-foot {
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 14px !important;
  }
  .modal-foot button {
    width: 100% !important;
  }
  .heading {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .heading .primary {
    width: 100% !important;
    text-align: center;
  }
  .filters {
    flex-direction: column;
    width: 100%;
  }
  .filters .search, .filters select {
    width: 100%;
  }
  .assetWizardIndicator {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
}


/* User dropdown menu styling */
.user-dropdown-menu button:hover{background:var(--paper) !important}
:root[data-mode="night"] .user-dropdown-menu,body[data-mode="night"] .user-dropdown-menu{
  background:#1e293b !important;border-color:#334155 !important;box-shadow:0 10px 30px rgba(0,0,0,.4) !important;
}
:root[data-mode="night"] .user-dropdown-menu button,body[data-mode="night"] .user-dropdown-menu button{
  color:#f8fafc !important;
}
:root[data-mode="night"] .user-dropdown-menu button:hover,body[data-mode="night"] .user-dropdown-menu button:hover{
  background:#0f172a !important;
}

/* ============================================================= */
/* MONITOR NOC ICMP (PING CONTINUO) — EXCLUSIVO ADMIN & INFRA    */
/* ============================================================= */
.noc-ping-admin-only {
  display: none !important;
}
body[data-user-role="admin"] .noc-ping-admin-only,
body[data-user-role="infra"] .noc-ping-admin-only {
  display: flex !important;
}
.noc-ping-admin-block {
  display: none !important;
}
body[data-user-role="admin"] .noc-ping-admin-block,
body[data-user-role="infra"] .noc-ping-admin-block {
  display: block !important;
}
.noc-ping-admin-inline {
  display: none !important;
}
body[data-user-role="admin"] .noc-ping-admin-inline,
body[data-user-role="infra"] .noc-ping-admin-inline {
  display: inline-flex !important;
}

@keyframes nocOfflinePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.75), inset 0 0 12px rgba(239, 68, 68, 0.35);
    border-color: #ef4444 !important;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0), inset 0 0 20px rgba(239, 68, 68, 0.65);
    border-color: #fca5a5 !important;
  }
}

@keyframes nocDotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.25); }
}

.noc-ping-toolbar {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  border-left: 4px solid #0ea5e9;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.noc-ping-toolbar.has-outage {
  border-left-color: #ef4444;
  border-color: rgba(239, 68, 68, 0.55);
  background: linear-gradient(135deg, #1f1218 0%, #0f172a 100%);
}

.noc-alert-banner {
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.92) 0%, rgba(69, 10, 10, 0.96) 100%);
  border: 1px solid #ef4444;
  border-left: 5px solid #f87171;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  color: #fef2f2;
  animation: nocOfflinePulse 2.2s infinite ease-in-out;
}

.ping-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.3;
  white-space: nowrap;
}
.ping-status-pill.online {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.4);
}
.ping-status-pill.warn {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.45);
}
.ping-status-pill.offline {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border: 1px solid #ef4444;
  animation: nocOfflinePulse 1.8s infinite;
}

.ip-box.assigned.ping-offline {
  background: linear-gradient(135deg, #991b1b, #dc2626) !important;
  border-color: #fca5a5 !important;
  animation: nocOfflinePulse 1.6s infinite !important;
  z-index: 3;
}
.ip-box.assigned.ping-warn {
  background: linear-gradient(135deg, #92400e, #d97706) !important;
  border-color: #fde68a !important;
}

.switch-item-row.ping-offline,
tr.ping-offline {
  background: rgba(127, 29, 29, 0.28) !important;
  border-color: #ef4444 !important;
  box-shadow: inset 3px 0 0 #ef4444;
}

.ip-box.dimmed-other-room {
  opacity: 0.58 !important;
  filter: saturate(75%) !important;
  transform: scale(0.97);
  transition: all 0.2s ease;
}
.ip-box.dimmed-other-room:hover {
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1.04);
}
.ip-box.highlight-room-active {
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.95), inset 0 0 8px rgba(56, 189, 248, 0.5) !important;
  border: 2px solid #38bdf8 !important;
  transform: scale(1.05);
  z-index: 4;
}

/* =========================================================================
   ESTILOS PREMIUM, SIMETRÍA Y CONTROL DE SECCIONES (WIZARD ASSET FORM)
   ========================================================================= */
#assetForm {
  width: min(920px, 96vw) !important;
  max-width: 920px !important;
  max-height: 90vh !important;
  padding: 22px 26px !important;
  border-radius: 14px !important;
  box-sizing: border-box;
}

/* Control estricto de pasos seccionados: ocupacion total al 100% y pestana activa */
#assetForm > .formgrid {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#assetForm .assetWizardPanel[hidden],
.assetWizardPanel[hidden] {
  display: none !important;
}

#assetForm .assetWizardPanel:not([hidden]),
.assetWizardPanel:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: start !important;
}

#assetForm .field {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#assetForm .field.full {
  grid-column: 1 / -1 !important;
}

#assetForm .field label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ink, #1e293b) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  min-height: 18px !important;
  line-height: 1.3 !important;
}

/* Solo campos de texto/select, nunca dañar checkboxes ni radios */
#assetForm .field input:not([type="checkbox"]):not([type="radio"]),
#assetForm .field select,
#assetForm .asset-storage-input-wrap input,
#assetForm .asset-storage-input-wrap select {
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line, #cbd5e1) !important;
  background: var(--bg-card, #ffffff) !important;
  color: var(--ink, #0f172a) !important;
  min-height: 42px !important;
  height: 42px !important;
  line-height: 1.4 !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s !important;
}

#assetForm .field textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line, #cbd5e1) !important;
  background: var(--bg-card, #ffffff) !important;
  color: var(--ink, #0f172a) !important;
  min-height: 65px !important;
  height: auto !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s !important;
}

#assetForm .field input:focus,
#assetForm .field select:focus,
#assetForm .field textarea:focus,
#assetForm .asset-storage-input-wrap input:focus,
#assetForm .asset-storage-input-wrap select:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
  outline: none !important;
}

/* Control Wi-Fi limpio y compacto */
#assetForm .asset-checkbox-control {
  min-height: 42px !important;
  height: 42px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
  border: 1px solid var(--line, #cbd5e1) !important;
  border-radius: 8px !important;
  background: var(--bg-card, #ffffff) !important;
  cursor: pointer !important;
  margin: 0 !important;
  width: 100% !important;
  transition: border-color 0.2s, background 0.2s !important;
}

#assetForm .asset-checkbox-control input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  flex: 0 0 18px !important;
  accent-color: #0284c7 !important;
}

#assetForm .asset-checkbox-control span {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ink, #1e293b) !important;
  white-space: nowrap !important;
}

#assetForm .photos {
  display: none !important;
}

#assetForm .assetWizardHeading {
  grid-column: 1 / -1 !important;
  padding: 10px 14px !important;
  margin: 0 0 4px !important;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.08), rgba(2, 132, 199, 0.02)) !important;
  border-left: 4px solid #0284c7 !important;
  border-radius: 6px !important;
}

#assetForm .assetWizardHeading h3 {
  margin: 0 0 2px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
}

#assetForm .assetWizardHeading p {
  margin: 0 !important;
  color: var(--muted, #64748b) !important;
  font-size: 12px !important;
}

#assetForm #assetWizardProgress {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  margin: 12px 0 18px !important;
  width: 100% !important;
}

#assetForm .assetWizardIndicator {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line, #e2e8f0) !important;
  background: rgba(127, 145, 170, 0.06) !important;
  color: var(--muted, #64748b) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#assetForm .assetWizardIndicator.active {
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.1) !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12) !important;
}

#assetForm .assetWizardIndicator.active span {
  background: #0284c7 !important;
  color: #ffffff !important;
}

/* =========================================================================
   SECCIONES ESTRUCTURADAS Y DISTRIBUIDAS (HARDWARE Y DISCO - PASO 3)
   ========================================================================= */
#assetForm .asset-step-section {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  background: var(--paper, #f8fafc) !important;
  border: 1px solid var(--line, #e2e8f0) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#assetForm .asset-step-section:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

#assetForm .asset-step-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--line, #e2e8f0) !important;
}

#assetForm .asset-step-section-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  flex-shrink: 0 !important;
}

#assetForm .asset-step-section-titles {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#assetForm .asset-step-section-title {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  color: var(--ink, #0f172a) !important;
  line-height: 1.3 !important;
}

#assetForm .asset-step-section-desc {
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--muted, #64748b) !important;
  line-height: 1.3 !important;
}

#assetForm .asset-step-section-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 22px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#assetForm .asset-storage-input-wrap {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

#assetForm .asset-storage-input-wrap input#asset-storage {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

#assetForm .asset-storage-input-wrap select#asset-storageUnit {
  width: 95px !important;
  min-width: 95px !important;
  max-width: 95px !important;
  flex: 0 0 95px !important;
}

#assetForm .asset-gpu-details {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#assetForm .asset-gpu-details[hidden] {
  display: none !important;
}

#assetForm .integrated-gpu-badge {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 15px !important;
  background: rgba(2, 132, 199, 0.05) !important;
  border: 1px dashed rgba(2, 132, 199, 0.3) !important;
  border-radius: 9px !important;
  font-size: 12.5px !important;
  color: var(--ink, #1e293b) !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
  box-sizing: border-box !important;
}

#assetForm .integrated-gpu-badge[hidden] {
  display: none !important;
}

#assetForm .integrated-gpu-icon {
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

/* =========================================================================
   MODO OSCURO COMPLETO Y EXHAUSTIVO PARA FORMULARIO DE EQUIPO (#assetForm)
   ========================================================================= */
:root[data-mode="night"] #assetForm .field input:not([type="checkbox"]):not([type="radio"]),
body[data-mode="night"] #assetForm .field input:not([type="checkbox"]):not([type="radio"]),
:root[data-mode="night"] #assetForm .field select,
body[data-mode="night"] #assetForm .field select,
:root[data-mode="night"] #assetForm .field textarea,
body[data-mode="night"] #assetForm .field textarea,
:root[data-mode="night"] #assetForm select,
body[data-mode="night"] #assetForm select,
:root[data-mode="night"] #assetForm textarea,
body[data-mode="night"] #assetForm textarea,
:root[data-mode="night"] #assetForm .asset-storage-input-wrap input,
body[data-mode="night"] #assetForm .asset-storage-input-wrap input,
:root[data-mode="night"] #assetForm .asset-storage-input-wrap select,
body[data-mode="night"] #assetForm .asset-storage-input-wrap select,
:root[data-mode="night"] #assetForm .asset-checkbox-control,
body[data-mode="night"] #assetForm .asset-checkbox-control {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  color-scheme: dark !important;
}

:root[data-mode="night"] #assetForm .field input:focus,
body[data-mode="night"] #assetForm .field input:focus,
:root[data-mode="night"] #assetForm .field select:focus,
body[data-mode="night"] #assetForm .field select:focus,
:root[data-mode="night"] #assetForm .field textarea:focus,
body[data-mode="night"] #assetForm .field textarea:focus,
:root[data-mode="night"] #assetForm .asset-storage-input-wrap input:focus,
body[data-mode="night"] #assetForm .asset-storage-input-wrap input:focus,
:root[data-mode="night"] #assetForm .asset-storage-input-wrap select:focus,
body[data-mode="night"] #assetForm .asset-storage-input-wrap select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22) !important;
  background: #0f172a !important;
  color: #ffffff !important;
  outline: none !important;
}

:root[data-mode="night"] #assetForm input::placeholder,
body[data-mode="night"] #assetForm input::placeholder,
:root[data-mode="night"] #assetForm textarea::placeholder,
body[data-mode="night"] #assetForm textarea::placeholder,
:root[data-mode="night"] #assetForm .field input::placeholder,
body[data-mode="night"] #assetForm .field input::placeholder,
:root[data-mode="night"] #assetForm .field textarea::placeholder,
body[data-mode="night"] #assetForm .field textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

:root[data-mode="night"] #assetForm select option,
body[data-mode="night"] #assetForm select option,
:root[data-mode="night"] #assetForm .field select option,
body[data-mode="night"] #assetForm .field select option {
  background: #0f172a !important;
  color: #f8fafc !important;
}

:root[data-mode="night"] #assetForm input:disabled,
body[data-mode="night"] #assetForm input:disabled,
:root[data-mode="night"] #assetForm select:disabled,
body[data-mode="night"] #assetForm select:disabled {
  background: #1e293b !important;
  color: #64748b !important;
  border-color: #334155 !important;
  cursor: not-allowed !important;
}

:root[data-mode="night"] #assetForm input[type="date"]::-webkit-calendar-picker-indicator,
body[data-mode="night"] #assetForm input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
}

:root[data-mode="night"] #assetForm .field label,
body[data-mode="night"] #assetForm .field label {
  color: #f1f5f9 !important;
}

:root[data-mode="night"] #assetForm .asset-checkbox-control span,
body[data-mode="night"] #assetForm .asset-checkbox-control span {
  color: #f1f5f9 !important;
}

:root[data-mode="night"] #assetForm .assetWizardIndicator,
body[data-mode="night"] #assetForm .assetWizardIndicator {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

:root[data-mode="night"] #assetForm .assetWizardIndicator span,
body[data-mode="night"] #assetForm .assetWizardIndicator span {
  background: #1e293b !important;
  color: #cbd5e1 !important;
}

:root[data-mode="night"] #assetForm .assetWizardIndicator.active,
body[data-mode="night"] #assetForm .assetWizardIndicator.active {
  background: rgba(2, 132, 199, 0.2) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.2) !important;
}

:root[data-mode="night"] #assetForm .assetWizardIndicator.active span,
body[data-mode="night"] #assetForm .assetWizardIndicator.active span {
  background: #0284c7 !important;
  color: #ffffff !important;
}

:root[data-mode="night"] #assetForm .assetWizardHeading,
body[data-mode="night"] #assetForm .assetWizardHeading {
  background: rgba(15, 23, 42, 0.75) !important;
  border-left-color: #0284c7 !important;
}

:root[data-mode="night"] #assetForm .assetWizardHeading h3,
body[data-mode="night"] #assetForm .assetWizardHeading h3 {
  color: #38bdf8 !important;
}

:root[data-mode="night"] #assetForm .assetWizardHeading p,
body[data-mode="night"] #assetForm .assetWizardHeading p {
  color: #94a3b8 !important;
}

:root[data-mode="night"] #assetForm .assetWizardFooter,
body[data-mode="night"] #assetForm .assetWizardFooter {
  background: #1e293b !important;
  border-top-color: #334155 !important;
}

:root[data-mode="night"] #assetForm .asset-step-section,
body[data-mode="night"] #assetForm .asset-step-section {
  background: rgba(30, 41, 59, 0.5) !important;
  border-color: #334155 !important;
}

:root[data-mode="night"] #assetForm .asset-step-section:hover,
body[data-mode="night"] #assetForm .asset-step-section:hover {
  border-color: #475569 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

:root[data-mode="night"] #assetForm .asset-step-section-header,
body[data-mode="night"] #assetForm .asset-step-section-header {
  border-bottom-color: #334155 !important;
}

:root[data-mode="night"] #assetForm .asset-step-section-title,
body[data-mode="night"] #assetForm .asset-step-section-title {
  color: #f1f5f9 !important;
}

:root[data-mode="night"] #assetForm .asset-step-section-desc,
body[data-mode="night"] #assetForm .asset-step-section-desc {
  color: #94a3b8 !important;
}

:root[data-mode="night"] #assetForm .asset-step-section-icon,
body[data-mode="night"] #assetForm .asset-step-section-icon {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
}

:root[data-mode="night"] #assetForm .integrated-gpu-badge,
body[data-mode="night"] #assetForm .integrated-gpu-badge {
  background: rgba(56, 189, 248, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: #e2e8f0 !important;
}

:root[data-mode="night"] #assetLeasingSection label,
body[data-mode="night"] #assetLeasingSection label {
  color: #f1f5f9 !important;
}

:root[data-mode="night"] #btnToggleLeasing,
body[data-mode="night"] #btnToggleLeasing {
  background: #0f172a !important;
  color: #38bdf8 !important;
  border-color: #334155 !important;
}

@media (max-width: 650px) {
  #assetForm .asset-step-section-grid {
    grid-template-columns: 1fr !important;
  }
  #assetForm .asset-gpu-details {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   UNIFIED ENTERPRISE LIGHT & DARK THEME + VECTOR ICON SYSTEM (ALL 22 PAGES)
   ========================================================================== */
svg.ui-svg-ico {
  width: 1.15em;
  height: 1.15em;
  min-width: 12px;
  min-height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -0.18em;
  display: inline-block;
  flex-shrink: 0;
}
.heading h1 svg.ui-svg-ico,
.modal-top h2 svg.ui-svg-ico,
.panelhead h2 svg.ui-svg-ico {
  color: var(--blue, #0284c7);
}
#inventoryDropZone svg.ui-svg-ico {
  width: 34px;
  height: 34px;
  color: var(--blue, #2563eb);
  stroke-width: 1.75;
}

/* Sub-tabs institucionales sobrios (reemplaza el morado chillón #7c3aed por azul corporativo) */
.passive-subtab-btn.active,
.net-category-btn.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  border-color: #1e40af !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22) !important;
}
.passive-subtab-btn.active span[id*="Count"],
.net-category-btn.active .badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

@media screen {
  /* --- A. MODO DIURNO (CLARO): Corrección integral de contenedores oscuros inline --- */
  :root:not([data-mode="night"]) :is(.page, .page-section, .content) {
    background: var(--bg, #f4f7fb) !important;
    color: var(--ink, #0f172a) !important;
  }

  :root:not([data-mode="night"]) :is(.page, .page-section, .content) .panel:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content) .stat,
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) div[style*="background:rgba(15,23,42"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) div[style*="background: rgba(15, 23, 42"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) div[style*="background:rgba(30,41,59"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) section[style*="background:#111827"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) section[style*="background:#1e293b"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) section[style*="background:#0f172a"] {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
  }

  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) div[style*="background:#0f172a"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container):not(.rack-slots-column):not(.rack-u-label):not(.port-faceplate-item),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) div[style*="background: #0f172a"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container):not(.rack-slots-column):not(.rack-u-label):not(.port-faceplate-item),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) div[style*="background:#1e293b"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) div[style*="background: #1e293b"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) div[style*="background:#111827"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) div[style*="background:#020617"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) div[style*="background:#0b1120"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) div[style*="background:#162032"]:not(.switch-chassis-container):not(.rack-frame-wrapper):not(.topology-diagram-container),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) .filters-bar {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
  }

  /* NOC Ping Toolbar, Disaster Recovery Card & Area Summary Card en Modo Claro */
  :root:not([data-mode="night"]) .noc-ping-toolbar {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 4px solid #0284c7 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  }
  :root:not([data-mode="night"]) .noc-ping-toolbar.has-outage {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
    border: 1px solid #fca5a5 !important;
    border-left: 4px solid #ef4444 !important;
  }
  :root:not([data-mode="night"]) .noc-alert-banner {
    background: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    border-left: 5px solid #dc2626 !important;
    color: #7f1d1d !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.08) !important;
  }
  :root:not([data-mode="night"]) .noc-alert-banner [style*="color:#ffffff"],
  :root:not([data-mode="night"]) .noc-alert-banner [style*="color:#fecaca"],
  :root:not([data-mode="night"]) .noc-alert-banner [style*="color:#e2e8f0"] {
    color: #7f1d1d !important;
  }
  :root:not([data-mode="night"]) #areaSummaryHeaderCard,
  :root:not([data-mode="night"]) .sec-system-disaster-recovery {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 4px solid #2563eb !important;
    color: #0f172a !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  }
  :root:not([data-mode="night"]) :is(#areaSummaryHeaderCard, .sec-system-disaster-recovery) :is(h2, h3, b, strong)[style*="color:#f8fafc"] {
    color: #0f172a !important;
  }
  :root:not([data-mode="night"]) :is(#areaSummaryHeaderCard, .sec-system-disaster-recovery) :is(div, small, span)[style*="color:#94a3b8"] {
    color: #475569 !important;
  }
  :root:not([data-mode="night"]) .sec-system-disaster-recovery .btn-system-restore,
  :root:not([data-mode="night"]) label.btn-system-restore {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  }
  :root:not([data-mode="night"]) .sec-system-disaster-recovery .btn-system-restore:hover,
  :root:not([data-mode="night"]) label.btn-system-restore:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
  }
  :root:not([data-mode="night"]) #assetLifeSheetBodegaBtn {
    background: #fffbeb !important;
    border: 1px solid #fcd34d !important;
    color: #b45309 !important;
  }

  /* Textos claros inline (#f8fafc, #f1f5f9, #e2e8f0, #cbd5e1) sobre fondos claros en Modo Diurno */
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color:#f8fafc"]:not(.badge):not(.status):not(.pill-done):not(button),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color: #f8fafc"]:not(.badge):not(.status):not(.pill-done):not(button),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color:#f1f5f9"]:not(.badge):not(.status):not(.pill-done):not(button),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color: #f1f5f9"]:not(.badge):not(.status):not(.pill-done):not(button),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color:#e2e8f0"]:not(.badge):not(.status):not(.pill-done):not(button),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color: #e2e8f0"]:not(.badge):not(.status):not(.pill-done):not(button),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color:#cbd5e1"]:not(.badge):not(.status):not(.pill-done):not(button),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, p, h1, h2, h3, h4, small, label, td, th)[style*="color: #cbd5e1"]:not(.badge):not(.status):not(.pill-done):not(button) {
    color: #0f172a !important;
  }

  /* Preservar texto blanco dentro de botones con fondo de color sólido (azul, verde, rojo, naranja) */
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#0284c7"],
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#0369a1"],
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#2563eb"],
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#16a34a"],
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#059669"],
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#10b981"],
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#ea580c"],
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#d97706"],
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#dc2626"],
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#0f766e"],
  :root:not([data-mode="night"]) :is(button, a)[style*="linear-gradient"] {
    color: #ffffff !important;
  }
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#0284c7"] span,
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#0369a1"] span,
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#2563eb"] span,
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#16a34a"] span,
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#059669"] span,
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#10b981"] span,
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#ea580c"] span,
  :root:not([data-mode="night"]) :is(button, a)[style*="background:#dc2626"] span,
  :root:not([data-mode="night"]) :is(button, a)[style*="linear-gradient"] span {
    color: #ffffff !important;
  }

  /* Subtítulos y grises (#94a3b8, #a1a1aa) en Modo Diurno */
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, small, label, p, th)[style*="color:#94a3b8"]:not(.badge),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, small, label, p, th)[style*="color: #94a3b8"]:not(.badge),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, small, label, p, th)[style*="color:#a1a1aa"]:not(.badge) {
    color: #475569 !important;
  }

  /* Acentos amarillos/ámbar/azules/verdes/rojos claros adaptados a alto contraste en Modo Diurno */
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small, button)[style*="color:#fde68a"]:not(.badge),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small, button)[style*="color:#fde047"]:not(.badge),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small, button)[style*="color:#fcd34d"]:not(.badge),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small, button)[style*="color:#fbbf24"]:not(.badge),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small, button)[style*="color:#facc15"]:not(.badge),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small, button)[style*="color:#f59e0b"]:not(.badge) {
    color: #b45309 !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small, code, a)[style*="color:#bae6fd"]:not(.badge):not(button),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small, code, a)[style*="color:#7dd3fc"]:not(.badge):not(button),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small, code, a)[style*="color:#38bdf8"]:not(.badge):not(button),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small, code, a)[style*="color:#60a5fa"]:not(.badge):not(button),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small, code, a)[style*="color:#93c5fd"]:not(.badge):not(button) {
    color: #0369a1 !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small)[style*="color:#86efac"]:not(.badge),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small)[style*="color:#6ee7b7"]:not(.badge),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small)[style*="color:#4ade80"]:not(.badge),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small)[style*="color:#34d399"]:not(.badge) {
    color: #15803d !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small)[style*="color:#fdba74"]:not(.badge),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small)[style*="color:#fb923c"]:not(.badge) {
    color: #c2410c !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small)[style*="color:#fca5a5"]:not(.badge),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(div, span, b, strong, small)[style*="color:#f87171"]:not(.badge) {
    color: #b91c1c !important;
  }

  /* Preservar colores claros dentro de chasis de hardware genuinamente oscuros */
  :root:not([data-mode="night"]) :is(.switch-chassis-container, .rack-frame-wrapper, .topology-diagram-container) [style*="color:#f8fafc"],
  :root:not([data-mode="night"]) :is(.switch-chassis-container, .rack-frame-wrapper, .topology-diagram-container) [style*="color:#ffffff"],
  :root:not([data-mode="night"]) :is(.switch-chassis-container, .rack-frame-wrapper, .topology-diagram-container) [style*="color:#e2e8f0"],
  :root:not([data-mode="night"]) :is(.switch-chassis-container, .rack-frame-wrapper, .topology-diagram-container) [style*="color:#cbd5e1"] {
    color: #f8fafc !important;
  }
  :root:not([data-mode="night"]) :is(.switch-chassis-container, .rack-frame-wrapper, .topology-diagram-container) [style*="color:#94a3b8"] {
    color: #94a3b8 !important;
  }

  /* Todos los inputs, selects y textareas en páginas y modales en Modo Diurno */
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) select,
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) textarea {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) input[readonly]:not([type="checkbox"]):not([type="radio"]) {
    background: #f1f5f9 !important;
    color: #334155 !important;
  }

  /* Botones secundarios y de tabla con estilos oscuros inline en Modo Diurno */
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(button.secondary, .sm-btn)[style*="background:#1e293b"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(button.secondary, .sm-btn)[style*="background:#334155"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(button.secondary, .sm-btn)[style*="background:#0f172a"] {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(button.secondary, .sm-btn)[style*="background:#1e293b"]:hover,
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(button.secondary, .sm-btn)[style*="background:#334155"]:hover,
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) :is(button.secondary, .sm-btn)[style*="background:#0f172a"]:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) .sm-btn[style*="background:#450a0a"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) .sm-btn[style*="background:#451a1a"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) .sm-btn[style*="background:#7f1d1d"] {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) .sm-btn[style*="background:#065f46"] {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) .sm-btn[style*="background:#312e81"] {
    background: #eef2ff !important;
    color: #4338ca !important;
    border: 1px solid #c7d2fe !important;
  }
  :root:not([data-mode="night"]) .ping-status-pill[style*="background:#1e293b"] {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
  }

  /* Badges con colores claros sobre fondos rgba en Modo Diurno (ej. Actas de entrega, Switches, Impresoras, UPS) */
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) span[style*="color:#4ade80"][style*="background:rgba"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) span[style*="color:#34d399"][style*="background:rgba"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) span[style*="color:#86efac"][style*="background:rgba"] {
    background: #ecfdf5 !important;
    color: #15803d !important;
    border-color: #86efac !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) span[style*="color:#38bdf8"][style*="background:rgba"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) span[style*="color:#60a5fa"][style*="background:rgba"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) span[style*="color:#93c5fd"][style*="background:rgba"] {
    background: #f0f9ff !important;
    color: #0369a1 !important;
    border-color: #7dd3fc !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) span[style*="color:#facc15"][style*="background:rgba"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) span[style*="color:#fbbf24"][style*="background:rgba"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) span[style*="color:#f59e0b"][style*="background:rgba"] {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fcd34d !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) span[style*="color:#fb923c"][style*="background:rgba"] {
    background: #fff7ed !important;
    color: #c2410c !important;
    border-color: #fdba74 !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) span[style*="color:#c084fc"][style*="background:rgba"],
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) span[style*="color:#a78bfa"][style*="background:rgba"] {
    background: #f5f3ff !important;
    color: #6d28d9 !important;
    border-color: #ddd6fe !important;
  }

  /* Tablas universales en Modo Diurno */
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) table {
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) thead tr,
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) th {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) tbody tr:not(.ping-offline),
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) tbody tr:not(.ping-offline) td {
    background: #ffffff !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
  }
  :root:not([data-mode="night"]) :is(.page, .page-section, .content, .modal) tbody tr:not(.ping-offline):hover td {
    background: #f0f9ff !important;
    color: #0f172a !important;
  }
  :root:not([data-mode="night"]) tr.ping-offline td {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
  }

  /* --- B. MODO NOCTURNO (OSCURO): Corrección integral de elementos claros inline --- */
  :root[data-mode="night"] :is(.page, .page-section, .content),
  body[data-mode="night"] :is(.page, .page-section, .content) {
    background: #0b1220 !important;
    color: #f8fafc !important;
  }

  :root[data-mode="night"] :is(.page, .page-section, .content) .panel:not(.sec-system-disaster-recovery),
  body[data-mode="night"] :is(.page, .page-section, .content) .panel:not(.sec-system-disaster-recovery),
  :root[data-mode="night"] :is(.page, .page-section, .content) .stat,
  body[data-mode="night"] :is(.page, .page-section, .content) .stat {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
  }

  :root[data-mode="night"] :is(.page, .page-section, .content, .modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea),
  body[data-mode="night"] :is(.page, .page-section, .content, .modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea) {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
  }

  :root[data-mode="night"] :is(.page, .page-section, .content, .modal) input[readonly]:not([type="checkbox"]):not([type="radio"]),
  body[data-mode="night"] :is(.page, .page-section, .content, .modal) input[readonly]:not([type="checkbox"]):not([type="radio"]),
  :root[data-mode="night"] #areaPreview,
  body[data-mode="night"] #areaPreview {
    background: #162032 !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
  }

  /* Iconos KPI del Dashboard y Badges Pastel en Modo Nocturno */
  :root[data-mode="night"] .stat-ico[style*="background:#eff6ff"],
  body[data-mode="night"] .stat-ico[style*="background:#eff6ff"] {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #60a5fa !important;
  }
  :root[data-mode="night"] .stat-ico[style*="background:#e0f2fe"],
  body[data-mode="night"] .stat-ico[style*="background:#e0f2fe"] {
    background: rgba(2, 132, 199, 0.2) !important;
    color: #38bdf8 !important;
  }
  :root[data-mode="night"] .stat-ico[style*="background:#f0fdf4"],
  body[data-mode="night"] .stat-ico[style*="background:#f0fdf4"] {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
  }
  :root[data-mode="night"] .stat-ico[style*="background:#eef2ff"],
  body[data-mode="night"] .stat-ico[style*="background:#eef2ff"] {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
  }

  :root[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#dcfce7"],
  body[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#dcfce7"] {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(74, 222, 128, 0.35) !important;
  }
  :root[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#e0f2fe"],
  body[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#e0f2fe"] {
    background: rgba(2, 132, 199, 0.2) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
  }
  :root[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#fef3c7"],
  body[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#fef3c7"],
  :root[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#fff8e6"],
  body[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#fff8e6"] {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
  }
  :root[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#fee2e2"],
  body[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#fee2e2"] {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid rgba(248, 113, 113, 0.35) !important;
  }
  :root[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#ffedd5"],
  body[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#ffedd5"] {
    background: rgba(249, 115, 22, 0.2) !important;
    color: #fb923c !important;
    border: 1px solid rgba(251, 146, 60, 0.35) !important;
  }
  :root[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#f3e8ff"],
  body[data-mode="night"] :is(.page, .page-section, .content, .modal) .badge[style*="background:#f3e8ff"] {
    background: rgba(168, 85, 247, 0.2) !important;
    color: #c084fc !important;
    border: 1px solid rgba(192, 132, 252, 0.35) !important;
  }
}