/* juego.css */
.juego {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   /* // height: 100vh; */
    background-color: #f4f4f4;
    padding: 2px;
  }
  
  .seccion-residuos, .seccion-contenedores {
    margin: 10px;
  }
  
  .residuos, .contenedores {
    display: flex;
    flex-wrap: wrap;
    /*gap: 10px;*/
    justify-content: center;
  }
  
  .residuo, .contenedor {
    padding: 4px;
    background-color: #e0e0e0;
    border-radius: 18px;
    cursor: pointer;
    transition: background-color 0.5s, transform 0.2s;
    font-size: 16px;
    width: 250px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .residuo.seleccionado, .contenedor.seleccionado {
    background-color: #4caf50; /* Verde cuando seleccionado */
    color: white;
    transform: scale(1.25); /* Aumenta ligeramente el tamaño */
  }
  
  .contenedor.correcto {
    background-color: #2196f3; /* Azul cuando el contenedor es correcto */
    color: white;
    transform: scale(1.25); /* Aumenta ligeramente el tamaño */
  }
  
  /* Mensajes de éxito y error */
  .mensaje-exito, .mensaje-error {
    margin-top: 20px;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
  }
  
  .mensaje-exito {
    color: green;
  }
  
  .mensaje-error {
    color: red;
  }
  
  /* Estilos para las imágenes */
  .imagen-residuo, .imagen-contenedor {
    width: 80px;
    height: 80px;
    transition: all 0.3s ease;
  }
  
  /* Medios - agrandar las imágenes en pantallas grandes */
  @media (min-width: 768px) {
    .imagen-residuo {
      width: 100px;
      height: 100px;
    }
  
    .imagen-contenedor {
      width: 250px;
      height: 250px;
    }
  
    .residuo, .contenedor {
      width: 150px; /* Aumentar el tamaño del contenedor en pantallas grandes */
      font-size: 18px;
    }
  }
  
  /* Medios - mejorar la apariencia para pantallas pequeñas (celulares) */
  @media (max-width: 768px) {
    .imagen-residuo {
      width: 90px;
      height: 90px;
    }
  
    .imagen-contenedor {
      width: 160px;
      height: 160px;
    }
  
    .residuo, .contenedor {
      width: 100px; /* Tamaño más pequeño para los elementos */
      font-size: 18px;
    }
  }
  /* Botones de control */
  .btn-siguiente, .btn-reiniciar {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
  transition: background-color 0.3s ease;
  }
  
  .btn-siguiente:hover, .btn-reiniciar:hover {
  background-color: #45a049;
  }
  
  .btn-siguiente:disabled, .btn-reiniciar:disabled {
  background-color: #b5e6b0;
  cursor: not-allowed;
  }
  .seleccionado {
  background-color: #4CAF50;
  color: white;
  }
  /* Etapas y Puntaje */
  h2 {
  font-size: 22px;
  margin-top: 30px;
  color: #333;
  }
  
  
  /* Estilos para el título */
  .titulo {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  color: #4caf50; /* Color verde para destacar */
  margin-bottom: 20px; /* Espacio debajo del título */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para resaltar el texto */
  }
  
  /* Estilos para el texto del turno y puntaje */
  .turno-puntaje {
  font-size: 20px;
  font-weight: 600; /* Fuente semi-negrita */
  text-align: center;
  color: #333; /* Color oscuro para una mejor legibilidad */
  margin-top: 10px; /* Espacio superior */
  background-color: #f4f4f4; /* Fondo suave */
  padding: 10px; /* Relleno alrededor del texto */
  border-radius: 8px; /* Bordes redondeados */
  display: inline-block; /* Ajuste para que el fondo se ajuste al tamaño del texto */
  border: 2px solid #4caf50; /* Borde verde para llamar la atención */
  }
  /* Estilos para el cronómetro */
  .cronometro {
  font-size: 24px;
  font-weight: bold;
  color: #d32f2f; /* Color rojo para indicar urgencia */
  margin-top: 10px;
  }
  /* Estilos para las instrucciones */
  .instrucciones {
  font-size: 18px;
  color: #555;
  margin-bottom: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
  text-align: justify;
  
  }
  
  /* Estilos para el botón iniciar */
  .boton-iniciar {
  background-color: #4caf50;
  color: white;
  font-size: 18px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  }
  
  .boton-iniciar:hover {
  background-color: #45a049;
  }
  /* Estilo de selección para residuos y contenedores */
.seleccionado {
    transform: scale(1.25);
    background-color: #d1f7c4; /* Un tono verde claro */
    transition: transform 0.3s, background-color 0.5s;
   

}
.seleccionadoError {
    transform: scale(1.25);
    background-color: #ff0000; /* Un tono rojo  */
    transition: transform 0.3s, background-color 0.5s;
    animation: shake 0.5s ease-in-out;
}

/* Definimos la animación de temblor */
@keyframes shake {
    0% { transform: scale(1.25) translateX(0); }
    25% { transform: scale(1.25) translateX(-15px); }
    50% { transform: scale(1.25) translateX(15px); }
    75% { transform: scale(1.25) translateX(-15px); }
    100% { transform: scale(1.25) translateX(0); }
}
/* Efecto hover para dar feedback visual */
.residuo:hover,
.contenedor:hover {
    cursor: pointer;
    /* transform: scale(1.05);
    transition: transform 0.2s; */
}
/* Contenedor del puntaje en pantalla completa */
.puntaje {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 100px;
    color: #00ff00; /* Color verde brillante */
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    pointer-events: none; /* Evita interferir con otros elementos */
    animation: zoomInOut 1.5s ease-out forwards;
}

/* Animación de zoom in y zoom out */
@keyframes zoomInOut {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}
 /* Estilos básicos para el modal */
 .modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  font-family: Roboto, sans-serif;
  
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 30px;
  border: none;
  width: 90%;
  max-width: 500px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modal-header {
  font-size: 28px;
  font-weight: bold;
  color: #4caf50;
  margin-bottom: 10px;
}

.modal-message {
  font-size: 18px;
  margin-bottom: 20px;
  color: #333;
}

.score {
  font-size: 24px;
  font-weight: bold;
  color: #ff9800;
  margin: 15px 0;
}

.form-container {
  margin-top: 20px;
}

.email-input {
  width: 80%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.subscribe-btn{
  background-color: #45a049;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin: 5px;
  width: 45%;
}
.close-btn {
  background-color: #828882;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin: 5px;
  width: 45%;
}

.subscribe-btn:hover{
  background-color: #45a049;
}
.close-btn:hover {
  background-color: #828882;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.link {
  display: block;
  margin-top: 15px;
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.link:hover {
  text-decoration: underline;
}
.hidden {
  display: none;
}
canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* Confeti estará en el fondo */
}

/* styles.css */
table {
  width: 50%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  margin: 15px 140px;
  
}

table th, table td {
  border: 1px solid #ddd;
  padding: 8px;
}

table th {
  background-color: #f2f2f2;
  text-align: left;
  font-weight: bold;
}

table tr:nth-child(even) {
  background-color: #f9f9f9;
}

table tr:hover {
  background-color: #f1f1f1;
}