/* Estilos generales */
@font-face {
    font-family: 'Open 24 Display';
    src: url('../fonts/open24displayst.ttf');
}

* {
    box-sizing: border-box;
    font-family: 'Roboto';
}

html {
    position: relative;
}

html,
body {
    margin: 0;
    padding: 0;
}

main {
    padding-top: 5.5em;
    padding-bottom: 6.4em;
    position: relative;
}

.wrapper {
    height: calc(100vh - 6.4em);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

input,
textarea {
    width: 100%;
    max-width: 16em;
    margin: 0 auto 0.9em auto;
    border: 0;
    padding: 0.8em 1.6em;
    display: block;
    font-size: 1.1em;
    outline: 0;
}

input {
    border-radius: 3em;
}

textarea {
    border-radius: 1em;
}

.btn {
    margin: 0 auto;
    border: 0;
    border-radius: 3em;
    padding: 0.8em 2em;
    display: block;
    color: #FFFFFF;
    font-size: 1.3em;
}

.btn-verde {
    background-color: #30923E;
}

.btn-verde a {
    color: #FFFFFF;
    text-decoration: none;
}

.btn-negro {
    background-color: #000000;
}

.btn-negro a {
    color: #FFFFFF;
    text-decoration: none;
}

.icono {
    display: inline-block;
    background-position: center;
}

.icono-miperfil {
    width: 34px;
    height: 34px;
    background-image: url("../img/icono-miperfil.png");
}

.icono-entrenamiento {
    width: 34px;
    height: 34px;
    background-image: url("../img/icono-entrenamiento.png");
}

.icono-torneo {
    width: 34px;
    height: 34px;
    background-image: url("../img/icono-torneo.png");
}

.icono-musica {
    width: 34px;
    height: 34px;
    background-image: url("../img/icono-musica.png");
}

.icono-contacto {
    width: 34px;
    height: 34px;
    background-image: url("../img/icono-contacto.png");
}

.icono-reproductor-ant {
    width: 34px;
    height: 23px;
    background-image: url("../img/reproductor-ant.png");
}

.icono-reproductor-play {
    width: 26px;
    height: 33px;
    background-image: url("../img/reproductor-play.png");
}

.icono-reproductor-sig {
    width: 34px;
    height: 23px;
    background-image: url("../img/reproductor-sig.png");
}

header .titulo {
    height: 3.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #30923E;
    text-align: center;
    color: #FFFFFF;
}

header nav.menu {
    height: 3.2em;
    background-color: #DDDDDD;
}

header nav.menu ul {
    height: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

header nav.menu ul li a {
    display: block;
}

.titulo-general {
    margin: 1.2em 0;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    font-weight: 500;
    text-align: center;
}

footer {
    padding: 1.4em;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #DDDDDD;
    text-align: center;
    font-size: 0.7em;
}

@media (min-width: 801px) {
    header nav.menu ul li i {
        display: none;
    }

    header nav.menu ul li a {
        vertical-align: middle;
        color: #000000;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        text-decoration: none;
    }

    header nav.menu ul li:first-of-type a:before {
        content: 'Mi perfil';
    }

    header nav.menu ul li:nth-of-type(2) a:before {
        content: 'Entrenamiento';
    }

    header nav.menu ul li:nth-of-type(3) a:before {
        content: 'Torneo';
    }

    header nav.menu ul li:nth-of-type(4) a:before {
        content: 'Música';
    }

    header nav.menu ul li:nth-of-type(5) a:before {
        content: 'Mensaje';
    }
}

/* Estilos de configurar-rutina.html */
body.configurar-rutina input {
    background-color: #DDDDDD;
}

/* Estilos de contacto.html */
body.contacto input,
body.contacto textarea {
    background-color: #DDDDDD;
    color: #000000;
}

body.contacto textarea {
    height: 7em;
}

body.contacto button {
    margin-top: 2em;
}

body.contacto .mapa-contacto {
    margin-top: 3em;
}

body.contacto .mapa-contacto iframe {
    width: 100%;
    height: 18em;
}

/* Estilos de contacto-exito.html */
body.contacto-exito main {
    padding: 0;
}

body.contacto-exito .wrapper * {
    text-align: center;
}

body.contacto-exito .wrapper .mensaje-exito {
    padding: 0 0.5em;
    font-size: 1.5em;
    font-weight: 500;
}

body.contacto-exito .wrapper .mensaje-exito:first-of-type {
    margin-top: 0;
}

/* Estilos de entrenamiento.html */
body.entrenamiento .opciones .opcion {
    max-width: 18em;
    margin: 0 auto 1.1em auto;
}

body.entrenamiento .opciones .opcion a {
    text-decoration: none;
}

body.entrenamiento .opciones .opcion p {
    margin: 0.1em 0 0 0;
    font-size: 1.4em;
    font-weight: 500;
    color: #30923E;
}

@media (min-width: 801px) {
    body.entrenamiento .opciones {
        margin-top: 1em;
        text-align: center;
    }

    body.entrenamiento .opciones .opcion {
        margin: 0 0.8em;
        display: inline-block;
    }
}

/* Estilos de iniciar-sesion.html */
body.index {
    background-color: #DDDDDD;
}

body.index main {
    padding: 0;
}

body.index .wrapper {
    height: 100vh;
}

body.index .wrapper .titulo {
    color: #30923E;
    text-align: center;
    font-size: 1.5em;
}

body.index .wrapper .imagen-wrapper {
    margin-bottom: 1.8em;
    text-align: center;
}

body.index .wrapper .imagen-wrapper img {
    width: 100%;
    max-width: 340px;
}

/* Estilos de iniciar-sesion.html */
body.iniciar-sesion {
    background-color: #DDDDDD;
}

body.iniciar-sesion main {
    padding: 0;
}

body.iniciar-sesion .wrapper {
    height: 100vh;
}

body.iniciar-sesion .wrapper .wrapper-ent,
body.iniciar-sesion .wrapper .wrapper-form h3 {
    text-align: center;
}

body.iniciar-sesion .wrapper .wrapper-form .form-iniciar-sesion button a {
    display: block;
    text-decoration: none;
    color: #FFFFFF;
}

body.iniciar-sesion .wrapper .wrapper-form .no-es-miembro {
    text-align: center;
    text-decoration: underline;
}

body.iniciar-sesion .wrapper .wrapper-form .no-es-miembro a {
    font-size: 0.7em;
    color: #30923E;
}

/* Estilos de miperfil.html */
body.miperfil .wrapper-foto {
    margin: 1.5em 0;
    text-align: center;
}

body.miperfil section {
    line-height: 2em;
    text-align: center;
}

/* Estilos generales de musculos-x.html y running-x.html*/
.ajustar-intensidad button {
    max-width: 11.5em;
    width: 100%;
    padding: 0.8em 1.4em;
    margin-bottom: 1.1em;
}

/* Estilos generales de musculos-x.html */
.video-ejercicio {
    margin-bottom: 2em;
    text-align: center;
}

.instrucciones-ejercicio {
    padding: 0 1em 1em 1em
}

.instrucciones-ejercicio * {
    text-align: center;
}

.instrucciones-ejercicio .titulo {
    margin: 0.4em 0;
    font-weight: 500;
    font-size: 1em;
    text-decoration: underline;
}

.temporizador-ejercicio {
    max-width: 14em;
    width: 100%;
    margin: 0 auto 1em auto;
    padding: 1em;
    border-radius: 1em;
    text-align: center;
}

.temporizador-ejercicio .tiempo {
    margin: 0;
    padding: 0.2em 0;
    font-family: 'Open 24 Display';
    font-size: 3em;
}

/* Estilos de musculos-1.html */
body.musculos-1 .temporizador-ejercicio{
    background-color: #000000;
    color: #FFFFFF;
}

/* Estilos de musculos-2.html */
body.musculos-2 {
    background-color: #DDDDDD;
}

body.musculos-2 .temporizador-ejercicio {
    background-color: #FFFFFF;
}

body.musculos-2 .temporizador-ejercicio .tiempo {
    color: #000000;
}

/* Estilos de musculos-3.html */
body.musculos-3 {
    background-color: #231E20;
}

body.musculos-3 .temporizador-ejercicio {
    background-color: #FFFFFF;
}

body.musculos-3 .temporizador-ejercicio .tiempo {
    color: #000000;
}

body.musculos-3 main * {
    color: #FFFFFF;
}

/* Estilos generales de musculos-x-fin.html */
.titulo-antes-de-tiempo {
    margin-top: 0;
    padding: 0 4em;
    text-align: center;
    font-weight: 500;
    font-size: 1em;
}

.titulo-antes-de-tiempo img {
    margin-bottom: 0.7em;
}

.contenedor-tabla-resultados {
    text-align: center;
}

.saludo {
    text-align: center;
    font-weight: 500;
    font-size: 1.25em;
}

/* Estilos de musculos-2-fin.html */
body.musculos-2-fin {
    background-color: #DDDDDD;
}

/* Estilos de musculos-3-fin.html */
body.musculos-3-fin {
    background-color: #231E20;
}

body.musculos-3-fin main * {
    color: #FFFFFF;
}

body.musculos-3-fin td {
    border-color: #FFFFFF;
}

/* Estilos de musica.html */
body.musica button {
    width: 100%;
    max-width: 15em;
    margin-bottom: 1em;
}

body.musica button a {
    font-size: 0.8em;
}

body.musica button a span {
    font-weight: 500;
}

/* Estilos de musica-reproductor.html */
body.musica-reproductor {
    background-color: #000000;
}

body.musica-reproductor * {
    color: #FFFFFF;
}

body.musica-reproductor .reproductor {
    width: 100%;
    max-width: 18em;
    margin: 0 auto;
    padding: 0.8em 1em;
    border-radius: 1em;
    background-color: #30923E;
}

body.musica-reproductor .reproductor .titulo-cancion {
    margin-top: 0.5em;
    text-align: center;
    font-size: 1.3em;
}

body.musica-reproductor .reproductor .titulo-cancion span {
    font-weight: 500;
}

body.musica-reproductor .reproductor .cover {
    width: 100%;
    height: 9em;
    border-radius: 1em;
    background-color: #FFFFFF;
}

body.musica-reproductor .reproductor .cover video {
    width: 100%;
    border-radius: 1em;
}

body.musica-reproductor .reproductor .controles {
    width: 100%;
    margin: 1.2em 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

body.musica-reproductor footer {
    color: #000000;
}

/* Estilos de nosocio.html */
body.nosocio {
    background-color: #DDDDDD;
}

body.nosocio main {
    padding: 0;
}

body.nosocio .wrapper {
    height: 100vh;
}

body.nosocio .wrapper .titulo {
    color: #30923E;
    text-align: center;
    font-size: 2.5em;
    font-weight: 400;
    margin: 0.5em 0;
}

body.nosocio .wrapper .titulo img {
    margin-bottom: 0.6em;
}

body.nosocio .wrapper p {
    margin-top: 0;
    padding: 0 2em;
    text-align: center;
    font-size: 1.2em;
}

body.nosocio .wrapper button a {
    display: block;
    color: #FFFFFF;
    text-decoration: none;
}

/* Estilos de registro.html */
body.registro {
    background-color: #DDDDDD;
}

body.registro .wrapper {
    height: calc(100vh - 3.2em);
}

body.registro .wrapper .form-registro button {
    margin-top: 1.5em;
}

/* Estilos generales de running-x.html */
.instrucciones-running {
    text-align: center;
}

.instrucciones-running .instrucciones {
    padding: 0 1em;
}

.temporizador {
    text-align: center;
}

.temporizador .tiempo {
    margin: 0.4em 0;
    font-family: 'Open 24 Display';
    font-size: 3em;
}

/* Estilos de running-2.html */
body.running-2 {
    background-color: #DDDDDD;
}

/* Estilos de running-3.html */
body.running-3 {
    background-color: #231E20;
}

body.running-3 main * {
    color: #FFFFFF;
}

/* Estilos de torneo.html */
body.torneo .contenedor-tabla-torneo {
    margin-bottom: 1em;
    text-align: center;
}

body.torneo .destacados {
    padding: 0 1.2em;
    font-weight: 500;
    font-size: 1.1em;
}

body.torneo .tarjetas {
    padding: 0.8em 1.8em 0 1.8em;
    font-weight: 500;
    font-size: 0.7em;
    line-height: 3em;
}

body.torneo .tarjetas .roja {
    width: 1.1em;
    height: 2.2em;
    margin-bottom: -0.8em;
    margin-right: 0.5em;
    background-color: #D04300;
    display: inline-block;
}

body.torneo .tarjetas .amarilla {
    width: 1.1em;
    height: 2.2em;
    margin-bottom: -0.8em;
    margin-right: 0.5em;
    background-color: #FFE517;
    display: inline-block;
}