/* Variables */

:root {
    --primary: #002744;
    --secondary: #007996;
    --light-gray: #e3e4e6;
    --cream-gray: #f2f2f2;
    --white: #ffffff;
    --greyText: #71757f;
}

/* DEFAULT */

p {
    margin-top:0; 
    margin-bottom:1rem;
}

p:last-child {
    margin-bottom:0;
}

a {
    color: #002744;
    text-decoration: none;
}

p a {
    color: var(--primary);
    border-bottom: 1px dotted #9bd;
}

p a:hover {
    border-bottom:0; 
    color: #02c;
}

/* end DEFAULT */

/* Backgrounds */

.bgPrimary {
    background: var(--primary);
    color: var(--white);
}

.bgWhite {
    background: var(--white);
}

.bgGrey {
    background: var(--light-gray);
}

.bgCreamGrey {
    background: var(--cream-gray);
}

.bgGreen {
    background: var(--secondary);
    color: var(--white);
}

/* end Backgrounds */

.centro {
    text-align: center;
}

/* alert - error message */

.alert {
    background-color: #fff3cd;
    padding: .75rem 1.25rem;
    margin: 1rem 0 0;
    border: 1px solid #ffeeba;
    border-radius: .25rem;
    color: #796113;
    font-weight: bold;
    line-height: 1.3;
}
@media (max-width: 639px) {
    .alert {font-size:15px}
}

.alert i {
    margin-right: .6em;
}

.alert a {
    float: right; 
    font-size: 0.8rem;
    line-height: 1.4rem;
}

.error {
    background-color: #aa0000;
    border-color: #aa4400;
    color: var(--white);
}

.error a {
    color: var(--white);
}

/* End alert - error message */


/* Paddings responsive dinamicos */Separa
@media (max-width: 1023px) {
    .responsive-padding-horizontal {    
        padding-left: 2rem;
        padding-right: 2rem;}
    
}

@media (max-width: 639px) {
    .responsive-padding-top-2 {
        padding-top: 1rem;
    }

    .responsive-padding-vertical-3 {
        padding-bottom: 1rem;
        padding-top: 1rem;
    }
    .responsive-padding-vertical-2 {
        padding-bottom: 1rem;
        padding-top: 1rem;
    }
    .responsive-padding-top-3 {
        padding-top: 1rem;
    }
}

@media (min-width: 640px) {
    .responsive-padding-top-2 {
        padding-top: 2rem;
    }
    .responsive-padding-vertical-2 {
        padding-bottom: 2rem;
        padding-top: 2rem;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .responsive-padding-vertical-3 {
        padding-bottom: 2rem;
        padding-top: 2rem;
    }
    .responsive-padding-top-3 {
        padding-top: 2rem;
    }
}

@media (min-width: 1024px) {
    .responsive-padding-vertical-3 {
        padding-bottom: 3rem;
        padding-top: 3rem;
    }
    .responsive-padding-top-3 {
        padding-top: 3rem;
    }
}


/* end / Paddings dinamicos */


/* Titulos */

.titleDefault/*,
.titleDefault h1*/ {
    margin-bottom: 35px;
    font-size: 50px;
    font-family: "Bellota Text", Helvetica, Arial, sans-serif;
    font-weight: bold;
}

.titleDefault span/*,
.titleDefault h1 span*/ {
    display: block;
    font-size: 40px;
}

h2 span.titleDefault {
    color: var(--secondary);
}

.titleSeparatorDouble {
    margin-bottom: 0;
    margin-top: -40px;
    display: inline-block;
    width: 100%;
}

.titleSeparatorDouble .titleDefault {
    position: relative;
    z-index: 1;
    padding: 0 20px;
    line-height: 1;
}

.titleSeparatorDouble::before {
    height: 2px;
    background: linear-gradient(90deg,
            rgba(3, 45, 75, 0.03) 0%,
            #30719038,
            rgba(3, 45, 75, 0.03) 100%);
    display: inline-block;
    content: "";
    width: 100%;
    position: relative;
    top: 55px;
}

@media (max-width: 869px) {
    .titleSeparatorDouble::before {
        visibility:hidden;
    }
    .titleSeparatorDouble .titleDefault {
        padding:0;
    }
}

@media (max-width: 639px) {

    /*.slideTitle .titleDefault,*/.titleDefault/*,
    .titleDefault h1*/ {
        font-size: 35px;
        line-height: 35px;
    }


    .titleDefault span/*,
    .titleDefault h1 span*/ {
        font-size: 27px;
    }
}

/* end / Titulos */

/* Botones */

.button {
    text-transform: uppercase !important;
    letter-spacing: 2px;
    padding: 1.2em 2em;
    border-radius: 5px;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    font-family: inherit;
    font-size: 0.9rem;
    -webkit-appearance: none;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1rem 0;
}

.button:hover {
    border-color: #006780;
    background-color:#006780;
}

[data-whatinput='mouse'] .button {
    outline: 0;
}

/* end / Botones */

/* Servidores Section */

.servidoresSeccion {
    font-size: 15px;
    display: flex;
    padding: calc(1rem - 2px) 0;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    gap: 5px;
}
.servidoresSeccion > div.flex {align-items: center;} /*si se quita el SPAN servidores se puede quitar */

.servidoresSeccion .lista {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.servidoresSeccion .lista li {
    margin-left: 2em;
    flex-shrink:0;
    line-height: 1.8;
}

.servidoresSeccion li:before {
    /*content: "\f058";*/
    content: "\f111";
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -1.3em;
    width: 1.3em;
}
    .servidoresSeccion li.up:before {
        color:green;
    }
    .servidoresSeccion li.down:before {
        color:red;
    }
    .servidoresSeccion li.warning:before {
        color:orange;
    }
    .servidoresSeccion li.nodata:before {
        color:gray;
    }

    .servidoresSeccion .button {
        font-size: 10px;
        padding: .6em 2em;
        margin-bottom:0;
        line-height: 1.3;
    }

/* end / Servidores Section */

/* Incidencia */

/* .incidencia {padding: 2rem 0;} añadir si se reordenan apartados y se quita ¿Tienes alguna incidencia? */

.incidencia .titleDefault { /* si se quita ¿Tienes alguna incidencia? se podrian quitar reglas y el flex en el código también*/
    margin-bottom: 0;
    flex-shrink:1;
    font-size: 45px;
}
@media (max-width: 639px) {
    .incidencia .titleDefault {font-size:35px}
}

div.gestion-incidencias {
    margin:0 4rem;
    margin-top: .5rem;
    position:relative;
    top: -1px;
    display: grid;
}
@media (max-width: 639px) {
  div.gestion-incidencias {
    margin-left: 0;
    margin-right: 0;
    margin-top: 1rem;
    }  
}

div.gestion-incidencias a.button {
    margin: 0.4rem;
}
    
/* end / Incidencia */


/* Estadisticas */

.estadisticasSeccion {
    padding: 2rem 0; /*2rem 0;*/
}

.estadisticasItem {
    width: 20%;
    text-align: center;
    padding: 0 1rem 0.5rem;
}
@media (max-width: 639px) {
    .estadisticasSeccion .flex {
        justify-content:center
    }
    .estadisticasItem {
        width: 50%;
    }
}

.estadisticasItem .numbers {
    font-size: 45px;
    font-weight: bold;
}
@media (max-width: 1023px) {
.estadisticasItem .numbers {
    font-size: 35px;}
}

.estadisticasItem .subTitle {
    font-size: 16px;
    line-height: 1.2em;
    font-family: "Bellota Text",Helvetica,Arial,sans-serif;
}


/* end / Estadisticas Section */

/* Cajas enlaces - boxesSeccion */

.boxesSeccion .enlaces a {
    background-size: cover;
    font-weight: bold;
    font-size: 22px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    align-self: center;
    justify-content: center;
    height: 140px;
    border-radius: 7px;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: 0.3s all;
    margin: 5px;
    flex: 1 1 0px;
    width: 25%;
    color: var(--white);
    text-align: center;
}
@media (max-width: 1023px) {
    .boxesSeccion .enlaces a {
       flex:0 0 auto;
       height: 80px;
    }
}
@media (max-width: 692px) {
    .boxesSeccion .enlaces a {
        width: 100%;
    }
}

.boxesSeccion .enlaces a span {
    align-self: center;
    font-size: 17px;
    padding: 20px;
}
@media (max-width:767px) {
    .boxesSeccion .enlaces a span {
    font-size: 15px;
    padding: 20px;
    }
}

.boxesSeccion .enlaces a:hover {
    opacity: 0.7;
}

.aules {
    background: url("../img/backgrounds/aules.png");
}

.compte {
    background: url("../img/backgrounds/compte.png");
}

.sla {
    background: url("../img/backgrounds/sla.png");
}

.manuals {
    background: url("../img/backgrounds/manuals.png");
}

/* end / Cajas enlaces boxesSeccion */

/* Asistencia */

.asistencia {
    padding-top:2rem;
}
@media (max-width: 692px) {
    .asistencia {padding-top:0;}
}

.asistencia .item {
    text-align: center;
    flex-shrink: 0;
    flex-grow: 1;
    flex-basis: 0;
    padding: 0 1rem;
}

.asistencia span.titleDefault {
    font-size: 22px;
}
@media (max-width: 639px) {
    .asistencia span.titleDefault {font-size:18px;}
}

.asistencia .button {
    padding: .5rem;
    min-width: 100px;
    display: inline-flex;
    align-items: center;
    margin-top: 1rem;
}
@media (max-width: 639px) {
    .asistencia .button {margin-top:0}
}

.asistencia .button:hover {
    background-color:white;
    border-color:white;
}

.asistencia img {
    max-height: 50px;
    margin-right: .5rem;
}
@media (max-width: 639px) {
    .asistencia img {
        max-height:30px;
    }
}

/* end / Asistencia */

/* Contacta */

.contacta h2 {margin-bottom:0;}

.contacta .titleSeparatorDouble::before {top:48px;}

.contacta h2 .titleDefault {font-size:35px;}

.contacta p {
    margin-bottom:0
}

.contacta p:first-of-type {
    margin-top:1rem;
}

/* end Contacta */

/* Estilos paginas de info */

.info-text p {
    text-align:justify;
    font-size: 1.1rem;
}

h2.title {
    margin: -2rem 0 1rem 0;
    font-size: 3rem;
}

h3.subTitle {
    margin: 0 0 0.6rem 0;
    font-size: 2rem;
    font-family: "Bellota Text", Helvetica, Arial, sans-serif;
}

.padding-vertical-1 {
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
}

.padding-vertical-2 {
    padding-top: 2rem!important;
    padding-bottom: 2rem!important;
}

.padding-bottom-2 {
    padding-bottom: 2rem!important;
}