/* Reset */
/** {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}*/
/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fuente principal */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #fff;
  color: #000;
}
/*==========================*/
/*Pagina principal index.php*/
/*==========================*/
/* Barras superiores */
.top-bar {
  width: 100%;
  text-align: center;
  padding: 10px 0;
  font-weight: 600;
}

.purple {
  background-color: #5e17eb;
}

.green {
  background-color: #00c851;
}

.top-bar a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.top-bar img {
  width: 20px;
  vertical-align: middle;
  margin-right: 5px;
}

/* Contenido principal */
.main-content {
  text-align: center;
  padding: 30px 20px;
}

.welcome-text {
  font-size: 18px;
  margin-bottom: 10px;
}

.main-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 16px;
  margin-bottom: 20px;
  color: #555;
}

.arrow-down {
  font-size: 40px;
  color: #ee3135;
  margin-bottom: 20px;
  animation: bounce 0.6s infinite;
}

@keyframes bounce{
  0%, 100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(15px);
  }
}

/* Caja del sorteo */
.sorteo-box {
  border: 8px solid #3E4093;
  padding: 0px;
  max-width: 600px;
  margin: 0 auto 40px;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.sorteo-box:hover{
  transform: scale(0.95);
}

.sorteo-img {
  width: 100%;
  margin-bottom: 20px;
}

.sorteo-info h2 {
  font-size: 24px;
  color: #ee3135;
  margin-bottom: 10px;
}

.precio {
  font-size: 28px;
  color: #0000ff;
  font-weight: 700;
}

/* Footer */
.footer p{
  color: #fff;
  font-size: 12px;
  margin-bottom: 10px;
}
.footer {
  text-align: center;
  padding: 20px 10px;
  background-color: #3E4093;

}

.social-icons {
  margin-top: 10px;
}

.social-icons a {
  margin: 0 15px;
  color: #fff;
  font-size: 25px;
  display: inline-block;
  transition: transform 0.3s, color 0.3s;
}

.social-icons a:hover {
  transform: scale(1.5);
  color:#fff112;
}

/* Estilos para el popup */
.popup-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  display: flex; /*none oculta el popup*/
  /*opacity: 0;*//*inicia invicible popup*/
  justify-content: center;
  align-items: center;
  z-index: 99999;
  backdrop-filter: blur(2px);
}

.popup-content-video {
  position: relative;
  background: #3E4093;
  border: 4px solid #fff112 ;
  padding: 10px;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 60px;
}
.popup-content-video video {
  width: 100%;
  height: auto;
  max-height: 70vh;
  border-radius: 6px;
  display: block;
}

.close-btn {
  background-color: #ee3135;
  border: 10px solid #3E4093;
  color: #000;
  font-weight: bold;
  position: absolute;
  top: 1px;
  right: 1px;
  padding: 0px 12px;
  border-radius: 50%;
  font-size: 28px;
  cursor: pointer;
  z-index: 2;
}

/* Animación de entrada (disolverse)*/
/*@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.popup-video.show {
  display: flex;
  animation: fadeIn 0.1s ease-out forwards;
}*/

/*Animación de salida (disolverse) */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.popup-video.hide {
  animation: fadeOut 0.5s ease-in forwards;
}

body.no-scroll {
  overflow: hidden;
}

/*==========================================*/
/* Registro de participantes - registro.php */
/*==========================================*/
/* Seccion menu */
header {
  background-color: #f5f5f5;
  padding: 0 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.con-menu {
  padding-top: 60px;
}

header nav{
  height: 100%;
  display: flex;
  align-items: center;
}

header nav a {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding:  0 15px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: background-color 0.3s;
}
header nav a:hover{
  background-color: #742284;
  color: #fff112;
}
.iconmenu{
  font-size: 18px;
}
/* Sección de pago */
.payment-section {
  background-color: #742284;
  color: white;
  padding: 30px 10px;
  text-align: center;
}
.payment-number {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  width: 25%;/*modificado de 500px a 35%*/
  max-width: 100%;
  margin: 10px auto;
  display: block;
}
.qr-image {
  display: block;
  width: 100%;
  margin: auto;
  max-width: 300px;
}
.ticket-costo {
  font-size: 3rem;
  font-family: "DM Serif Text",serif;
  margin: 10px 0;
  background-color: #742284;
  color: #fff;
  border: none;
}
.ticket-costo option{
  font-size: 1rem;
  background-color: #fff;
  color: #000;
}
.arrow {
  font-size: 40px;
  margin-top: 20px;
  animation: bounce 1s infinite;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
      transform: translateY(0); 
  }
  40% {
      transform: translateY(-10px);
  }
  60% {
      transform: translateY(-5px);
  }
}
/* Sección de formulario */
.form-section {
  padding: 40px 10px;
  text-align: center;
}
.form-section .formulario{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-section .formulario input,
.form-section .formulario select {
  width: 15%; /*modificado de 250px a 90%*/
  max-width: 100%;
  margin: 10px 0;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.form-section .formulario input:first-of-type {
  margin-top: 1px;
}
.form-section .formulario .mensaje-error,
.form-section .formulario .subir-archivo .mensaje-error{
  width: 15%;
  max-width: 100%;
  color: #ee3135;
  font-size: 0.75rem;
  display: block;
}
.document-type{
  width: 15%; /*modificado de 250px a 90%*/
  max-width: 100%;
  display: inline-flex;
  border: 1px solid #999;
  border-radius: 5px;
  overflow: hidden;
  margin: 10px 0 2px 0;
}
.document-type input[type="radio"]{
  display: none;
}
.document-type label{
  flex: 1;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #eaeaea;
  color: #000;
  font-weight: bold;
  text-align: center;
  border-right: 1px solid #999;
  margin: 0;
  transition: background-color 0.3s;
}
.document-type label:last-child{
  border-right: none;
}
.document-type input[type="radio"]:checked + label{
  background-color: #3c3c42;
  color: #fff;
}

.subir-archivo {
  width: 15%;
  max-width: 100%;
  display: block;
}

.subir-archivo label {
  display: block;
  background-color: #7f2aa8;
  color: #fff;
  padding: 30px;
  margin: 10px 0;
  font-size: 1rem;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.subir-archivo label:hover {
  background-color: #19C6B3;
  color: #fff112;
}

.subir-archivo input[type="file"] {
  display: none;
}

.submit-btn {
  width: 15%;/*modificado de 250px a 90%*/
  max-width: 100%;
  padding: 10px 20px;
  background-color: #fff;
  color: #7f2aa8;
  border: 2px solid #7f2aa8;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.submit-btn:hover {
  background-color: #7f2aa8;
  color: #fff112;
}

/* Sección de cuenta regresiva */
.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*height: 300px;*/
  text-align: center;
  background-color: #3E4093;
  color: #fff;
  padding: 20px;
  font-size: 1rem;
  margin-top: 40px;
}
.countdown h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
#time-left{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.time-block{
  text-align: center;
}
.number{
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
}
.label{
  font-size: 0.8rem;
  font-weight: bold;
}
.label.days {
  color: #fff; /* Rojo para los días */
}

.label.hours {
  color: #fff; /* Naranja para las horas */
}

.label.minutes {
  color: #fff; /* Verde para los minutos */
}

.label.seconds {
  color: #fff; /* Azul para los segundos */
}

/* Sección de mensaje flotante*/
.flotante-mensaje {
  position: fixed; /* Para que el mensaje esté siempre en la misma posición */
  top: 0; /* Al principio de la página */
  left: 50%; /* Centrado horizontalmente */
  transform: translateX(-50%); /* Ajuste para centrarlo perfectamente */
  background-color: #4CAF50; /* Color de fondo verde */
  color: #fff; /* Color del texto */
  padding: 10px 20px; /* Espaciado dentro del mensaje */
  font-size: 16px; /* Tamaño de la fuente */
  z-index: 9999; /* Asegura que se muestre encima de otros elementos */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Sombra suave */
  border-radius: 5px; /* Bordes redondeados */
  opacity: 1;
  animation: mostrarMensaje 4s ease-in-out forwards; /* Animación para que desaparezca después de 5 segundos */
}

/* Animación de desvanecimiento */
@keyframes mostrarMensaje {
  0% {
      opacity: 1;
      top: 0;
  }
  90% {
      opacity: 1;
      top: 0;
  }
  100% {
      opacity: 0;
      top: -50px; /* Mueve el mensaje fuera de la vista */
  }
}

.popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.popup-content {
  background: #fff;
  border: 4px solid #19C6B3;
  padding: 20px 30px;
  border-radius: 10px;
  text-align: center;
  max-width: 300px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.popup-message{
  font-family: "DM Serif Text",serif;
  font-size: 1rem;
}

.popup-btn {
  width: 50%;/*modificado de 250px a 90%*/
  max-width: 100%;
  padding: 10px 20px;
  background-color: #fff;
  color: #7f2aa8;
  font-family: "DM Serif Text",serif;
  border: 2px solid #7f2aa8;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 20px;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.popup-btn:hover {
  background-color: #7f2aa8;
  color: #fff112;
}

/* Animación de entrada (disolverse)*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.popup-overlay.show {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Animación de salida (disolverse)*/
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.popup-overlay.hide {
  animation: fadeOut 0.3s ease-in forwards;
}

/*====================================================*/
/* buscar tickets de participantes - buscar_tiket.php */
/*====================================================*/
.container{
  text-align: center;
  margin-top: 60px;
}
.container h2{
  font-weight: bold;
}
.container .titulo{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.input-wrapper{
  position: relative;
  margin: 10px 0 20px 0;
}
.input-wrapper input{
  width: 247.2px;
  /*max-width: 100%;*/
  padding: 20px 10px;
  border: none;
  border-radius: 20px;
  background-color: #eee;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.btn-consultar{
  width: 15%;
  max-width: 100%;
  background-color: #fff;
  color: #7f2aa8;
  /*border: none;*/
  border: 2px solid #7f2aa8;
  padding: 12px 30px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 10px;
  transition: background-color 0.3s;
}
.btn-consultar:hover{
  background-color: #3E4093;
  color: #fff112;
}
.btn-volver{
  width: 15%;
  max-width: 100%;
  display: inline-block;
  background-color: #fff;
  color: #777;
  border: 2px solid #777;
  text-decoration: none;
  padding: 12px 30px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  transition: background-color 0.3s;
}
.btn-volver:hover{
  background-color: #777;
  color: #fff;
}
/*==============================================================*/
/* Resultado buscar tickets de participantes - buscar_tiket.php */
/*==============================================================*/

.resultado-tickets{
  margin: 30px auto;
  border-collapse: collapse;
  width: 80%;
  text-align: center;
}
.resultado-tickets th,
.resultado-tickets td{
  padding: 10px;
  border: 1px solid #ccc;
}
.resultado-dni{
  background-color: #000;
  color:#fff;
  padding: 10px 20px;
  margin-top: 20px;
  border: 1px solid #444;
  border-radius: 10px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}
.cuadro-tickets{
  background-color: #f5f5f5;
  color: #000;
  padding: 20px;
  margin: 30px auto;
  border: 2px dashed #555;
  border-radius: 10px;
  width: fit-content;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.titulo-cuadro{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;/*mejora visual para el titulo en mayuscula*/
}
.cantidad-tickets{
  background-color: #007bff;
  color: #00ffcc;
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
}
.contenedor-tickets{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 30px auto;
  max-width: 1200px;
  padding: 0 20px;
}
.tarjeta-ticket{
  background-color: #3E4093;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 15px 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  text-align: left;
  transition: transform 0.2s;
  max-width: 300px;
  margin: 0 auto;
  color: #fff;
}
.tarjeta-ticket:hover {
  transform: scale(1.03);
}
.tarjeta-ticket h4{
  margin-top: 10px;
  color: #fff112;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}
.tarjeta-ticket p{
  margin: 8px 0;
}
.fecha-sorteo{
  background-color: rgba(255, 255, 255,0.2);
  border: 1px solid #007bff;
  padding: 10px 6px;
  border-radius: 10px;
  /*font-weight: bold;*/
  margin-top: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.canal-atencion {
  margin-top: 30px;
  /*background-color: #f9f9f9;*/
  /*border: 2px solid #ccc;*/
  border-radius: 10px;
  padding: 20px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #333;
}
.canal-atencion .titulo {
  background-color: #00c851;
  cursor: pointer;
  padding: 20px 40px;
  margin-top: 20px;
  border: 2px dashed #444;
  border-radius: 40px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  text-align: center;
  transition: transform 0.2s;
}
.canal-atencion .titulo:hover {
  transform: scale(1.03);
}
.canal-atencion .titulo a{
  color:#fff;
  text-decoration: none;
  font-size: 18px;
}
.canal-atencion p {
  margin: 30px 0 0 0;
  line-height: 1.6;
}

/*=================*/
/*Estilo responsivo*/
/*=================*/
@media (max-width: 768px) {

  body {
    font-size: 16px;
    padding: 0;
  }

  .main-content, .form-section, .payment-section, .countdown {
    padding: 20px 10px;
  }

  .main-title {
    font-size: 28px;
  }

  .ticket-costo {
    font-size: 28px;
  }

  .payment-number {
    width: 100%;
    font-size: 18px;
  }

  .qr-image {
    max-width: 80%;
  }

  .form-section .formulario input,
  .form-section .formulario select,
  .submit-btn {
    width: 100% !important;
    max-width: none;
  }

  .form-section .formulario .mensaje-error{
  width: 100%;
  }

  .subir-archivo{
    width: 100%;
  }

  .document-type {
    width: 100%;
    /*flex-direction: column;*/
  }

  .document-type label {
    border-right: none;
    border-bottom: 1px solid #ccc;
  }

  .contenedor-tickets {
    grid-template-columns: 1fr;
    padding: 0 10px;
  }

  .tarjeta-ticket {
    max-width: 100%;
  }

  .btn-consultar,
  .btn-volver {
    width: 60%;
    padding: 14px;
    font-size: 1rem;
  }

  .canal-atencion {
    max-width: 100%;
    padding: 10px;
  }

  .canal-atencion .titulo {
    font-size: 1rem;
    padding: 10px 20px;
  }

  .flotante-mensaje {
    width: 90%;
    font-size: 14px;
  }
}