@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;700&display=swap');

:root{
  --bg:#0b0f1a;
  --bg-panel:#111728;
  --bg-card:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.08);
  --text:#e8ecf4;
  --text-dim:#8b94a8;
  --azul:#38bdf8;
  --amarillo:#facc15;
  --verde:#34d399;
  --rojo:#f87171;
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(56,189,248,0.12), transparent 60%),
    radial-gradient(700px 400px at 100% 0%, rgba(250,204,21,0.08), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'DM Sans', sans-serif;
  min-height:100vh;
}
h1,h2,h3{ font-family:'Syne', sans-serif; font-weight:800; letter-spacing:-0.01em; margin:0 0 4px;}
a{ color:var(--azul); text-decoration:none;}
a:hover{ text-decoration:underline; }

.wrap{ max-width:1080px; margin:0 auto; padding:28px 18px 60px; }
.wrap-sm{ max-width:560px; margin:0 auto; padding:28px 18px 60px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 26px; margin-bottom:18px; border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:'Syne'; font-weight:800; font-size:1.1rem;}
.brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--amarillo); box-shadow:0 0 12px var(--amarillo);}
.topbar nav a{ color:var(--text-dim); margin-left:18px; font-weight:500; font-size:.92rem;}
.topbar nav a:hover{ color:var(--text); }

.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  backdrop-filter: blur(10px);
}
.card + .card{ margin-top:18px; }
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:760px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

.stat{ text-align:left; }
.stat .num{ font-family:'Syne'; font-size:2.1rem; font-weight:800; color:var(--azul); }
.stat .lbl{ color:var(--text-dim); font-size:.85rem; }

label{ display:block; font-size:.85rem; color:var(--text-dim); margin:14px 0 6px; font-weight:500;}
label:first-child{ margin-top:0; }
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=date],input[type=number],select{
  width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--border);
  background:rgba(255,255,255,0.03); color:var(--text); font-size:.95rem; font-family:inherit;
}
input:focus,select:focus{ outline:2px solid var(--azul); outline-offset:1px; border-color:transparent; }
input[type=file]{
  width:100%; padding:10px; border-radius:10px; border:1px dashed var(--border);
  background:rgba(255,255,255,0.02); color:var(--text-dim); font-size:.88rem;
}

.btn{
  display:inline-block; padding:11px 20px; border-radius:10px; border:none;
  background:var(--azul); color:#03182a; font-weight:700; font-size:.92rem;
  cursor:pointer; font-family:inherit;
}
.btn:hover{ filter:brightness(1.08); }
.btn-amarillo{ background:var(--amarillo); color:#241c00; }
.btn-secundario{ background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-peligro{ background:transparent; border:1px solid var(--rojo); color:var(--rojo); }
.btn-sm{ padding:7px 13px; font-size:.82rem; }

table{ width:100%; border-collapse:collapse; font-size:.9rem; }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); }
th{ color:var(--text-dim); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
tr:hover td{ background:rgba(255,255,255,0.02); }

.badge{ display:inline-block; padding:3px 10px; border-radius:99px; font-size:.75rem; font-weight:700; }
.badge-pendiente{ background:rgba(250,204,21,0.15); color:var(--amarillo); }
.badge-usado{ background:rgba(52,211,153,0.15); color:var(--verde); }
.badge-expirado,.badge-revocado{ background:rgba(248,113,113,0.15); color:var(--rojo); }

.token-box{
  font-family:'Syne'; font-size:1.6rem; font-weight:800; letter-spacing:.08em;
  color:var(--amarillo); background:rgba(250,204,21,0.08); border:1px solid rgba(250,204,21,0.3);
  border-radius:10px; padding:14px 18px; text-align:center; margin:14px 0;
}

.alerta{ padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:.9rem; }
.alerta-error{ background:rgba(248,113,113,0.12); border:1px solid rgba(248,113,113,0.3); color:#fecaca; }
.alerta-ok{ background:rgba(52,211,153,0.12); border:1px solid rgba(52,211,153,0.3); color:#bbf7d0; }

.hero-center{ text-align:center; padding:40px 0 10px; }
.hero-center .dot{ width:10px; height:10px; border-radius:50%; background:var(--amarillo); display:inline-block; margin-right:8px; box-shadow:0 0 12px var(--amarillo);}
.muted{ color:var(--text-dim); font-size:.9rem; }

.player-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px;
  background:rgba(255,255,255,0.02);
}
.player-row .meta{ font-size:.82rem; color:var(--text-dim); }

footer{ text-align:center; color:var(--text-dim); font-size:.78rem; padding:30px 0 10px; }