.resultado {
  width: 100%;
  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);
  background-color: #f9f9f9;
  text-align: center;
  display: flex;
  flex-direction: column;  /* Los elementos (imagen y texto) se organizarán de arriba a abajo */
  align-items: center;     /* Centra los elementos horizontalmente */
}

.resultado img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px; /* Bordes redondeados para la imagen */
  margin-bottom: 15px; /* Espacio entre la imagen y el texto */
}

.negrita {
  font-weight: bold;
  font-size: 1.2em; /* Puedes ajustar el tamaño del texto según lo desees */
  margin-top: 10px; /* Espacio superior entre la imagen y el nombre */
}




.principal-img {
   

    object-fit: cover;
}

.inicio{
    display: flex;
    flex-direction: row-reverse;
   

}
@media (max-width: 576px) {
    #tablaTallas {
        margin-bottom: 50px; /* Puedes ajustar el valor */
    }
}


  .login a{
 
  
    text-decoration: none; /* Quitar subrayado */
    color: navy; /* Cambiar color a azul marino */
font-size: x-large;
display: flex;
  padding-right: 1em;

}
}
.login{
    list-style: none;

}

ul {
    list-style-type: none; /* Quitar el punto */
    padding: 0; /* Opcional: quitar el padding */
    margin: 0; /* Opcional: quitar el margin */
}
 .registro a{
    list-style: none;

    text-decoration: none; /* Quitar subrayado */
    color: navy; /* Cambiar color a azul marino */  
 } 
.menuAlumno{
    width: 100%;
}

.main-content {
    flex: 1; /* Esta región ocupará el espacio disponible y empujará el pie de página hacia abajo */
}


.espacio{
    width: 100%;
    height: 40em;
}



.menu{

    display: flex;
    align-items:end;
   justify-content: space-between; 
 }


.derecha{
    margin-left: auto; 
}
.formulario{
   
        width: 100%;
   
      
    }
        
    
.alcentro{
    text-align: center;
}
.centra{
    
    margin-top: 10%;
    margin-left: 20%;
}
.titulo{
    text-align: center;
    color:  #0e083d;
 }


h1, h2 {
    font-family: 'Fjalla One', sans-serif;    
    font-weight: 700;
}

h1 {
    font-size: 3.5rem;
    line-height: 1.1em;
  
}

h2 {
    font-size: 2.5rem;
    line-height: 1.1em;
    margin-top: 0.5em;
    margin-bottom: 1em;
    text-align: center;
    
}

p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}




cite {
    font-style: normal;
}

abbr {
    text-decoration: none;
}

address {
    font-style: normal;
}


/*Clase para esconder un elemento que será visible únicamente a los lectores de pantalla (aplicado para mejorar la accesibilidad: enlace que permite ir directamente al contenido principal de la página)*/
.sr {
    position:absolute;
    height:1px;    
    width:1px;    
    overflow:hidden;    
    clip:rect(1px, 1px, 1px, 1px);
}





/*
Las reglas que van a continuación consiguen que los contenidos dentro del elemento de class .container se adapten a los diversos dispositivos.
La clase .container define un contenedor que ocupa el 100% de la pantalla del dispositivo, con un relleno por la izquierda y por la drecha de 15 píxeles, y márgenes por la izquierda y por la derecha automáticos, para conseguir un diseño centrado.
A continuación utilizaremos media queries, un módulo de CSS3 que permite adaptar la representación del contenido a las características del dispositivo y que se estudian en la unidad 7.
Con las 4 media queries utilizadas indicamos la anchura máxima que el .container debe tener cuando los dispositivos tengan la anchura mínima indicada por el punto de ruptura (breakpoint).
*/

.container {
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
}
    

@media (max-width: 560px) {
    .derecha{
        display: flex;
        flex-direction: column;
    }
    }


@media (max-width: 1136px) {
.menu{
    display: flex;
    flex-direction: column;
    align-items: center;
}

}
  
@media (min-width: 576px) {
    .container {
      max-width: 540px;
    }
}
  
@media (min-width: 768px) {
    .container {
      max-width: 720px;
    }
  
}
  

@media (min-width: 992px) {
    .container {
      max-width: 960px;
    }
}
  
@media (min-width: 1200px) {
    .container {
      max-width: 1140px;
    }
}

main {
    padding-top: 50px;
    padding-bottom: 50px;
    overflow: auto;
}

section {
    overflow: auto;
    padding-top: 50px;
    padding-bottom: 50px;
}


/****************************
Titular del sitio
*****************************/

div.banner {
    height: 200px;
    background: url('../uploads/imagenes/jamon-65400428ae793.png') no-repeat right center;
}

div.banner p.lead {
    font-weight: 300;
    color: #FFE600;
    font-size: 1.3rem;
}

/*************************
Contenidos del footer
**************************/
/*footer p {
    font-size: 0.8rem;
   background-color: beige;
}*/




/****************************
Menú de navegación del sitio
*****************************/
nav {
    text-align: center;
    background-color: #FFE600;
    
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline-block;
    padding: 15px;
    font-size: 1.5rem;
}

nav ul li:first-child {
    padding-left: 0;
}

nav ul li:last-child {
    padding-right: 0;
}

nav ul li a, nav ul li a:hover {
    border-bottom: none;
    color: #000;
}

nav ul li a.active, nav ul li a:hover {
    border-bottom: 2px solid #000;
}

/****************************
Página de inicio
*****************************/
#presentation p {
    font-size: 1.5rem;
}

.quote {
    padding-top: 15px;
    padding-bottom: 15px;
    font-style: italic;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
}

/*Cuando tengamos como mínimo 768px en el viewport, interesará que los elementos con estas clases floten a la izquierda o a la derecha, en caso contrario querremos que sigan el flujo normal de la página*/
@media (min-width: 768px) {
    .floatLeft {
        float: left;
    } 
    .floatRight {
        float: right;
    }    
    #presentation>.container>.floatLeft {
        width: 50%;
    }
    #presentation>.container>.floatRight {
        width: 40%;
    }
    #topics .floatLeft {
        width: 33%;
        padding: 15px;
    }
    #data>.container>.floatLeft {
        width: 45%;
        padding: 15px;
    }
    #data>.container>.floatRight {
        width: 45%;
        padding: 15px;
    }
}

#presentation h2, #topics h2 {
    padding: 0 0 30px 0;
}

#topics {
    background-color: #FFFBD4;
    text-align: center;
}

#topics img {
    max-width: 100%;
    height: auto;
}

#data h2 {
    border-bottom: 1px solid #000;
    text-align: left;
}

#data ul {
    list-style-type: none;
}

#data ul.inLine li {
    display: inline-block;
}

#data ul li a, #data ul li a:hover {
    border-bottom: none;
}

#data .info {
    margin-top: 2em;
    font-weight: 700;
}

/****************************
Programa
*****************************/
ul.programa {
    margin-left: 2rem;
}

ul.programa li {
    font-size: 2rem;
    list-style-type: none;
}

ul.programa li li {
    font-size: 1.1rem;
    margin-left: 5rem;
}
ul.programa li li span {
    font-size: 1.5rem;
    font-weight: 700;
}

/*Esta clase añadirá una barra de desplazamiento cuando sea necesario para que los usuarios que vean la tabla en dispositivos pequeños puedan desplazarse hacia la derecha para ver el contenido completo de la tabla */
.table-fluid {
    display: block;
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    margin: 50px auto;
    border-spacing: 0;
    border-collapse: collapse;
    border: 15px solid #5a858c;
}

caption {
    font-size: 1.5rem;
    background-color: #fff280;
}

thead tr, tfoot {
    background-color: #FFFBD4;
}

td, th {
    padding: 0.5em;
}

td,th {
    vertical-align: top;
    text-align: left;
}
td img {
    padding: 0.5em;
    width: 100px;}

th {
    font-weight: normal;
    font-size: 1.3rem;
}

tr.bordered {
    border-top: 1px solid #000; 
}

tfoot td p {
      font-size: 0.8rem;
      margin-bottom: 0;
      text-align: center;
}

/****************************
Inscripción: formulario
*****************************/
/****************************
Inscripción: formulario
*****************************/
.required {
    font-size: 0.9rem;
    text-align: center;
}
/*
form{
    padding: 2em;
}*/
.form-group {
    padding: 0.3em;
    max-width: 400px; /* Establecer un ancho máximo para los campos de entrada */
    margin: 0 auto; /* Centrar los campos de entrada horizontalmente */
  
    width: 95%;
}
 /* Media query para dispositivos móviles */
 @media only screen and (max-width: 468px) {
   
   
}
 

.custom-file{
    display: flex;
    align-items: center;
    justify-content: flex-start;  
}
input[type="date"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],

select,
textarea,
input[type="password"] {
    width: 100%; /* Hacer que los campos de entrada ocupen todo el ancho disponible */
    border: 1px solid #000;
    padding: 10px; /* Espaciado uniforme para los campos de entrada */
    font-size: 1rem; /* Tamaño de fuente ajustado */
    margin-bottom: 1rem; /* Espacio vertical entre los campos */
    box-sizing: border-box; /* Ajustar el tamaño total incluyendo el relleno y el borde */
    height:3em;

}
select,
textarea,
input[type="colaborador"] {
    width: 100%; /* Hacer que los campos de entrada ocupen todo el ancho disponible */
    border: 1px solid #000;
    padding: 10px; /* Espaciado uniforme para los campos de entrada */
    font-size: 1rem; /* Tamaño de fuente ajustado */
    margin-bottom: 1rem; /* Espacio vertical entre los campos */
    box-sizing: border-box; /* Ajustar el tamaño total incluyendo el relleno y el borde */
    height:17em;

}
fieldset {
    padding: 2rem;
    border: 1px solid #000;
    margin: 15px 0;
}

.outFieldset {
    padding: 2rem;
}
.outFieldset ul{
   list-style: none;
}

legend {
    font-weight: 700;
    font-size: 1.5rem;
}

form ul {
    list-style-type: none;
}

form ul li {
    margin-bottom: 1rem;
}

label {
    display: inline-block;
    /*width: 100px;  Anchura fija para el etiquetado */
    text-align: right; /* Alinear etiqueta a la derecha */
    padding-right: 10px; /* Espaciado a la derecha */
}

label.required::after {
    content: '*'; /* Añadir asterisco a las etiquetas obligatorias */
    color: red; /* Color del asterisco */
}

label span {
    display: block;
    font-size: 0.75rem;
}

ul.radioGroup:first-child {
    padding-top: 1rem;
}

.radioGroup label {
    display: inline;
}
label[for="imagen"] {
    display: inline-block;
    width: 100px; /* Ancho fijo para la etiqueta "imagen" */
    text-align: right; /* Alinear la etiqueta a la derecha */
    padding-right: 10px; /* Espaciado a la derecha */
}

input[type="file"] {
    border: 1px solid #000;
    padding: 10px;
    font-size: 1rem;
    width: calc(100% - 120px);
}


textarea {
    height: 15rem;
}

button, input[type="radio"], input[type="checkbox"] {
    width: auto;
}

button, input[type="radio"]+label, input[type="checkbox"]+label {
    display: inline;
}

button, input:focus, textarea:focus {
    background-color: #FFFBD4;
}

button, input[type="submit"] {
    display: inline-block;
    padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  color: rgb(21, 21, 21);
  background-color: #FFE600;
  border: 1px solid #f0bc10;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button, input[type="submit"]:hover {
    background-color: #f0bc10;
    cursor: pointer;
    margin-bottom: 10em;
}
a.formaBoton {
    display: inline-block;
    text-decoration: none;
   /* margin-right: 50%;*/

  }
  .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;
  }
  a.formaBoton1 {
    display: inline-block;
    text-decoration: none;
    margin-right: 4em;

  }
  .formaBoton1 {
    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;
  }
  form button{
    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;
      margin-right: 1em;
      margin-bottom: 10em;
}
  
/* Cuando tengamos como mínimo 768px en el viewport, interesará que los elementos con estas clases se muestren el uno al lado del otro y adapten su anchura */
@media (min-width: 768px) {
    li.controlInlineHalf {
        display: inline-block;
        width: 49%;
    }

    li.controlInlineHalf+li.controlInlineHalf {
        margin-left: 4px;
    }
    
    .half {
        width: 50%;
    }

    .third {
        width: 33%;
    }

    input.halfInline {
        width: 100%;
    }
  
}

/* Estilo para el texto dentro del li */
li span {
    font-size: 1em; /* Tamaño normal */
    margin-right: 2em;

}

/* Media query para pantallas de 340px de ancho o menos */
@media (max-width: 340px) {
    li span,ul li {
        font-size: 0.8em; /* Tamaño reducido */
    }
}
@media (max-width: 434px) {
nav  h1{
font-size: larger;
}

h1{
    font-size: 1.2em;
}
}
/* estilo para mostrar inscricpiones de alumno*/
/* Estilos generales */
/* Estilos para el saldo acumulado */
.saldo-acumulado {
    text-align: center;
    background-color: #6c9fd5;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 20px;
}

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

.saldo-acumulado p {
    font-size: 1.2em;
}
.resultados-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.resultado {
    width: 100%;
    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);
    background-color: #f9f9f9;
    text-align: center;
}

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

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

.li {
    list-style-type: none;
    margin-bottom: 20px;
}

.negrita {
    font-weight: bold;
}

/* Media queries para diferentes tamaños de pantalla */
@media only screen and (min-width: 768px) {
    /* Para tablet y desktop */
    .resultado {
        width: calc(33.33% - 40px);
    }
}

@media only screen and (max-width: 767px) {
    /* Para móvil */
    .resultado {
        width: calc(100% - 40px);
    }
}
.usuario-card {
    max-width: 400px; /* Ancho máximo de la tarjeta */
    margin: 20px auto; /* Centrar la tarjeta horizontalmente con margen superior e inferior */
    padding: 20px; /* Espacio interno dentro de la tarjeta */
    border: 3px solid #001f3f; /* Borde azul marino */
    border-radius: 15px; /* Borde con puntas redondeadas */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Estilos para los títulos dentro de la tarjeta */
.usuario-card h2 {
    margin: 10px 0; /* Margen superior e inferior */
    color: #001f3f; /* Color del texto azul marino */
}

/* Estilos para el contenido dentro de la tarjeta */
.usuario-card ul {
    list-style: none; /* Elimina los estilos de la lista */
    padding: 0; /* Elimina el relleno de la lista */
}

.usuario-card ul li {
    margin-bottom: 10px; /* Espacio entre elementos de la lista */
}

/* Estilos para los enlaces dentro de la tarjeta */
.usuario-card a {
    color: #007bff; /* Color del enlace azul */
    text-decoration: none; /* Sin subrayado */
}

.usuario-card a:hover {
    text-decoration: underline; /* Subrayado al pasar el ratón sobre el enlace */
}



/* codigo par botón de ver contraseña*/
.toggle-password {
    background: none;
    border: none;
   
 
    transform: translateY(-50%);
    cursor: pointer;
  }
  .ojo{display: flex
    ;}
  .toggle-password:focus {
    outline: none;
  }
  
  #toggleIcon {
    color: #777;
  }
  
  #inputPassword[type="password"] + .toggle-password #toggleIcon {
    color: #333;
  }
/*estilos busqyeda*/
/* Estilos para el formulario de búsqueda */
.busqueda {
    margin-bottom: 20px;
}

/* Estilos para la etiqueta del formulario */
.busqueda label {
    display: block;
    margin-bottom: 5px;
}

/* Estilos para el selector de viajes */
/* Estilos para el formulario de búsqueda */
.busqueda {
    margin-bottom: 20px;
    width: 25%; /* Ocupa el 25% del ancho */
    margin: 0 auto; /* Centra horizontalmente */
}

/* Estilos para el selector de viajes */
.busqueda select {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Estilos para el botón de búsqueda */
.busqueda button {
 
  
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

/* Estilos para dispositivos móviles */
@media screen and (max-width: 600px) {
    .busqueda {
        width: 90%; /* Ocupa el 90% del ancho */
    }
}



@media (max-width: 560px) {
  .logo {
  
    margin-top: 3em;
  }
}


@media (max-width: 768px) { /* Cambia 768px al tamaño que consideres móvil */
    p.letras{
display:none;
}
.login a{
padding:1em;
}