/*.iconoA {
  pointer-events: none; /* Desactiva cualquier acción del puntero del ratón 
}*/
  .principal-img {
    width: 100%;  /* Ancho predeterminado */
    height: auto;
    display: block;
    margin: 0 auto;  /* Centra la imagen */
}

.principal-img.botellin {
    width: 25%;  /* Ajusta a 45% si es un Botellín */
}


#ultimo{
  margin-bottom: 10em;
}
form{
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Asegúrate de que el contenedor no recorte la imagen */
.w-100 {
    overflow: hidden;
    position: relative;
}

/* Asegúrate de que la imagen se ajuste adecuadamente */
.card-img {
  
    height: auto;
    object-fit: cover; /* Ajusta la imagen para que cubra el contenedor */
}

.destacado{
  color:rgb(172, 170, 16)
}

#menuDesplegable {
  z-index: 1000; /* Un valor alto */


    position: relative;
    /* Otros estilos según sea necesario */
   
} 

img.icono{
  width: 13em;
}
#menuDesplegable ul{
  display: flex; 
  flex-wrap: nowrap ;    
}

.table-container {
  overflow-x: auto;
  color: #000000d1;
  max-width: 100%;
}


.table {
  width: 100%;
  background-color: white;
}

/* Opcional: Añade estilos para la cabecera y el pie de página */
.table thead th,
.table tfoot td {
  background-color: #f0f0f0; /* Color de fondo de la cabecera y el pie de página */
}



.desplegable img {
  width: 12em; /* Establece el ancho deseado para todas las imágenes */
 
}
.desplegableAdmin li img {
   width: 10em; /* Ancho deseado para todas las imágenes */
 /* Altura deseada para todas las imágenes */
padding: auto;
}
/* Estilo para dispositivos móviles con un ancho máximo de 768px */
@media only screen and (max-width: 479px) {
  .desplegable li img {
  
  
    width: 5px;
    height: 5px;
  }
}


.grupo{
  display: flex;
  flex-direction: column;
}
#menuDesplegable ul {
  list-style:none;
  margin:0;
  padding:0;
 }
 #menuDesplegableAdmin ul {
  list-style:none;
  margin:10em;
  padding:0;
 }

.derecha {
  display: flex;
}



 #menuDesplegable ul li {
  position:relative;
  float:left;
  margin:0;
  padding:10;
 }
 .espacio{
  line-height:120%;
 }
 /* efecto al pasar el ratón por los items del menu */
 
 #menuDesplegable ul li:hover {
 /* background:rgb(138, 138, 5);*/
  border-bottom: none;
}
 
/* menu desplegable */

#menuDesplegable ul ul {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  /*background:#eeeeee;*/
  padding:0;
 }
 
 /* items del menu desplegable */
 
 #menuDesplegable ul ul li {
  float:none;
  width:150px
 }
 
 /* enlaces de los items del menu desplegable 
 #menuDesplegable 
  ul ul a {
  line-height:120%;
  padding:10px 15px;
 }
 */
 /* items del menu desplegable al pasar el ratón */
 
 #menuDesplegable ul li:hover > ul {
  display:block;
 }
 .desplegable img {
  width: 8em; /* Establece el ancho deseado para todas las imágenes */
}

/* Evita que se apliquen estilos adicionales a las imágenes dentro del menú desplegable */
.desplegable img:hover {
  filter: none; /* Anula cualquier filtro aplicado al pasar el ratón sobre la imagen */
  /* Agrega cualquier otro estilo que necesites anular */
}
video {
  width: 50%;
  height: 50%;
}
::cue {
  color:rgb(138, 138, 5);;
  font: 0.5em sans-serif;
}
video::cue(v[voice="Girl"]) {
  color: lime;
}
.off {
  color: red;
  text-transform: uppercase;
}
#columna{
  display: flex;
  flex-direction: column;
}
.acti{
  text-align: center;
 width: 20em;
  }

.logo{
  margin-left: 2em;
}
.portada{
  width: 100%;
}
.texto{
 
  margin:2em;
}

.marco{
  text-align: end;
  width: 90%;
}
.id{
  font-size: smaller;
  padding: 0px;
  margin: 0em;
}
.idiomas{
  margin-left: auto;
  display: flex;
  margin-right: 2em;
  list-style: none;
}
 .menuAdmin{
  display: flex;
  flex-direction: column;
  text-align: center;
 }
 
.centrado{
  width:80%;
  position: absolute;
  top: 100px;
  left: 10px;
  }
  .carrusel-contenido{
    width: 90%;
    margin: auto;
  }
  .imagen{
    object-fit: cover;
    width: 100%;
    
    border-radius: 10px;
  }
  .imagen img:hover{
    filter: grayscale(100%);
    transform: scale(1.1);
  }

  .li{
   
    border: 15px solid  #0087ffa1;
    border-radius: 5px;
  } 

  .galeria{
   
     max-width: 95%;
      padding: 1rem;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 200px 200px 200px;
      grid-template-rows: 200px 200px 200px;
      grid-gap: 1rem;
      justify-items: center;

  }
    
    
    
  .datosSorteo{
   display: flex;
   flex-direction: column;
   text-align:center ;
   background-color:rgb(185, 187, 156);
   align-items: center;
  
}
/*imagenes de galeria responsive*/
.example-image {
  max-width: 100%; /* La imagen no será más ancha que su contenedor */
  height: auto; /* Permite que la altura se ajuste automáticamente según el ancho */
  display: block; /* Asegura que la imagen se comporte como un bloque */
  margin: 0 auto; /* Centra la imagen horizontalmente */
}
/* videos responsivos*/
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Proporción 16:9 para videos */
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


  
  .titulo{
    padding: 2em;
  }
  .actividadNombre{ 
    padding: 1em; 
  }

  @media (max-width:1252px){
    #menuAdmin{
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
    }
    #menuDesplegable ul li {
    font-size:1rem;
  }
}
  @media (min-width:100px){
    .galeria{
      display: flex;
      flex-direction: column;
      text-align: center;
    
      align-items: center;
    }
      .titulo{
      font-size:medium;
   }
   .imagen{width:90%;}
  
  }
  .tex{
    font-size: 1em;
    margin: 1em;
  }

   @media (min-width:240px){
    
    .titulo{
      font-size:x-large;
      padding-top:1em;  
   }
   .imagen{width:80%;}
   .tex{
    font-size: 1.5em;
  }

  }

  @media (min-width:400px){
    .imagen{width:70%;}
    .titulo{
      font-size:xx-large;
      padding-top:2em;  
   }

  }

  @media (min-width:720px){
    .galeria{
      display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 4em;
    }
    .tex{
      font-size: 2em;
    }
  }

  @media (min-width:800px){
    .tex{
      font-size: 2.5em;
    }
  }
  @media (min-width:1024px){
    .galeria{
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10% 10%; 
        padding: 5%;
  }
    
    .imagen{width:90%;
    padding-bottom:10em;
  padding-top: 5em;}
    .tex{
      font-size: 3em;
    }
    .negrita{
      font-size: 2em;
    }
  }
    @media (max-width:456px){
    footer.ul{
      display: flex;
      flex-direction: column;  
  }
  }
  @media (max-width:600px){
    footer.ul{
      display: flex;
    
  }
  ul.derecha{
    display: flex;
    flex-direction: column;
  }
  
    
  }

  @media (max-width:1068px){
    .adminTitulo{
     font-size: 3em;
    }
  }

  @media (max-width:914px) {
    .adminTitulo{
     font-size: 2em;
    }
    .titular{
      font-size: 1.2rem;
  }
    }

    @media (max-width:1252px) and (min-width: 972px){
      .desplegable li img{
        width: 7em;
      }
  }
    @media (max-width:971px) and (min-width: 874px){
      .desplegable li img{
        width: 6em;
      }
  }
  
  @media (max-width:873px) and (min-width: 725px){
    .desplegable li img{
      width: 5em;
    }
}
    @media (max-width:753px) and (min-width: 200px){
      .adminTitulo{
       font-size: 2em;
      }
      .titular{
        font-size: 1.2rem;
        display: flex;
    }
      .desplegable{
        display: flex;
        flex-direction: column;
        align-items: first baseline;
       
      }
      #menuDesplegable ul li {
        position:relative;
        float:right;
        margin:0;
        padding:0;
       }
       #menuDesplegable ul ul
       {
         display: none;
  
          position:relative;
          top:0%;
          left: 10px;
          background: #0087ffa1;
          padding:0;
          
         }
         .menuAdmin{
        
        height: 150%;
         }
         .titular{
          background-color: #ffe600;

        }
        .menuAdmin{
          width: 100%;
        }
      }
        @media (max-width:560px){
          .menu{
            display: flex;
            flex-direction: column;
          }
          .logo{
            margin-left: 0px;
          }
      }
      @media (max-width:754px) and (min-width:479px) {
       .desplegable li img{
        width: 10em;
    height: 10em;
       }
    
       #menuDesplegable ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    
  }
      @media (max-width:500px){
        .menuMovil{
          display: flex;
          flex-direction: column;
        }
   
          .desplegable li img{
           width: 6em;
       height: 6em;
          }
          .menuAdmin {
            align-items:flex-start;
          }
      }

     
      .flash-link {
        background-color: #7FFF00;
        color: #000;
        padding: 10px;
        border-radius: 5px;
        text-decoration: none;
    }
    
    .flash-link:hover {
        text-decoration: underline;
    }
  
  /* estilo para dar enorabuena por apuntarte a una actividad*/
  /* public/css/estilos.css */

.notificacion {
  background-color: #4CAF50; /* Color verde */
  color: white;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
}

.notificacion h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

.notificacion p {
  font-size: 18px;
  margin-top: 0;
}

.menuAdmin {
  /* Agrega estilos adicionales según tus necesidades */
  padding: 10px;
  background-color: #2782d4a1;
  color: white;
  align-items: center;
  height: auto;
  text-align: center;
   height: auto;
  font-family: 'Roboto', sans-serif; /* Selecciona una fuente atractiva */
  
 
}
.menuAdmin1{

    padding: 10px;
    background-color: #2782d4a1;
    color: white;
    align-items: center;
    height: auto;
    text-align: center;
    height: auto;
    font-family: 'Roboto', sans-serif;

    width: auto;
}
.menuAdmin h1 {
  font-size: 26px; /* Tamaño de letra base */
  font-weight: bold; /* Texto en negrita */
  letter-spacing: 1px; /* Espaciado entre letras */
  
}

.menuAdmin .centro {
  font-style: italic; /* Texto en cursiva */
  text-decoration: underline; /* Texto subrayado */
}






/* Media query para tablet */
@media screen and (max-width: 768px) {
  .menuAdmin h1 {
      font-size: 22px; /* Reducir tamaño de letra en tablet */
  }
}

/* Media query para dispositivos móviles */
@media screen and (max-width: 480px) {
  .menuAdmin h1 {
      font-size: 18px; /* Reducir tamaño de letra en móvil */
  }
}
/*
.menuAdmin a {
  color: white;
  margin-right: 10px;
  text-decoration: none;
}

.menuAdmin a:hover {
  text-decoration: underline;
}*/

.formulario {
  margin-top: 20px;
 /* padding: 20px;*/
  border: 1px solid #ccc;
  border-radius: 5px;
  padding-bottom: 10em;
}
.menuSupeAdmin{
  width: 100%;
  background-color: #224685;
}
.centro {
  text-align: center;
  margin-top: 20px;
  margin: auto;
 
}
.videoPresentacion {

   display: flex;
  flex-direction: column;
  align-items: center;

 
}
/*  para que los enlacres tengan forma de boton he creado una case formaBoton*/
/* Estilo base para el botón */
.formaBoton {
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  color: rgb(84, 84, 84);
  background-color: #FFE600;;
  border: 1px solid #f0bc10;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 1em;
}

/* Cambia el color del botón al pasar el cursor por encima */
.formaBoton:hover {
  background-color: #f0bc10;
}

/* Estilo para el botón cuando está deshabilitado */
.formaBoton.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Estilo para los enlaces que se convierten en botones */
a.formaBoton {
  display: inline-block;
  text-decoration: none;
  
}

/* Estilo para los enlaces que se convierten en botones cuando el cursor está sobre ellos */
a.formaBoton:hover {
  text-decoration: none;

}

/* Estilo para los enlaces que se convierten en botones incluso cuando no se está sobre ellos */
a.formaBoton .formaBoton {
  background-color:#FFE600;
}

/* Estilo para los enlaces que se convierten en botones incluso cuando no se está sobre ellos (cuando se están deshabilitados) */
a.formaBoton.disabled .formaBoton {
  opacity: 0.6;
}
/*para la primera pagina del viaje */
/* Estilo para centrar el contenido */
/* Estilos específicos para diferentes tamaños de pantalla */
/* Estilos para pantalla grande (PC) */
@media only screen and (min-width: 1024px) {
  .centro {
      max-width: 90%;
     
  }
  .portada {
      width: 100%;
  }
}

/* Estilos para tabletas */
@media only screen and (min-width: 768px) and (max-width: 1136px) {
  .centro {
      max-width: 768px;
    
  }
  .portada {
      width: 100%;
  }
}
/* Estilos para movil */
@media only screen and (min-width: 300px) and (max-width: 767px) {
  .centro {
      max-width: 500px;  
  }
  .portada {
      width: 100%;
  }

}
/* Estilos generales para presentacion de actividades*/
.actividades-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.actividad {
  width: 90%;
  max-width: 400px;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  background-color: #f9f9f9;
}

.actividad img {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
  border-radius: 5px;
}

.actividad h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.actividad p {
  font-size: 1em;
  margin-bottom: 5px;
}

.actividad form {
  margin-top: 10px;
}

.actividad button {
  padding: 10px 20px;
  font-size: 1em;
 
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.actividad button:hover {
  background-color:d #f0bc10;
}

/* Estilos generalespara tarjeta de datos de cada alumno */
.perfil-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.perfil {
  width: 90%;
  max-width: 600px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
  text-align: center;
}

.perfil h2 {
  font-size: 1.5em;
  margin-bottom: 20px;
}

.perfil ul {
  padding: 0;
  list-style: none;
 
}

.perfil li {
  margin-bottom: 10px;
  text-align: left; /* Alinea el texto a la izquierda */
  display: inline-block; /* Muestra cada li en una sola línea */
  width: 100%; /* Ocupa todo el ancho disponible */

}

.titulo {
  font-weight: bold;
}
.perfil li span {
  font-size: 1.2em; /* Tamaño de fuente */
  font-weight: bold; /* Peso de la fuente */
  color: #333; /* Color del texto */
}
.perfil li  {
  font-size: 1.2em; /* Tamaño de fuente */
  font-weight: bold; /* Peso de la fuente */
  color: #224685; /* Color del texto */
}
/* Media queries para diferentes tamaños de pantalla */
@media only screen and (max-width: 768px) {
  /* Para tablet y móvil */
  .perfil {
      width: calc(100% - 40px);
  }
}

@media only screen and (min-width: 769px) {
  /* Para PC */
  .perfil {
      width: 80%;
  }
}
/* estilos para formularios */
.formulario .campo {
  margin-bottom: 10px;
  display: flex;
}
.formulario .campo label {
  display: inline-block;
  width: 200px; /* Ancho fijo para los labels, ajusta según sea necesario */
}
.formulario .asterisk::after {
  content: "*";
  color: red;
  margin-left: 5px;
}
.formulario .input {
  margin-left: 10px; /* Ajusta el margen entre el label y el input según sea necesario */
}

/* Estilos responsivos */
@media only screen and (max-width: 768px) {
  .formulario .campo label {
      width: 100%; /* Cambia el ancho de los labels para ocupar todo el espacio en dispositivos móviles */
      margin-bottom: 5px; /* Reducir el margen inferior de los labels en dispositivos móviles */
  }
  .formulario .campo{
     display: block; 
  }
  .formulario .input {
      margin-left: 0; /* Ajustar el margen izquierdo de los inputs en dispositivos móviles */
      width: 100%;
  }
}
.center{

    display: flex;
    flex-direction: column;
    align-items: center;
  }

 
  @media (min-width: 1000px) and (max-width: 1027px) {
    #menuDesplegable ul li {
        font-size: 1rem;
        width: 9em;
    }
}
   h1.responsive-title {
        font-size: 4em; /* tamaño por defecto */
    }
    @media (max-width: 1200px) {
        h1.responsive-title {
            font-size: 3.8em;
        }
    }
    @media (max-width: 992px) {
        h1.responsive-title {
            font-size: 2.6em;
        }
    }
  
    /* styles.css */

/* Estilos para la cuadrícula de la porra */
.porra-grid {
    display: grid;
    gap: 10px;
}

.porra-number {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-size: 1.5em;
    color: white;
    cursor: pointer;
    background-color: var(--color);
}

/* Colores de fondo para los números */
.porra-number:nth-child(1) { background-color: #ff6666; }
.porra-number:nth-child(2) { background-color: #ffcc66; }
.porra-number:nth-child(3) { background-color: #ffff66; }
.porra-number:nth-child(4) { background-color: #66ff66; }
.porra-number:nth-child(5) { background-color: #66ffcc; }
.porra-number:nth-child(6) { background-color: #66ccff; }
.porra-number:nth-child(7) { background-color: #6666ff; }
.porra-number:nth-child(8) { background-color: #cc66ff; }
.porra-number:nth-child(9) { background-color: #ff66cc; }
.porra-number:nth-child(10) { background-color: #ff6666; }

/* Ocultar números vendidos */
.porra-number.vendido {
    visibility: hidden;
}

/* Seleccionar números */
.porra-number.selected {
    border: 2px solid #000;
}

/* Responsive Grid */
@media (min-width: 1200px) {
    .porra-grid {
        grid-template-columns: repeat(10, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .porra-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 767px) {
    .porra-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
  
    .btn-llamativo {
        display: inline-block;
        background-color: #FFE600; /* Color amarillo llamativo */
        color: #003366; /* Azul marino para el texto */
        padding: 15px 40px; /* Tamaño del botón para hacerlo fácilmente clicable */
        text-decoration: none; /* Sin subrayado */
        font-size: 1.5rem; /* Tamaño de fuente accesible */
        border-radius: 10px; /* Bordes redondeados */
        border: 2px solid #003366; /* Borde en azul marino */
        text-align: center;
        font-weight: bold; /* Texto en negrita */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para resaltar el botón */
        transition: background-color 0.3s, transform 0.3s; /* Efectos visuales al interactuar */
    }

    .btn-llamativo:hover,
    .btn-llamativo:focus {
        background-color: #ffd700; /* Cambio de color al pasar el cursor */
        transform: translateY(-3px); /* Efecto de elevación en hover */
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
        outline: none; /* Eliminar el contorno en focus */
    }

    .btn-llamativo:focus-visible {
        outline: 3px dashed #003366; /* Contorno accesible en focus */
        outline-offset: 4px; /* Separar el contorno del botón */
    }

    .btn-llamativo span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-llamativo::before {
        content: "🖱️ "; /* Ícono de clic */
        margin-right: 10px; /* Espacio entre el ícono y el texto */
    }







.carrito{
display:flex;
flex-direction:column;
}