:root { 
  --bg:#0b0b0f; 
  --card:#14141a; 
  --muted:#9aa0a6; 
  --text:#f5f5f7; 
  --brand:#7c3aed; 
  --ok:#10b981; 
  --warn:#f59e0b; 
  --bad:#ef4444; 
}

* { box-sizing:border-box } 
body {
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto;
  background:var(--bg); 
  color:var(--text);
}
a { color:var(--brand) }

.container { max-width:1100px; margin:0 auto; padding:16px }
.h1,h1 { font-size:28px; margin:16px 0 }

.hero { display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px }
.stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.stats div {
  background:var(--card);
  border:1px solid #222;
  padding:12px;
  border-radius:14px;
  display:flex;
  justify-content:space-between
}

.pay {
  background:#0b1725;
  border-left:4px solid var(--brand);
  padding:10px;
  border-radius:8px
}

.grid h2 { margin:8px 0 12px }

.card {
  background:var(--card);
  border:1px solid #222;
  padding:16px;
  border-radius:16px;
  margin-bottom:16px
}

.tickets-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
  gap:8px
}

.ticket {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  background:#111;
  border:1px solid #222;
  border-radius:12px;
  padding:10px;
  min-height:70px;
  cursor:pointer;
  transition:all .2s ease-in-out;
}

.ticket input { display:none }
.ticket span { font-weight:700 }
.ticket em { font-style:normal; font-size:12px; color:var(--muted) }

.ticket.available:hover { outline:2px solid var(--brand) }
.ticket.reserved { background:#1b1720; border-color:#2a133c }
.ticket.confirmed { background:#0f1b17; border-color:#0f3c2b }

/* ✅ Resaltar boletos seleccionados */
.ticket input:checked + span {
  outline:2px solid var(--brand);
  border-radius:8px;
  padding:2px 6px;
  background-color:rgba(124,58,237,0.15);
}
.ticket input:checked + span + em {
  color:#fff;
  font-weight:700;
}

/* Opcional: efecto completo sobre la tarjeta */
.ticket input:checked ~ * {
  filter: none;
}
.ticket input:checked ~ span,
.ticket input:checked ~ em {
  transform: scale(1.05);
}

/* =================== */
.buyer {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px
}

input[type=text],
input[type=email],
input[type=password],
input[type=file] {
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid #333;
  background:#0f0f14;
  color:var(--text)
}

.btn {
  background:var(--brand);
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s;
}
.btn:hover { background:#6d28d9 }
.btn.small { padding:6px 10px; font-size:12px }
.btn.danger { background:var(--bad) }

.help { color:var(--muted); font-size:12px }

.table { width:100%; border-collapse:collapse }
.table th,.table td {
  border-bottom:1px solid #222;
  padding:8px;
  text-align:left
}

footer { color:var(--muted); font-size:12px; margin:20px 0 }

@media(min-width:900px){ .hero{ grid-template-columns:2fr 1fr } }