@font-face {
  font-family: 'ChronicaPro-Bold';
  font-display: swap;
  src: url('/dash/fonts/ChronicaPro-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'ChronicaPro-SemiLight';
  font-display: swap;
  src: url('/dash/fonts/ChronicaPro-SemiLight.woff2') format('woff2');
}
@font-face {
  font-family: 'ChronicaPro-SemiLightItalic';
  font-display: swap;
  src: url('/dash/fonts/ChronicaPro-SemiLightItalic.woff2') format('woff2');
}
@font-face {
  font-family: 'Nexa-Heavy';
  font-display: swap;
  src: url('/dash/fonts/Nexa-Heavy.woff2') format('woff2');
}
@font-face {
  font-family: 'Nexa-ExtraLight';
  font-display: swap;
  src: url('/dash/fonts/Nexa-ExtraLight.woff') format('woff2');
}
	


/* Estilos generales */
body {
    font-family:Nexa-ExtraLight ;
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
    
}

header {
    background-color: #F9FAFB;
    padding-bottom: 10px;
    
}
header img{
    width:100%;
}
.btnclose{
    margin-right: 20px;
}
h3{
  
}
.nav{  
  background-color: #F9FAFB;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.logo{
    width: 20%;
}
.general{
    display: flex; 
    justify-content: space-between;
    gap:20px;
    width:96%;
    margin-left:2%;
    }
.general section{
    flex: 1 ;
    margin-bottom: 20px;
}
.btnTop{
    font-family:Nexa-ExtraLight;
    background-color: #030233;
    color:white;
    font-size: 1.1em;
    border-radius: 20px;
    padding: 4px 20px;
    cursor: pointer;
}
.postheader{
    max-width:70%;
    margin: 0 auto;    
}
.postheader p{
    text-align: justify;
    font-size: 1.4em;
    color:#030233;
    font-weight:400;
}
.postheader h3{
    font-size: 1.4em;
    color:#1749B5;
    font-weight:600;
}


nav ul {
    list-style: none;
    padding: 0;
}

nav li {
    display: inline;
    margin-right: 20px;
}

main {
    background-color: #F9FAFB;
    max-width: 1200px;
    margin:auto;
    padding: 0px;
}
main p{    
    font-size: 1.4em;
}

.separator{
    width: 90%;
}


section h2 {
    color: #333;
}

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

aside {
    float: right;
    width: 30%;
    background-color: #f5f5f5;
    padding: 20px;
    margin-top: 20px;
}

footer {
    background-color: #424242;
    color: #fff;
    text-align: center;
    padding: 10px;
}

/* Estilos para enlaces */
a {
    text-decoration: none;
    color: #0078d4;
}

a:hover {
    text-decoration: underline;
}

.start{
    color:white;
    background-color:#1663DA;
    font-family: Nexa-ExtraLight;
    font-weight: 600;
    border:0;
    border-radius: 15px;
    font-size: 1.2em;
    padding: 5px 30px;
    margin-bottom: 20px;
    max-width:80%;
}
.end{
    color:white;
    background-color:#1663DA;
    font-family: Nexa-ExtraLight;
    font-weight: 600;
    border:0;
    border-radius: 15px;
    font-size: 1.2em;
    padding: 5px 30px;
    margin-bottom: 20px;
    max-width:80%;
}
.circledark{
    background: #030233;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border-color: transparent;
}
.circlepurple{
    background: #8C52FF;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border-color: transparent;
}
.circlegrey{
    background: #A6A6A6;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border-color: transparent;
}
.selcate{
    margin:1em 0em;
    border-radius: 15px;
    padding: 0.5em 0.5em;
    font-size: 1.1em;
    background-color: #eeeeee;
    color: #1663da;
    border: 0;
}
#xcategoria{
    margin-top: 1em;
}
.bsearch{
    font-size: 1.1em;
    color:white;
    border-radius: 20px;
    padding: 0.5em 1em;
    background-color:#030233;
}
.label{
    font-family:Nexa-ExtraLight;
    font-weight: 600;
    margin:0 auto;
}
.aftersubt{
    max-width:70%;
    text-align:justify;
    margin-bottom: 1em;
}
.niveles{
    display: flex; 
    justify-content: space-between;
    gap:20px;
    }
.niveles .label{
    flex:1;
    text-align:center;
}
section p {
        font-family:Nexa-ExtraLight;
        width:90%;
        margin-left:5%;
        color:#030233;
        text-align:left;
        font-weight: 400;
}    
section p spam{
    color:#1749B5;
    font-weight: 600;
}
#donutchart,#barchart_material,#promgral{
    padding:0.5em 0;
    border: solid;
    border-width: 0.5px;
    background-color: #fff;
}
.feedxcat{
    text-align:center !important;
}
.flexfoot{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:90%;
    margin-left:5%;
    padding:1.5em 0;
}
.flexfoot img{
    height:40px;
}

    
@media (max-width: 767px){
 .logo{
    width: 40%;
    }
.btnclose{
    margin-right: 20px;
    font-size: 0.8em;
    }
.postheader{
    max-width:80%;
    }
.aftersubt{
    max-width:80%;
    }
.general{    
    flex-direction: column;
    }
.section{
     margin-bottom: 10px; /* Añadir espacio entre las filas */
}

.start,.end{
    padding: 10px 30px;
    }
.selcate{
    max-width:400px;
    }
#donutchart,#barchart_material,#promgral{
    border:0;
    }
.niveles{
    flex-direction: column;
    }
.niveles .label{
    margin-bottom: 5px;
    }
.flexfoot{
    width:96%;
    margin-left:3%;
    }
}


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

}