:root{--bg:#05070b;--panel:#0b111b;--line:#263248;--gold:#ffd51b;--text:#eef3fa;--muted:#8d9aaf;--green:#20d989;--red:#ff5470;--orange:#ffae42;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% 0,#2b210f,transparent 32%),linear-gradient(145deg,#05070b,#090e17);color:var(--text)}button,input,select,textarea{font:inherit}.hidden{display:none!important}.shell{width:min(1500px,100%);margin:auto;padding:20px clamp(16px,3vw,42px) 70px}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:72px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.brand>span{display:grid;place-items:center;width:42px;height:42px;background:var(--gold);color:#05070b;font-weight:1000;clip-path:polygon(0 0,80% 0,100% 20%,100% 100%,0 100%)}.brand div{display:grid}.brand b{letter-spacing:1.6px}.brand small,.kicker{color:var(--gold);font-size:10px;font-weight:900;letter-spacing:1.8px}.auth-card{width:min(520px,100%);margin:10vh auto;padding:36px;border:1px solid var(--line);background:#090e17e8;box-shadow:0 30px 80px #000a}.auth-card h1,.hero-row h1{font-size:clamp(34px,5vw,66px);line-height:.96;margin:16px 0}.auth-card p,.hero-row p{color:var(--muted);line-height:1.65}.auth-card form,.create-panel form{display:grid;gap:16px;margin-top:28px}label{display:grid;gap:8px;color:#aeb9c9;font-size:11px;font-weight:800;letter-spacing:.7px}input,select,textarea{width:100%;border:1px solid #344158;background:#060a11;color:var(--text);padding:13px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 2px #ffd51b18}button{border:0;cursor:pointer;font-size:10px;font-weight:950;letter-spacing:1px}.primary,.ghost{min-height:44px;padding:0 18px}.primary{background:var(--gold);color:#06080c;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}.ghost{border:1px solid #455168;background:#0a0f18;color:#dce4ef}.message{margin-top:16px;padding:13px;border:1px solid #6a3241;background:#281018;color:#ff9aac;font-size:12px}.qr{display:block;width:220px;max-width:100%;margin:22px auto;background:white;padding:12px}.hero-row{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end;padding:70px 0 35px}.hero-row>div:first-child{max-width:780px}.metrics{display:flex;border:1px solid var(--line);background:#080d15}.metrics div{min-width:115px;padding:18px;border-right:1px solid var(--line);display:grid;gap:6px}.metrics div:last-child{border:0}.metrics strong{font-size:28px;color:var(--gold)}.metrics span{font-size:8px;font-weight:900;letter-spacing:1px;color:var(--muted)}.dashboard-grid{display:grid;grid-template-columns:360px 1fr;gap:15px}.panel{border:1px solid var(--line);background:linear-gradient(145deg,#0c121d,#080c13);padding:24px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:18px}.panel h2,.dialog-card h2{margin:5px 0 0;font-size:24px;text-transform:uppercase}.filters{display:grid;grid-template-columns:1fr 180px;gap:8px;margin:22px 0}.license-list{display:grid;gap:8px}.license-card{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(210px,1fr) auto;gap:18px;align-items:center;border:1px solid #273349;background:#070b12;padding:16px}.license-main{display:grid;gap:5px}.license-main strong{font-size:15px}.license-main span,.license-meta span{color:var(--muted);font-size:10px}.license-meta{display:grid;gap:5px}.status{width:max-content;padding:5px 8px;border:1px solid;font-size:8px;font-weight:950;letter-spacing:1px}.status.active{color:var(--green);border-color:#206d50;background:#0b221a}.status.suspended{color:var(--orange);border-color:#7d5d26;background:#281d0a}.status.revoked{color:var(--red);border-color:#733445;background:#290d15}.actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.actions button{padding:8px 9px;border:1px solid #39465c;background:#0e1521;color:#ccd6e4;font-size:8px}.actions button.danger{border-color:#733445;color:#ff8196}.audit-panel{margin-top:15px}.audit-list{display:grid;gap:6px;margin-top:18px}.audit-item{display:grid;grid-template-columns:165px 1fr auto;gap:14px;padding:11px;border-bottom:1px solid #222d3f;color:var(--muted);font-size:10px}.audit-item b{color:#dce4ef}dialog{width:min(680px,calc(100% - 24px));padding:0;border:1px solid #465269;background:#080d15;color:var(--text)}dialog::backdrop{background:#000c}.dialog-card{padding:28px}.dialog-card p{color:var(--muted);line-height:1.55}.dialog-card textarea{height:180px;resize:none;font-family:Consolas,monospace;font-size:10px}.dialog-actions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}.toast{position:fixed;right:20px;bottom:20px;max-width:380px;padding:14px 18px;background:#10231b;border:1px solid #2c906b;color:#83f0bf;font-size:11px;box-shadow:0 15px 50px #000b}.empty{padding:30px;text-align:center;color:var(--muted);border:1px dashed #334057}
@media(max-width:900px){.hero-row{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:1fr}.create-panel form{grid-template-columns:1fr 1fr}.create-panel form button{grid-column:1/-1}.license-card{grid-template-columns:1fr 1fr}.actions{grid-column:1/-1;justify-content:flex-start}}
@media(max-width:600px){.shell{padding:12px 12px 55px}.topbar{min-height:62px}.brand small{display:none}.auth-card{margin:7vh auto;padding:25px}.hero-row{padding-top:45px}.hero-row h1{font-size:46px}.metrics{width:100%}.metrics div{min-width:0;flex:1;padding:13px}.panel{padding:18px}.create-panel form,.filters{grid-template-columns:1fr}.license-card{grid-template-columns:1fr}.actions{justify-content:stretch}.actions button{flex:1}.audit-item{grid-template-columns:1fr}.dialog-actions{grid-template-columns:1fr}}

.edition-chip{display:inline-flex;align-items:center;padding:.22rem .55rem;border:1px solid rgba(245,196,71,.45);border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.08em;color:#f5c447;background:rgba(245,196,71,.08)}


/* ==========================================================================
   NEXUS ARENA FIX40-A — PANEL WEB / MOVIL
   Mantiene desktop y optimiza tacto, lectura y safe areas en celular.
   ========================================================================== */
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{min-height:100dvh}
button,input,select,textarea{touch-action:manipulation}
.license-main span,.license-meta span,.audit-item{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:720px){
  body{
    background:
      radial-gradient(circle at 80% 0,#2b210f55,transparent 28%),
      #05070b;
  }
  .shell{
    width:100%;
    padding:
      max(8px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      calc(30px + env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left));
  }
  .topbar{
    position:sticky;
    top:0;
    z-index:50;
    min-height:58px;
    padding:7px 0;
    background:#05070bee;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .brand{gap:9px;min-width:0}
  .brand>span{width:36px;height:36px;flex:0 0 36px}
  .brand b{font-size:13px;letter-spacing:1px}
  .brand small{display:block;font-size:7px;letter-spacing:1px;white-space:nowrap}
  #logout{min-height:40px;padding:0 12px}

  .auth-card{
    margin:5vh auto;
    padding:22px 16px;
    border-radius:14px;
  }
  .auth-card h1{font-size:clamp(32px,10vw,44px)}
  input,select,textarea{
    min-height:48px;
    padding:12px;
    font-size:16px; /* evita zoom automático en iPhone */
    border-radius:9px;
  }
  button{min-height:44px}
  .primary,.ghost{min-height:46px;border-radius:8px;clip-path:none}

  .hero-row{
    grid-template-columns:1fr;
    gap:16px;
    padding:30px 0 18px;
  }
  .hero-row h1{font-size:clamp(34px,10vw,48px);margin:10px 0}
  .hero-row p{font-size:13px}
  .metrics{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-radius:12px;
    overflow:hidden;
  }
  .metrics div{min-width:0;padding:12px 8px}
  .metrics strong{font-size:24px}
  .metrics span{font-size:7px}

  .dashboard-grid{grid-template-columns:1fr;gap:12px}
  .panel{padding:16px;border-radius:12px}
  .panel-head{align-items:flex-start}
  .panel h2,.dialog-card h2{font-size:21px}
  .create-panel form{grid-template-columns:1fr;gap:13px;margin-top:18px}
  .filters{grid-template-columns:1fr;gap:8px;margin:16px 0}

  .license-list{gap:10px}
  .license-card{
    grid-template-columns:1fr;
    gap:12px;
    padding:14px;
    border-radius:12px;
    box-shadow:0 8px 24px #0005;
  }
  .license-main{gap:7px}
  .license-main strong{font-size:17px}
  .license-main span,.license-meta span{font-size:11px;line-height:1.45}
  .license-meta{
    padding:10px 0;
    border-top:1px solid #202b3d;
    border-bottom:1px solid #202b3d;
    gap:7px;
  }
  .status{font-size:9px;padding:6px 9px;border-radius:999px}
  .edition-chip{font-size:10px;width:max-content}

  .actions{
    grid-column:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    justify-content:stretch;
  }
  .actions button{
    width:100%;
    min-height:45px;
    padding:8px;
    font-size:9px;
    line-height:1.2;
    border-radius:8px;
  }
  .actions button.danger{grid-column:1/-1}

  .audit-panel{margin-top:12px}
  .audit-item{grid-template-columns:1fr;gap:5px;padding:12px 4px;font-size:11px}

  dialog{
    width:calc(100% - 18px);
    max-height:calc(100dvh - 18px);
    margin:auto;
    border-radius:14px;
  }
  .dialog-card{padding:18px}
  .dialog-card textarea{height:34vh;font-size:11px}
  .dialog-actions{grid-template-columns:1fr;gap:8px}

  .toast{
    left:10px;
    right:10px;
    bottom:max(10px,env(safe-area-inset-bottom));
    max-width:none;
    border-radius:10px;
    font-size:12px;
  }
}
@media(max-width:380px){
  .brand small{display:none}
  .actions{grid-template-columns:1fr}
  .actions button.danger{grid-column:auto}
  .metrics strong{font-size:21px}
}