body{
  font-family: 'Poppins', sans-serif;
  background: radial-gradient(circle at top, #ffb3ec 0, #7a6fff 30%, #031024 80%);
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fdf7ff;
}

.card{
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(20px);
  border-radius:26px;
  padding:30px 28px;
  width:95%;
  max-width:650px;
  box-shadow:0 20px 45px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,0.25);
  position:relative;
  overflow:hidden;
}

/* Glow decorativo */
.card::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  background: radial-gradient(circle, rgba(122,255,214,0.7), transparent);
  top:-60px;
  right:-60px;
  opacity:0.8;
}

.card::after{
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  background: radial-gradient(circle, rgba(255,179,236,0.7), transparent);
  bottom:-40px;
  left:-40px;
  opacity:0.8;
}

h1,h2,h3{
  text-align:center;
  margin:0 0 18px;
  position:relative;
  z-index:1;
}

h1{
  font-size:26px;
  letter-spacing:0.03em;
}

label{
  font-weight:600;
  display:block;
  margin-top:15px;
  font-size:13px;
  position:relative;
  z-index:1;
  color:#fefbff;
}

input,textarea,select{
  width:100%;
  padding:11px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(5,7,29,0.88);
  color:#fdf7ff;
  margin-top:5px;
  font-size:14px;
  outline:none;
}

input::placeholder,textarea::placeholder{
  color:rgba(240,230,255,0.55);
}

input:focus,textarea:focus,select:focus{
  border-color:#7affe2;
  box-shadow:0 0 0 1px rgba(122,255,226,0.4);
}

button,.btn{
  display:inline-block;
  width:100%;
  border:none;
  background:linear-gradient(135deg,#ffb3ec,#7affe2);
  color:#241034;
  padding:12px 16px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  margin-top:24px;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  transition:.25s;
  position:relative;
  z-index:1;
}

button:hover,.btn:hover{
  transform:translateY(-1px) scale(1.01);
  box-shadow:0 10px 28px rgba(0,0,0,0.6);
}

small{
  color:#e3d7ff;
  font-size:11px;
}

.pwa-hint{
  text-align:center;
  margin-top:10px;
  font-size:11px;
  opacity:0.9;
}

/* Tabla en admin */
.table-wrapper{
  max-height:420px;
  overflow:auto;
  margin-top:15px;
  position:relative;
  z-index:1;
}

table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

th,td{
  padding:9px 8px;
  border-bottom:1px solid rgba(255,255,255,0.16);
}

th{
  background:rgba(7,6,33,0.85);
  position:sticky;
  top:0;
  z-index:2;
}

.badge{
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  display:inline-block;
}

.badge-pendiente_pago{
  background:rgba(255,214,102,0.95);
  color:#3b2500;
}
.badge-confirmado{
  background:rgba(122,255,190,0.95);
  color:#022015;
}
.badge-cancelado{
  background:rgba(255,125,125,0.95);
  color:#280000;
}

.tag-rol{
  font-size:11px;
  border-radius:999px;
  padding:2px 8px;
  background:rgba(255,179,236,0.15);
  border:1px solid rgba(255,179,236,0.6);
  margin-left:8px;
}

/* Responsive */
@media (max-width:600px){
  .card{
    padding:22px 18px;
    border-radius:22px;
  }
  h1{
    font-size:22px;
  }
}