@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'Rubik', arial, helvetica, sans-serif;
    min-height: 100vh;
    /* correccion paraq chrome en cel */
    min-height: -webkit-fill-available;
    /* caja flexible*/
    display: flex;
    /* dirección de sus elementos */
    flex-direction: column;
    /* organización de los elementos según ele eje principal
    (vertical por la propiedad anterior) */
    justify-content: space-between;
}


html {
    /* correccion paraq chrome en cel */
    height: -webkit-fill-available;
}

img {
    /* para que una imagen nunca sea mayor
        que la caja que las contiene */
    max-width: 100%;
    height: auto;
}


header,
footer {
    padding: .5em;
    flex-grow: 0;
}

header{
    
    /* caja flexible */
    display: flex;
    width: 100vw;
    /* elementos colocados en los extremos del eje principal */
    justify-content: space-between;
    /* elementos centrados en el eje secundario */
    align-items: center;
}

#logo {
    margin: 1em;
    display: block;
    width: 11em;
}

.contenedora {
    max-width: 50rem;
    display: flex;
    justify-content: space-between;
}

header ul {
    list-style: none;
    /* caja flexible */
    display: flex;
}

header ul li {
    width: 2em;
    height: auto;
    margin-left: .25em;
    /* caja flexible */
    display: flex;

}
header ul li a {
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-weight: bold;
    padding-right:.5rem;
    /* caja flexible */
    display: flex;
    
    /* centrado en la horizontal */
    justify-content: center;

    /* centrado en la vertical */
    align-items: center;
    
}
nav .botonera{
    margin-top: 1em;


}

.botonera ul{
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 1.5em;
    font-weight: 600;
}

.botonera ul li{
    list-style: none;
    width: 33%;
    
}

.botonera ul li a{
    color: black;
    text-decoration: none;
}
.botonera ul li a:hover{
    color: orange;
    text-decoration: none;
}

.active {
    color: orange;
    border-bottom: 3px solid orange;
}

video {
    width: 100%;
    height: auto;
}

main {
    background-color: white;

    /* crece para "llenar" la caja contenedora */
    flex-grow: 1;
    
    /* es caja flexible contenedora */
    display: flex;
    
    /* permite a sus cajas contenidas ir a la siguiete línea */
    flex-wrap: wrap;
    
    /* dirección de sus elementos */
    flex-direction: column;
}

.guardar ul {
    width: 100%;
    height: 100%;
    list-style: none;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.guardar ul li a{
    list-style: none;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 0.2em solid #003366;
    border-radius: 50em;
    color: #003366;
    text-decoration: none;
    font-weight: 500;
    /* caja flexible */
    display: flex;
    /* centrado en la horizontal */
    justify-content: center;
    /* centrado en la vertical */
    align-items: center;
    padding: 0.2em 2em 0.2em 2em;
}

.guardar ul li a:hover{
    background-color: #003366;
    color: white;
    text-decoration: none;
}

.detalleinsc main h1 {
    text-align: start;
    color: black;
    font-size: 1em;
    font-weight: 600;
    margin: 0em 2em 2em 2em;
}

.detalleinsc main h2{
    text-align: start;
    color: #999999;
    font-size: 1em;
    font-weight: 400;
    margin: 0em 2em 1em 2em;
}

.detalleinsc main p{
    text-align: start;
    border-bottom: 1px solid #003366;
    margin: 0em 2em 1em 2em;
    box-sizing: border-box;
}

.galeria {
    padding: 1em;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

.galeria img {
    width: 100%;
    box-shadow: .3em .2em .5em silver;
}

.galeria .img1, .img9 img {
    width: 100%;
}

.galeria .img2y3 {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: flex-start;
}

.galeria .img4y5 {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: flex-start;
}

.galeria .img6-7-8 {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: flex-start;
}

.galeria main ul li{
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


.registrarme ul {
    width: 100%;
    height: 100%;
    list-style: none;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.registrarme ul li a{
    list-style: none;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 0.2em solid #003366;
    border-radius: 50em;
    color: #003366;
    text-decoration: none;
    font-weight: 500;
    /* caja flexible */
    display: flex;
    /* centrado en la horizontal */
    justify-content: center;
    /* centrado en la vertical */
    align-items: center;
    padding: 0.2em 2em 0.2em 2em;
}

.registrarme ul li a:hover{
    background-color: #003366;
    color: white;
    text-decoration: none;
}

.registro main h2{
    text-align: start;
    color: #999999;
    font-size: 1em;
    font-weight: 400;
    margin: 0em 2em 1em 2em;
}

.registro main p{
    text-align: start;
    border-bottom: 1px solid #003366;
    margin: 0em 2em 1em 2em;
    box-sizing: border-box;
}

.avatarregistro img{
    display: flex;
    margin: 1em .5em;
    justify-content: center;
    width: auto;
    padding: 0.2em 2em 0.2em 10em;
    
}


footer{
    background-color: orange;
    border-radius: 7px 7px 0 0;
}

footer nav ul{
    display: flex;
    justify-content: space-between;
    margin: .5em;
}

footer nav ul li{
    width: 3rem;
    height: 3rem;
    text-decoration: none;
    list-style: none;
    margin: .2em;
}

/* ****************
 *  mediaqueries  *
 **************** */

/* a partir de un ancho de 480px 

@media ( min-width: 30em ) {
    
    .usuario {
        text-align: left;
        width: 90%;
        max-width: 35em;
        display: flex;
    }
    
    .usuario img {
        width: 5em;
        height: 5em;
        max-width: 5em;
        max-height: 5em;
        margin-right: 1em;
    }
}

/* a partir de un ancho de 640px 

@media ( min-width: 40em ) {
    
    main {
        flex-direction: row;
        justify-content: center;
    }
    
    .usuario,
    section {
        width: 45%
    }

}

.select-css {
    list-style: none;
    width: 10%;
    height: 100%;
    background-color: transparent;
    border: 0.2em solid #E45812;
    border-radius: 50em;
    padding: 0.2em 2em 0.2em 2em;
    margin: 0em 0em 3em 2em;
    color: #E45812;
  
      }

/* Month header */
.month {
  margin:  0em 3em 0em 2em;
  padding:  0.2em 2em 0.2em 2em;;
  background-color:transparent;
    border: 0.1em solid #110702;
    border-radius: 1em;
    text-align: center;
    
   
}

/* Month list */
.month ul {
  margin: 0em 3em 0em 2em;
  padding: 0;
}

.month ul li {
  color: black;
  font-size: 20px;

}

/* boton */
.month .prev {
  float: left;
  padding-top: 10px;
}

/* boton */
.month .next {
  float: right;
  padding-top: 10px;
}

/* Dias semana (Mon-Sun) */
.weekdays {
  margin:  0em 3em 0em 2em;
  padding:  0.2em 2em 0.2em 2em;;
  background-color:transparent;
    border: 0.1em solid #110702;
    border-radius: 1em;
}

.weekdays li {
  display: inline-block;
  width: 13.6%;
  color: #666;
  text-align: center;
}

/* Dias (1-31) */
.days {
  padding: 10px 0;
  background: transparent;
  margin:  0em 3em 3em 2em;;
    border: 0.1em solid #110702;
    border-radius: 1em;
}



.days li {
  list-style-type: none;
  display: inline-block;
  width: 13.6%;
  text-align: center;
  margin-bottom: 5px;
  font-size:12px;
  color: #110702;
}

/* Highlight the "current" day */
.days li .active {
  padding: 5px;
  background:#110702;
  color: white
        border: 1em solid #110702;
    border-radius: 1em;
 
}

.confirmarinscripcion ul {
    width: 100%;
    height: 100%;
    list-style: none;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.confirmarinscripcion ul li a{
    list-style: none;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 0.2em solid #003366;
    border-radius: 50em;
    color: #003366;
    text-decoration: none;
    font-weight: 500;
    /* caja flexible */
    display: flex;
    /* centrado en la horizontal */
    justify-content: center;
    /* centrado en la vertical */
    align-items: center;
    padding: 0.2em 2em 0.2em 2em;
}

.confirmarinscripcion ul li a:hover{
    background-color: #003366;
    color: white;
    text-decoration: none;
}

.inscripcion main h1 {
    text-align: start;
    color: black;
    font-size: 1em;
    font-weight: 600;
    margin: 0em 2em 1em 2em;
    padding: 0.2em 2em 0em 0em;
}

.inscripcion main h2{
    text-align: start;
    color: #999999;
    font-size: 1em;
    font-weight: 400;
    margin: 0em 2em 1em 2em;
    
}

.inscripcion main p{
    text-align: start;
    border-bottom: 1px solid #003366;
    margin: 0em 2em 1em 2em;
    box-sizing: border-box;
}

.inscripcion main {
    background-color: white;

    /* crece para "llenar" la caja contenedora */
    flex-grow: 1;
    
    /* es caja flexible contenedora */
    display: block;
    
    /* permite a sus cajas contenidas ir a la siguiete l?nea */
    flex-wrap: wrap;
    
    /* direcci?n de sus elementos */
    flex-direction: column;
    
}

.select-css {
    list-style: none;
    width: 10%;
    height: 100%;
    background-color: transparent;
    border: 0.2em solid #E45812;
    border-radius: 50em;
    padding: 0.2em 2em 0.2em 2em;
    margin: 0em 0em 3em 2em;
    color: #E45812;
  
      }