/* Estilos globales */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #eee;
  color: #333;
}

/* Encabezado */
.header {
  background-color: #fff;
  color: #000;
  text-align: center;
  width: 100%;
}

/* Contenedor principal */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Tarjeta de imagen */
.image-card {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-align: center;
  margin: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.image-card img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.image-card h3 {
  margin: 16px 0 8px;
  font-size: 1.2em;
  color: #333;
}
.image-card p {
  margin: 4px 0;
  color: #777;
}

  /* Mensaje de votación */
  .vote-message {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: opacity 0.3s ease;
    opacity: 0;
    animation: fadeInOut 3s forwards;
  }

  .success {
    background-color: #28a745; /* Color para mensajes de éxito */
  }

  .error {
    background-color: #dc3545; /* Color para mensajes de error */
  }


/* Animación para el mensaje de votación */
@keyframes fadeInOut {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}



/* Estilo por defecto: 3 columnas */
@media (min-width: 768px) {
  .image-group {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Para pantallas móviles: 2 columnas */
@media (max-width: 767px) {
  .image-group {
    grid-template-columns: repeat(1, 1fr);
  }
}
.container.svelte-n4uccf h3.svelte-n4uccf.svelte-n4uccf{margin:.4rem 0}.confirm-button.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{margin:10px auto;background-color:rgb(165, 165, 165);color:white;border:none;padding:10px 50px;cursor:pointer;transition:background-color 0.3s;border-radius:4px;font-size:1.2rem}.confirm-button.active.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{background-color:#F6A018;cursor:pointer}.image-card.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{position:relative;min-width:100%}.container-message.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{width:80%;margin:2rem auto}.vote-container.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{display:flex;gap:1rem;justify-content:space-between;padding:2rem 2rem}.vote-container.svelte-n4uccf .name.svelte-n4uccf.svelte-n4uccf{max-width:60%;text-align:left}.vote-container.svelte-n4uccf .question.svelte-n4uccf.svelte-n4uccf{vertical-align:middle}.vote-container.svelte-n4uccf .question textarea.svelte-n4uccf.svelte-n4uccf{flex-direction:column}.vote-container-text.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{text-align:left;padding:2rem 2rem}.vote-container-text.svelte-n4uccf .question.svelte-n4uccf.svelte-n4uccf{padding-top:1rem}#vote-numeric.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{display:flex;gap:5px;justify-content:center;margin-bottom:.5rem}.star.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{cursor:pointer;font-size:24px;transition:color 0.2s}.star.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf:hover{color:gold}.radio-group.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{display:flex;gap:15px;flex-direction:row;margin-bottom:.5rem}.radio-item.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{display:flex;align-items:center;gap:5px}.radio-group.svelte-n4uccf input[type="radio"].svelte-n4uccf.svelte-n4uccf{cursor:pointer;margin:0;appearance:none;border:2px solid #ccc;width:18px;height:18px;border-radius:50%;outline:none;display:inline-block;vertical-align:middle;transition:all 0.3s}.radio-group.svelte-n4uccf input[type="radio"].svelte-n4uccf.svelte-n4uccf:checked{border-color:#F6A018;background-color:#F6A018}.radio-group.svelte-n4uccf label.svelte-n4uccf.svelte-n4uccf{font-size:16px;cursor:pointer}.question-error.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{color:red;display:flex;justify-content:flex-end;position:relative;top:-1rem}.stars-group.svelte-n4uccf .radio-item.svelte-n4uccf.svelte-n4uccf{display:inline-block;position:relative}.stars-group.svelte-n4uccf .radio-item.svelte-n4uccf.svelte-n4uccf{display:inline-block;position:relative}.stars-group.svelte-n4uccf input[type="radio"].svelte-n4uccf.svelte-n4uccf{display:none}.stars-group.svelte-n4uccf label.svelte-n4uccf.svelte-n4uccf{cursor:pointer;font-size:1.5rem}.stars-group.svelte-n4uccf label.svelte-n4uccf.svelte-n4uccf:hover,.stars-group.svelte-n4uccf input.svelte-n4uccf:checked~label.svelte-n4uccf{color:gold}@media(max-width: 768px){.container.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{padding:0;width:auto;flex-direction:row}.container-message.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{width:auto;margin:1rem auto;font-size:1rem}.image-card.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{padding:1rem}.vote-container.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{flex-direction:column;gap:1rem;padding:1rem 0}.vote-container.svelte-n4uccf .name.svelte-n4uccf.svelte-n4uccf{width:auto;text-align:left}.vote-container-text.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{width:100%;padding:0}textarea.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{width:100% !important}.vote-container.svelte-n4uccf .question.svelte-n4uccf.svelte-n4uccf{width:auto;text-align:center}.stars-group.svelte-n4uccf label.svelte-n4uccf.svelte-n4uccf{font-size:1.2rem}.container-button.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{padding:0}.confirm-button.svelte-n4uccf.svelte-n4uccf.svelte-n4uccf{padding:10px 20px;font-size:0.9rem;width:100%;text-align:center}.image-card.svelte-n4uccf img.svelte-n4uccf.svelte-n4uccf{max-width:100%;height:auto}}