/* ===== ETAPA 7: ESTILOS ===== */

/* 1. Página completa */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #0f172a;   /* azul muy oscuro */
  color: #e2e8f0;              /* texto gris claro */
  text-align: center;
}

/* 2. Encabezado */
header {
  padding: 24px 16px 8px;
}

h1 {
  margin: 0;
  color: #fbbf24;              /* amarillo "bolilla" */
  font-size: 2rem;
}

header p {
  color: #94a3b8;
}

/* 3. Contenido centrado con un ancho máximo */
main {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px;
}

/* 4. Tarjetas (cada section) */
.tarjeta {
  background-color: #1e293b;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

h2 {
  margin-top: 0;
  color: #22d3ee;              /* celeste */
  font-size: 1.1rem;
}

/* 5. La bolilla grande: un cuadrado con border-radius 50% = círculo */
.bolilla-grande {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #fbbf24;
  color: #0f172a;
  font-size: 4rem;
  font-weight: bold;
  display: flex;               /* flex para centrar el número */
  justify-content: center;     /* centro horizontal */
  align-items: center;         /* centro vertical */
}

/* 6. Historial: bolillas chicas en fila */
.historial {
  list-style: none;            /* quita los números 1. 2. 3. */
  padding: 0;
  margin: 0;
  min-height: 56px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.historial li {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #334155;
  font-size: 1.3rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* La primera bolilla (la más nueva) se destaca */
.historial li:first-child {
  background-color: #22d3ee;
  color: #0f172a;
}

/* 7. Botones */
.botones {
  display: flex;
  justify-content: center;
  gap: 12px;
}

button {
  padding: 14px 28px;
  font-size: 1.1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;             /* manito al pasar el mouse */
  transition: transform 0.2s, background-color 0.2s;
}

.btn-sortear {
  background-color: #fbbf24;
  color: #0f172a;
  font-weight: bold;
}

.btn-sortear:hover {           /* cuando el mouse está encima */
  background-color: #f59e0b;
  transform: scale(1.05);      /* crece un 5% */
}

.btn-reiniciar {
  background-color: #475569;
  color: #e2e8f0;
}

.btn-reiniciar:hover {
  background-color: #64748b;
}

/* 8. Textos de abajo */
.contador {
  color: #94a3b8;
}

.mensaje {
  min-height: 24px;
  margin: 8px 0 0;
  color: #f87171;              /* rojo suave */
  font-weight: bold;
}

footer {
  padding: 16px;
  color: #64748b;
  font-size: 0.85rem;
}

/* 9. Pantallas chicas (celular) */
@media (max-width: 480px) {
  .bolilla-grande {
    width: 120px;
    height: 120px;
    font-size: 3rem;
  }
}