/** Variables **/
:root {
    /** Fuentes **/
    --fuente_headings: "EB Garamond", serif;
    --fuente_textos: "EB Garamond", serif;

    /** Tamaño de Media Queries **/
    --telefono: 480px;
    --tablet: 768px;
    --desktop: 1024px;

    /** Colores **/
    --cyan: #0891B2;
    --azul: #003160;
    --indigo: #4338CA;
    --morado: #7C3AED;
    --naranja:#F59E0B;
    --rosa: #D70926;
    --bsblue: #037BC0;

    --blanco: #FFFFFF;
    --gris: #6b7280;
    --grisOscuro: #4B5563;
    --grisClaro: #d3d6db;
    --negro: #000;

    --rojo: rgb(169, 0, 0);
    --verde: rgb(0, 120, 0);
    --amarillo: #ffc61e;

    --separacion: 5rem;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'Raleway', sans-serif;
    font-size: 1.6rem;
    min-height: 100%;
}

/** Tipografías **/
h1, h2, h3 {
    font-family: var(--fuente_headings);
    /*margin: 0 0 calc(var(--separacion) / 2) 0 ;*/
    font-weight: 900;
}
h1 {
    font-size: 6rem;
}
h2 {
    font-size: 5rem;
}
h3 {
    font-size: 4rem;
}
p {
    font-size: 2rem;
    color: var(--gris);
    line-height: 1.8;
}
.tagline {
    font-family: var(--fuente_headings);
    font-weight: 900;
    color: var(--negro);
    font-size: 4rem;
    text-align: center;
}


.descripcion-pagina {
    text-align: center;
    margin-top: 1rem;
    
}

.dominiocss {
    margin-top: 1rem;
    text-align: left;
    
}

@media (max-width: 768px) {
    h1 {
        font-size: 3rem;
    }
}

.contenedor {
    width: 95%;
    max-width: 1200px;
    margin:0 auto;
}

.contenedor-sm {
    max-width: 70rem;
    margin: 0 auto;
}

a {
    text-decoration: none;
}

/** componentes **/
.login {
    margin-top: 10rem;
}

.formulario {
    margin-top: 4rem;

    }

.formulario .campo {
    display: flex; 
    align-items: center;
    margin-bottom: 2rem;
}

.formulario .campo label {
    flex: 0 0 8rem;
}

.formulario .campo input {
    flex: 1;
    padding: 1rem;
    border-style: none;
    background-color: var(--grisClaro);

}

input::placeholder {
    color: var(--gris);
    font-size: 1.2em;
    
  }

input:focus { 
    outline: none !important;
    border-color: var(--azul);
    box-shadow: 0 0 10px var(--azul);
}


 .formulario .boton {
    background-color: var(--azul);
    margin-top: 3rem;
    padding: 1rem 4rem;
    color: var(--blanco);
    font-size: 1.6rem;
    display: inline-block;
    font-weight: 700;
    border: none;
    transition-property: background-color;
    transition-duration: .3s;
    text-align: center;
    display: block;
    width: 100%;

}


.formulario .boton:hover {
    background-color: var(--amarillo);
    cursor: pointer;
}


.botonnuevo {
    background-color: var(--azul);
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 1rem 4rem;
    color: var(--blanco);
    font-size: 1.6rem;
    border: none;


}





.botonnuevo:hover {
    background-color: var(--amarillo);
    cursor: pointer;
}



@media (min-width: 768px) {
    .formulario .boton {
        width:auto; 
    }
}


.volver {
    font-size: 2rem;
    margin-top: 3rem;
    color: var(--azul);
}


.volver {
    margin-bottom: 2rem;
}
.volver a {
    color: var(--azul);
    
}
.contenedor-img{
 max-width: 400px;
}


@media (min-width: 768px) {
    .contenedor-img{
        max-width: 200px;
       }
}


.imagensub {
    max-width: 100%;
}

.acciones {
    margin-top: 5rem;
    
}

.acciones a {
    display: block;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--azul);
    
}

.acciones a:last-of-type {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .acciones {
        display: flex;
        justify-content: space-between;     
    }
}

.titulogradiente {
    /*background: linear-gradient(to right, var(--azul), var(--azul));
    -webkit-text-fill-color:transparent;
    -webkit-background-clip: text;*/
    color: var(--azul);
}

@media (max-width: 768px) {
    .titulogradiente {
        font-size: 4rem;
          
    }
    .tagline {
        font-size: 3rem;
    }

}

.img-nav {
    padding: 15px 1rem;
    max-width: 100%;

}


.table {
    font-size: 1.5rem;
}

.cabecera {
    background-color: var(--azul);
}

.boton-cabecera {
    color: var(--amarillo);
    font-size: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
.boton-cabecera {
    color: var(--amarillo);
    font-size: 2rem;

    margin-bottom: 1rem;
}
}


.btn-size {
    font-size: 3rem;
}

@media (min-width: 768px) {
    .btn-size {
        font-size: 1.5rem;
    }

}

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

@media (min-width: 768px) {
    .navegacion {
        flex-direction: row;
    }

}


.usuario {
    margin-top: 1rem;
    margin-bottom: 1rem;
    
    
}

@media (min-width: 768px) {
    .usuario {
        margin-top: 0;
        margin-bottom: 0;
        
    }
}

.logo {

    max-width: 30%;
    margin-bottom: 1rem;
    align-items: center;
}

@media (min-width: 768px) {
    .logo {
        max-width: 15%;
        
    }
}