:root{color-scheme:dark;font-family:Inter,Segoe UI,system-ui,sans-serif;--bg:#05070b;--panel:#0d121a;--raised:#151c26;--line:#293342;--mint:#43e6a5;--muted:#98a4b3;--danger:#ff7884}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f8fafc}button,input,select,textarea{font:inherit}button,a.nav{border:1px solid var(--line);background:#101620;color:white;border-radius:10px;padding:10px 14px;text-decoration:none;cursor:pointer}button:hover,a.nav:hover{border-color:var(--mint)}.primary{background:var(--mint);border-color:var(--mint);color:#04100b;font-weight:800}.danger{border-color:var(--danger);color:var(--danger);background:#251116}.danger:hover{background:#3a171d;border-color:#ff9aa2}.hidden{display:none!important}.brand{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:900}.brand b{display:grid;place-items:center;width:39px;height:39px;background:var(--mint);color:#04100b;border-radius:11px;font-size:23px}.brand strong{color:var(--mint)}
.login-view{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#17392e,#05070b 52%)}.login-card{width:min(430px,90vw);display:grid;gap:15px;background:#0b1017;border:1px solid #29483e;border-radius:22px;padding:34px;box-shadow:0 30px 80px #000b}.login-card h1{margin:14px 0 0}.login-card p{margin:0;color:var(--muted)}label{display:grid;gap:6px;color:#bdc6d1;font-size:13px}input,select,textarea{width:100%;border:1px solid #354152;background:#090e15;color:white;border-radius:9px;padding:11px}code{color:var(--mint)}
#appView{display:grid;grid-template-columns:230px 1fr;min-height:100vh}aside{position:sticky;top:0;height:100vh;padding:24px 18px;background:#080b10;border-right:1px solid #1e2732;display:flex;flex-direction:column}nav{display:grid;gap:8px;margin-top:38px}.nav{text-align:left}.nav.active{background:#153c31;color:var(--mint);border-color:#236b55}.aside-bottom{margin-top:auto;display:grid;gap:10px;color:var(--muted);font-size:13px}main{padding:28px 34px;min-width:0}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}header small,.dialog-head small{color:var(--mint);font-weight:900;letter-spacing:1.6px}h1,h2,p{margin:0}.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:17px}.stat b{display:block;font-size:27px}.stat span{color:var(--muted);font-size:12px}.toolbar{display:flex;gap:10px;margin:20px 0}.toolbar input{max-width:430px}.toolbar select{width:180px}.customer-list{display:grid;gap:11px}.customer{display:grid;grid-template-columns:minmax(220px,1.2fr) 1fr 1fr auto;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:16px}.customer h3{margin:0 0 5px}.customer small,.meta{color:var(--muted)}.badge{display:inline-block;padding:5px 8px;border-radius:7px;background:#19232d;color:#cdd5de;font-size:11px;font-weight:800}.badge.active,.badge.partner{background:#153c31;color:var(--mint)}.badge.expired{background:#3a2024;color:#ff929b}.actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.actions button{padding:8px 10px;font-size:12px}
dialog{width:min(720px,92vw);border:1px solid #344152;border-radius:18px;background:#0c1119;color:white;padding:24px;box-shadow:0 30px 90px #000c}dialog::backdrop{background:#000b}.dialog-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:20px}.icon{border:0;background:transparent;font-size:28px;padding:0 8px}.grid{display:grid;gap:13px}.grid.two{grid-template-columns:1fr 1fr}.check{display:flex;align-items:center;gap:9px;margin:14px 0}.check input{width:auto}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.message{min-height:20px;color:var(--mint);margin-top:10px}.device{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:12px;padding:13px;margin-top:9px}.toast{position:fixed;right:24px;bottom:24px;background:#17202b;border:1px solid var(--mint);padding:13px 17px;border-radius:10px;box-shadow:0 15px 45px #000a}
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(320px,1fr));gap:14px}.profile-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}.profile-card h3{margin:0 0 8px}.profile-status{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.profile-status span{background:#090e15;border:1px solid #222d3a;border-radius:9px;padding:10px;color:var(--muted);font-size:12px}.profile-status b{display:block;color:white;margin-top:4px}.source-list{display:grid;gap:7px;margin:14px 0}.source-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:#090e15;border:1px solid #222d3a;border-radius:10px;padding:10px}.source-row small{display:block;color:var(--muted);margin-top:3px}.data-list{display:grid;gap:9px}.data-row{display:grid;grid-template-columns:minmax(260px,1.3fr) 1fr 1fr;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px}.data-row span,.data-row small{display:block;color:var(--muted);margin-top:4px}.notice{background:#10231f;border:1px solid #285648;color:#ccefe2;border-radius:12px;padding:13px 16px;margin-bottom:14px}.button{display:inline-block;border:1px solid var(--line);background:#101620;color:white;border-radius:10px;padding:8px 10px;text-decoration:none;font-size:12px}
@media(max-width:1050px){#appView{grid-template-columns:80px 1fr}aside .brand span,.aside-bottom span,.nav{font-size:0}.stats{grid-template-columns:repeat(2,1fr)}.customer{grid-template-columns:1fr 1fr}.actions{justify-content:start}}@media(max-width:650px){main{padding:18px}.customer,.grid.two{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}

/* Responsive mobile panel: mantiene la lógica intacta y solo reordena UI. */
@media(max-width:820px){
  body{font-size:15px;overflow-x:hidden}
  #appView{display:block;min-height:100vh}
  aside{
    position:sticky;top:0;z-index:30;height:auto;min-height:0;
    padding:12px;background:#070b10ee;border-right:0;border-bottom:1px solid #1e2732;
    display:block;backdrop-filter:blur(14px)
  }
  aside .brand{justify-content:space-between;margin-bottom:10px}
  aside .brand span,.aside-bottom span,.nav{font-size:14px}
  aside .brand b{width:34px;height:34px;border-radius:10px;font-size:20px}
  nav{
    display:flex;gap:8px;margin-top:0;overflow-x:auto;padding-bottom:8px;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch
  }
  .nav{
    flex:0 0 auto;text-align:center;white-space:nowrap;
    padding:9px 12px;border-radius:999px;font-size:13px
  }
  .aside-bottom{
    margin-top:8px;display:flex;gap:8px;overflow-x:auto;padding-bottom:2px
  }
  .aside-bottom button{flex:0 0 auto;padding:8px 10px;font-size:12px}
  main{padding:16px 12px 92px;min-width:0}
  header{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:16px}
  header h1{font-size:24px}
  #headerActions{display:flex;gap:8px;overflow-x:auto}
  #headerActions button{width:100%;min-height:44px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .stat{padding:13px;border-radius:12px}
  .stat b{font-size:22px}
  .toolbar{display:grid;grid-template-columns:1fr;gap:9px;margin:14px 0}
  .toolbar input,.toolbar select{width:100%;max-width:none}
  .customer-list{gap:10px}
  .customer{
    grid-template-columns:1fr;gap:10px;padding:14px;border-radius:14px
  }
  .customer h3{font-size:18px}
  .actions{justify-content:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .actions button,.actions .button,.actions a{width:100%;min-height:42px;text-align:center}
  .profile-grid{grid-template-columns:1fr;gap:12px}
  .profile-card{padding:14px}
  .profile-status{grid-template-columns:1fr;gap:7px}
  .source-row{grid-template-columns:1fr;gap:9px}
  .data-row{grid-template-columns:1fr;gap:9px;padding:13px}
  .device{display:grid;grid-template-columns:1fr;gap:10px}
  dialog{
    width:calc(100vw - 20px);max-width:none;max-height:calc(100dvh - 24px);
    overflow:auto;padding:18px;border-radius:18px
  }
  .dialog-head{gap:12px;align-items:start}
  .dialog-head h2{font-size:20px}
  .grid.two{grid-template-columns:1fr}
  .dialog-actions{
    position:sticky;bottom:-18px;background:#0c1119f2;border-top:1px solid var(--line);
    margin:18px -18px -18px;padding:12px 18px;display:grid;grid-template-columns:1fr;gap:9px
  }
  .dialog-actions button{min-height:44px}
  input,select,textarea,button,a.nav{font-size:16px}
  .toast{
    left:12px;right:12px;bottom:12px;text-align:center;z-index:60
  }
}

@media(max-width:420px){
  .stats{grid-template-columns:1fr}
  .actions{grid-template-columns:1fr}
  .login-card{width:calc(100vw - 24px);padding:24px}
}