/* Estilos generales */
 body {
    font-family: "Poppins", sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    padding-bottom: 10%;
  }
/*
  body {
    /* Fondo con múltiples imágenes 
    background-image: url('oso1.png');
    background-repeat: repeat; /* Repite las imágenes en ambas direcciones 
    background-size: 10% auto; /* Ajusta el ancho al 10% del contenedor 
    background-position: left top, center top, right top;  /* Alinea las imágenes al inicio del contenedor 
}
*/

  header {
    background-color: #006699;
    padding: 20px;
  }

  h1,
  h2 {
    color: white;
  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: rgb(6, 41, 94);
  }

  p {
    line-height: 1.5;
    margin: 5%;
  }

  ol {
    line-height: 2;
  }

  /* Botón principal */
  .button {
    display: block;
    background-color: #006699;
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    margin: 30px auto;
  }
  .btn-w{
    display: flex;         /* Activa Flexbox para el botón */
    align-items: center;   /* Alinea verticalmente al centro */
    justify-content: center; /* Alinea horizontalmente al centro */
    /* Otros estilos que ya tengas para el botón */
    background-color: #0b7a01;
    color: white;
    border-radius: 5px;
  }
.ico-w{
  height: 30px;
}

  /* Personalizaciones */
  header h1 {
    text-align: center;
  }

  #contenedor {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
  }

  form {
    max-width: 500px;
    margin: 50px auto;
    padding: 30px;
    background-color: #f4f4f4;
    border-radius: 5px;
  }

  /* Campos */
  .form-field {
    margin: 20px 0;
    text-align: center;
  }

  label {
    display: block;
    margin-bottom: 5px;
  }

  input,
  textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 95%;
  }

  textarea {
    height: 100px;
  }

  /* Botón */
  input[type="submit"] {
    background-color: dodgerblue;
    color: white;
    border: 0;
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
  }


  /* Estilos al enviar */
  input[type="submit"]:hover {
    background-color: royalblue;
  }


  input[type="password"] {
    background-color: #c6c6c6;
    color: white;
    border: solid 1px black;
    width: 40%;
    font-size: 1em;
    padding: 5px 10px;
    border-radius: 1px;
  }
  .msj-clave{
    font-size: 0.8em;
  }

  /* Mensajes de error */
  .error {
    background-color: #ffdddd;
    padding: 10px;
    color: red;
  }

  .libre{
        width: 35px; 
        height: 35px; 
        border: 1px solid black; 
        margin: 5px; 
        cursor: pointer; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        background-color: green;
  }

    .ocupado{
        width: 35px; 
        height: 35px; 
        border: 1px solid black; 
        margin: 5px;  
        display: flex; 
        justify-content: center; 
        align-items: center; 
        background-color: red;
    }
    .divdetalles h1{
      color:#333;
    }
    .img-producto{
      display: inline-block;
      max-height: 200px;
      margin: 10px;
    }
    .btn-impago{
      background-color: #4e5152;
      color: white;
      padding: 5px 10px;
      border-radius: 5px;
      text-decoration: none;
    }
    .reproductor {
      display: none; /* Oculta el reproductor */
    }
    .ganador{
      background-color: yellow;
      width: 35px; 
        height: 35px; 
        border: 1px solid black; 
        margin: 5px;  
        display: flex; 
        justify-content: center; 
        align-items: center; 
    }