/* ===== estilos generales ===== */
    body {
      font-family: Arial, sans-serif; /* Fuente principal */
      text-align: center;             /* Centrar contenido */
      background: #f5f7fa;            /* Color de fondo */
      margin: 0;                      /* Quitar márgenes por defecto */
      background-image: url(../../img/wolf_jauria/fondo_ruleta.jpg);
      background-size: cover;      /* ajusta y cubre todo el viewport */
      background-repeat: no-repeat; /* que no se repita */
      background-position: center; /* centrada */
      /*background-attachment: fixed; /* opcional: efecto parallax */
    }

    .contenedor {
        padding: 20px;                  /* Espaciado alrededor */
      display: flex;                  /* Usamos flex para centrar el contenedor principal */
      justify-content: center;
      
      background: rgba(0,0,0,0.5);
      box-shadow: 0px 0px 100px 0px;
      align-items: flex-start;
        gap: 40px;
    }

    h2 { 
        margin-bottom: 20px;
        color: #fff;
} /* Espacio bajo el título */

    .ruleta-container { 
        background: rgba(0,0,0,0.5);
        text-align: center;
        border-radius: 30px;
} /* contenedor de la ruleta */

    /* Estilos del canvas (ruleta) */
    canvas {
      width: 450px;
      height: 450px;
      max-width: 100%;
      border-radius: 50%;
      background: white;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    /* Botones */
    button {
      margin: 10px 5px;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
    #girar { background: #6a5acd; color: white; }  /* botón girar */
    #configurar { background: #e0e0e0; }           /* botón configurar */
    #btnPremios { background: #ffd93d; }           /* botón premios */

    /* Modal general (oculto por defecto) */
    .modal, .modal-ganador {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.6); /* fondo semitransparente */
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    .modal-content, .ganador-content {
      background: white;
      padding: 20px;
      border-radius: 12px;
      width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      text-align: center;
    }

    /* Panel lateral de edición de premios */
    .side-panel {
      display: none; /* por defecto oculto, se muestra al abrir "Premios" */
      flex-direction: column;
      position: relative;
      width: 260px;
      background: #fff;
      border-left: 2px solid #ccc;
      padding: 20px;
      border-radius: 8px;
      box-shadow: -4px 0 10px rgba(0,0,0,0.2);
    }
    .side-panel h3 { margin-top: 0; }
    .side-panel button {
      margin-top: 10px;
      background: #6bcf77;
      color: white;
    }

    /* Lista de inputs (premios) */
    #listaPremios {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 10px;
    }
    #listaPremios div {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    /* Estilos para los inputs: agregamos transición para cambio suave de color */
    #listaPremios input {
      flex: 1;
      padding: 5px;
      border: none;
      border-radius: 4px;
      font-weight: bold;
      color: #222;
      transition: background 0.35s ease, color 0.35s ease;
    }
    /* Botón ❌ sin fondo (solo icono) */
    #listaPremios button {
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 18px;
    }

    /* Estilos modal ganador */
    .ganador-content {
      background: #fff3cd;
      border: 2px solid #ffeeba;
    }
    .ganador-content h2 { color: #d63384; margin-bottom: 10px; }
    .ganador-content p { font-size: 18px; font-weight: bold; }
    
    /* ============================================================
   FIX RULETA RESPONSIVE + SIN SCROLL HORIZONTAL
   ============================================================ */

html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
}

.contenedor {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

.ruleta-container {
  width: 100%;
  max-width: 720px;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

#ruleta {
  display: block;
  width: 400px !important;
  height: 400px !important;
  max-width: 100%;
  max-height: 450px;
  margin: 0 auto;
}

/* MÓVIL */
@media (max-width: 600px) {

  .contenedor {
    padding: 18px 10px !important;
    display: block !important;
  }

  .ruleta-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 10px !important;
    border-radius: 22px;
  }

  .ruleta-container h2 {
    font-size: 24px !important;
    line-height: 1.2;
    padding: 0 8px;
    word-break: normal;
  }

  #ruleta {
    width: min(92vw, 340px) !important;
    height: min(92vw, 340px) !important;
  }

  .ruleta-container button {
    width: 100%;
    max-width: 260px;
    display: block;
    margin: 10px auto;
  }

  .side-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 15px;
    box-sizing: border-box;
  }

  .modal-content,
  .ganador-content {
    width: calc(100vw - 28px) !important;
    max-width: 360px !important;
    box-sizing: border-box;
  }
}

.premio-item {
  display: grid !important;
  grid-template-columns: 1fr 44px 42px 42px 42px;
  gap: 6px;
  align-items: center;
}

.premio-item input[type="text"] {
  min-width: 0;
}

.premio-item input[type="color"] {
  width: 42px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
}

.btn-img-premio {
  height: 34px;
  background: #ffb400;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-img-premio input {
  display: none;
}

@media (max-width: 600px) {
  .premio-item {
    grid-template-columns: 1fr 38px 38px;
  }

  .premio-item button {
    width: 38px !important;
    margin: 0 !important;
    padding: 6px !important;
  }
}

.premio-item input[type="text"]{
  width: 100%;
  min-width: 130px;
}

.side-panel{
  overflow-x: hidden;
}

@media (max-width: 600px){
  .premio-item{
    grid-template-columns: 1fr 38px 38px 38px !important;
  }
}