:root{
  --bg:#020617;
  --card:#0f172a;
  --accent:#22c55e;
  --danger:#ef4444;
  --info:#3b82f6;
}

body{
  margin:0;
  font-family:system-ui;
  background:var(--bg);
  color:white;
}

.header{
  text-align:center;
  padding:14px;
  border-bottom:1px solid #1e293b;
}

.sub-header{
  font-size:12px;
  color:#94a3b8;
}

.container{
  max-width:420px;
  margin:auto;
  padding:8px;
}

.card{
  background:var(--card);
  padding:10px;
  border-radius:12px;
  margin-bottom:8px;
}

.info-card{font-size:13px;color:#cbd5f5;}

.info-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:4px;
}

.progress{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#334155;
}

.dot.active{
  background:var(--accent);
}

input{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:none;
  background:#020617;
  color:white;
}

button{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:none;
  background:var(--accent);
  font-weight:bold;
}

#numeros{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:2px;
}

.numero{
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1e293b;
  border-radius:6px;
  cursor:pointer;
  font-size:12px;
  transition:.15s;
}

.numero:hover{transform:scale(1.08);}
.numero:active{transform:scale(.9);}

.numero.seleccionado{
  background:var(--accent);
  color:black;
}

.ocupado{
  background:var(--danger);
  opacity:.6;
}

.numero-final{
  font-size:34px;
  background:var(--accent);
  padding:15px;
  border-radius:10px;
  color:black;
}

.sub-text{font-size:13px;color:#94a3b8;}
.bonus{font-size:12px;color:#94a3b8;margin-top:6px;}

#overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
}

#overlay.active{
  opacity:1;
  pointer-events:all;
}

.loader{
  background:var(--card);
  padding:15px;
  border-radius:10px;
}

#toast-container{
  position:fixed;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
}

.toast{
  padding:12px;
  border-radius:10px;
  margin-top:6px;
}

.toast.success{background:var(--accent);}
.toast.error{background:var(--danger);}
.toast.info{background:var(--info);}

.faq {
    max-width: 420px;
    margin: auto;
}


.faq-item{
  border-top:1px solid #1e293b;
  padding:10px 0;
  cursor:pointer;
  transition:.2s;
}

.faq-item:hover{
  background:rgba(255,255,255,0.03);
}

.faq-question{
  font-size:14px;
  display:flex;
  justify-content:space-between;
}

.faq-answer{
  font-size:13px;
  color:#94a3b8;
  max-height:0;
  overflow:hidden;
  transition:.3s;
}

.faq-item.active .faq-answer{
  max-height:120px;
  margin-top:6px;
}