/* =========================================================
   Ruleta Online — Estilos globales
   Bootstrap 5 + custom
   ========================================================= */

/* ── Fuente y base ─────────────────────────────────────── */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f5f7;
}

/* ── Ruleta — rueda visual ─────────────────────────────── */
.roulette-wheel {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(
    #b22222 0deg 10deg, #1a1a1a 10deg 20deg,
    #b22222 20deg 30deg, #1a1a1a 30deg 40deg,
    #b22222 40deg 50deg, #1a1a1a 50deg 60deg,
    #b22222 60deg 70deg, #1a1a1a 70deg 80deg,
    #b22222 80deg 90deg, #1a1a1a 90deg 100deg,
    #b22222 100deg 110deg, #1a1a1a 110deg 120deg,
    #b22222 120deg 130deg, #1a1a1a 130deg 140deg,
    #b22222 140deg 150deg, #1a1a1a 150deg 160deg,
    #b22222 160deg 170deg, #1a1a1a 170deg 180deg,
    #2e7d32 180deg 182deg,
    #b22222 182deg 192deg, #1a1a1a 192deg 202deg,
    #b22222 202deg 212deg, #1a1a1a 212deg 222deg,
    #b22222 222deg 232deg, #1a1a1a 232deg 242deg,
    #b22222 242deg 252deg, #1a1a1a 252deg 262deg,
    #b22222 262deg 272deg, #1a1a1a 272deg 282deg,
    #b22222 282deg 292deg, #1a1a1a 292deg 302deg,
    #b22222 302deg 312deg, #1a1a1a 312deg 322deg,
    #b22222 322deg 332deg, #1a1a1a 332deg 342deg,
    #b22222 342deg 352deg, #1a1a1a 352deg 360deg
  );
  border: 6px solid #8B6914;
  box-shadow: 0 0 0 4px #1a1a1a, 0 6px 30px rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.roulette-inner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 3px solid #8B6914;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  font-weight: 800;
  z-index: 1;
}

/* Número de resultado en la rueda */
.roulette-inner.result-number {
  font-size: 2rem;
}
.roulette-inner.result-number.red   { background: #b22222; border-color: #b22222; }
.roulette-inner.result-number.black { background: #1a1a1a; border-color: #444; }
.roulette-inner.result-number.green { background: #2e7d32; border-color: #2e7d32; }

/* ── Animaciones de giro ───────────────────────────────── */
@keyframes spinWin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(1440deg); }
}
@keyframes spinLose {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}

.spin-win  { animation: spinWin  1.8s cubic-bezier(.4,0,.2,1) forwards; }
.spin-lose { animation: spinLose 1.2s cubic-bezier(.4,0,.2,1) forwards; }

/* Clase para js-spinner (formulario de apuesta) */
.spinning { animation: spinWin 1.5s linear infinite; }

/* ── Punto de color (rojo / negro) ─────────────────────── */
.roulette-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
}
.roulette-dot.red   { background: #b22222; }
.roulette-dot.black { background: #1a1a1a; border: 1px solid #666; }

/* ── Tabla de ruleta (apuestas) ─────────────────────────── */
.bet-number-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
}
.bet-number-grid .btn-check + label {
  min-width: 0;
  padding: .25rem .1rem;
  font-size: .8rem;
}

/* ── Cards con borde izquierdo ─────────────────────────── */
.card-stat {
  border-left: 4px solid var(--bs-primary);
}

/* ── Navegación navbar ─────────────────────────────────── */
.navbar-dark .navbar-nav .nav-link.active {
  color: #ffc107 !important;
}

/* ── Flash messages — auto-hide ────────────────────────── */
.alert-dismissible {
  animation: fadeIn .3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Admin — tabla responsive ──────────────────────────── */
@media (max-width: 767px) {
  .admin-sidebar { min-height: auto; }
}

/* ── Utilities ─────────────────────────────────────────── */
.cursor-not-allowed { cursor: not-allowed !important; }
.text-truncate-200  { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }