/* 🌙 MODO OSCURO POR DEFECTO */
:root {
  --color-bg: #121212;
  --color-panel: #1e1e1e;
  --color-text: #f5f5f5;
  --color-acento: #00acee;
  --color-success: #2ecc71;
  --color-warning: #f39c12;
  --color-error: #e74c3c;
  --color-hover: #007ab3;
  --color-muted: #888;
  --radius: 10px;
  --sombra: 0 4px 12px rgba(0, 0, 0, 0.3);
  --transition: 0.3s ease-in-out;
}

/* 🌞 MODO CLARO */
.light-mode {
  --color-bg: #f2f2f2;
  --color-panel: #ffffff;
  --color-text: #121212;
  --color-acento: #007ab3;
  --color-success: #27ae60;
  --color-warning: #f39c12;
  --color-error: #c0392b;
  --color-hover: #005f87;
  --color-muted: #666;
}

/* 📄 BASE */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 20px;
  transition: var(--transition);
}

/* 🧱 CONTENEDORES */
.card, .form-box, .sorteo-header, form {
  background: var(--color-panel);
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  margin-bottom: 20px;
}

/* 📝 TITULOS */
h1, h2, h3 {
  color: var(--color-acento);
  text-align: center;
}

/* 🔘 BOTONES */
button,
a.btn, .whatsapp-btn {
  background: var(--color-acento);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: var(--transition);
}

button:hover,
a.btn:hover, .whatsapp-btn:hover {
  background: var(--color-hover);
}

a.eliminar {
  background: var(--color-error);
}

a.eliminar:hover {
  background: #c0392b;
}

/* 📋 FORMULARIOS */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border: none;
  border-radius: var(--radius);
  background: #2a2a2a;
  color: white;
}

.light-mode input,
.light-mode textarea {
  background: #e6e6e6;
  color: #121212;
}

label {
  font-weight: bold;
  display: block;
  margin-top: 15px;
}

/* 🧠 ESTADOS */
.estado.activo { color: var(--color-success); }
.estado.inactivo { color: var(--color-error); }

.disponible { background-color: var(--color-success); color: #000; }
.reservado { background-color: var(--color-warning); color: #000; }
.pagado { background-color: var(--color-error); color: #fff; }
.numero.selected {
  outline: 3px solid var(--color-acento);
  background-color: var(--color-acento);
  color: #fff;
}

/* 📱 GRILLAS */
.numeros, .numeros-grid, .sorteos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 10px;
}

.numero, .num-box {
  text-align: center;
  padding: 12px;
  border-radius: var(--radius);
  font-weight: bold;
  user-select: none;
}

/* 🟩 LEYENDA */
.leyenda {
  text-align: center;
  margin-bottom: 20px;
}
.leyenda span {
  padding: 6px 12px;
  margin: 5px;
  border-radius: var(--radius);
  font-size: 14px;
  display: inline-block;
}

/* 🧭 NAVEGACION */
.volver {
  display: block;
  margin-top: 30px;
  text-align: center;
  color: var(--color-acento);
  text-decoration: none;
}
.volver:hover {
  text-decoration: underline;
}

.error {
  color: var(--color-error);
  text-align: center;
  margin-top: 10px;
}

/* 🌗 SWITCH BUTTON */
#switch-theme {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--color-acento);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 9999;
}

/* 📱 MEJORAS RESPONSIVE */

.numero {
  font-size: 18px;
  padding: 15px;
}

@media (max-width: 600px) {
  .numero {
    font-size: 22px;
    padding: 18px;
  }

  .whatsapp-btn {
    font-size: 20px;
    padding: 18px;
    width: 90%;
    margin: 20px auto;
    display: block;
    text-align: center;
  }

  .numeros, .numeros-grid {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  }
}


/* Estilo para la grilla de números */
.numeros-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 10px;
}

.numero {
  padding: 15px;
  font-size: 1.2rem;
  background-color: #1a9e1a; /* verde para disponible */
  text-align: center;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.numero:hover {
  background-color: #157d15;
}

/* Responsive */
@media (max-width: 600px) {
  .numeros-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .numero {
    font-size: 1.4rem;
    padding: 20px;
  }

  .boton-confirmar {
    width: 100%;
    font-size: 1.4rem;
    padding: 15px;
  }
}