@import "dashboard";
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */



 body {
  font-family: Arial, sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
  
  background-size: cover;
  background-color: #0056b3;
  }
  
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  /* Estilos para la tabla */
  .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }
  
  .table th, .table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  
  .table th {
    background: linear-gradient(135deg, #ac2901 0%, #bf7c00 100%);
    color: white;
  }
  
  /* Estilos para el formulario */
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  /* Botones */
  .btn {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    background-color: #e93232;
    color: white;
  }
  
  .btn:hover {
    background-color: #00bfae;
  }


  .form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Botones */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background-color: #e93232;
  color: white;
}

.btn:hover {
  background-color: #fd3737;
}

/* Estilos para las vistas show y edit */
.show, .edit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.show h1, .edit h1 {
  color: #e93232;
}

.show .container, .edit .container {
  width: 80%;
  margin-top: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.show .form-group label, .edit .form-group label {
  font-weight: bold;
}

.show .form-group input, .edit .form-group input {
  margin-top: 8px;
}

.show .btn, .edit .btn {
  margin-top: 16px;
}

.form2-container {
  background-color: #cffaee;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
}

.form2-group {
  margin-bottom: 1rem;
}

.form2-label {
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
}

.form2-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.form2-input:focus {
  border-color: #e93232;
  outline: none;
  box-shadow: 0 0 0 2px rgba(17, 204, 153, 0.2);
}

.form2-actions {
  text-align: right;
}

.form2-submit {
  background-color: #e93232;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form2-submit:hover {
  background-color: #e93232;
}


/* Contenedor de fondo */
.background-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Cuadro del formulario */
.form-wrapper {
  background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco con opacidad */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  padding: 2rem;
  width: 100%;
  box-sizing: border-box;
}

/* application.scss */

/* Contenedor del encabezado */
.header {
  position: relative;
  width: 100%;
}

/* Imagen del encabezado */
.header-image {
  width: 100%;
  height: auto; /* Mantiene las proporciones de la imagen */
  display: block;
}

/* Contenido del encabezado */
.header-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  z-index: 1; /* Asegura que el texto esté sobre la imagen */
}

/* Consultas de medios para dispositivos pequeños */
@media (max-width: 768px) {
  .header-content {
    font-size: 0.8em; /* Ajusta el tamaño del texto */
  }
}

/* Consultas de medios para dispositivos móviles */
@media (max-width: 480px) {
  .header-content {
    font-size: 0.7em; /* Ajusta el tamaño del texto */
  }
}

/* styles.css */

/* Estilo global del encabezado */
.elegant-header {
  font-family: 'Arial', sans-serif; /* Fuente moderna y clara */
  font-size: 3rem; /* Tamaño grande del texto */
  color: #ddd; /* Color principal */
  text-align: center; /* Centramos el texto */
  margin: 20px; /* Espaciado alrededor del encabezado */
  padding: 20px; /* Espaciado interno */
  border-radius: 10px; /* Bordes redondeados */
  background: linear-gradient(135deg, #e93232 0%, #fc4c4c 100%); /* Gradiente divertido */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Sombra de texto */
  transition: transform 0.3s ease, color 0.3s ease; /* Transiciones suaves */
}

/* Efecto de animación en hover */
.elegant-header:hover {
  transform: scale(1.1); /* Agrandar el texto al pasar el ratón */
  color: #e74403; /* Cambiar el color al pasar el ratón */
}




.header-image2 {
  width: 50%;
  height: auto; /* Mantiene las proporciones de la imagen */
  display: block;
  margin: 0 auto;
}

.button-cont {
  text-align: center; /* Centra el botón horizontalmente */
}

.countdown-container {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
}

/* Estilo para el círculo que rodeará el contador */
.circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 5px solid lightblue;
  border-radius: 50%;
  animation: rotateCircle 10s infinite linear;
}

#countdown {
  font-weight: bold;
  color: #00ffc8;
  z-index: 10;
}

#raffle-result {
  
  color: #28a745;
}

@keyframes rotateCircle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}