/* *,*::before,*::after{
    box-sizing: border-box;
} */
body{
    font-family: 'Open sans', system-ui, sans-serif;
    margin: 0;
}

h1{
    font-family: 'Open sans Extrabold', system-ui, sans-serif;
    text-align: center;
    text-transform: uppercase;
}
h1 span{
    font-family: 'Open sans', system-ui, sans-serif;
    font-weight: bold;
    text-transform:none;
    display: block;
    position: relative;
}
h1 span::before{
    content: '';
    position: absolute;
    top: 100%;
    left:0;
    right: 0;
    height: 1px;
    background-color: currentColor;
}
/* SOLO DEL EJEMPLO */
section{
    width: 90vw;
    margin-inline: auto;
}
/* SOLO DEL EJEMPLO */

.pensum{
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    margin-inline: auto;
}
.pensum tr{
    border: 1px solid;
}
.pensum :where(th,td){
    padding: 2px 4px;
}
.pensum :where(th,td) + :where(th,td){
    border-left: 1px solid;
}
.pensum .encabezados{
    background-color: hsl(240 100% 95%);
}
.pensum .semestre{
    text-transform: uppercase;
    background-color: hsl(240 98% 80% / .8);
}
.pensum .electivas{
    padding-inline-start: 1em;
    font-weight: bold;
}
.pensum :where(tfoot h3){
    text-align: center;
    text-transform: uppercase;
}
.pensum .centrar{
    text-align: center;
}
.pensum .modal{
    max-width: min(100% - 2rem, 50ch);
    padding: var(--espaciado, 1rem);
    border-radius: var(--border-radius, 1rem);
}
.pensum .modal::backdrop{
    background-color: rgba(0,0,0,.5);
}
.boton-abrir{
    margin-inline: auto;
}
:is(.boton-abrir,.boton-cerrar){
    --clr-primario-0: 240 98% 10%;
    --clr-primario-1: 240 98% 25%;
    --clr-primario-2: 240 98% 45%;
    --clr-primario-3: 240 98% 65%;
    --clr-primario-4: 240 98% 80%;
    --clr-primario-5: 240 98% 95%;
    --clr-bg-boton: hsl(var(--clr-primario-4));

    /*display: inline-block;
    margin-block: .5em;*/
    display:grid;
    place-items: center;
    padding: .5em .6em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    background-color: var(--clr-bg-boton, hsl(var(--clr-primario-3)));
    color: var(--clr-texto-boton, hsl(var(--clr-primario-0)));
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius-boton, var(--border-radius));
    transition: .3s all;
    outline-offset: -2px;
    outline: 2px solid var(--clr-borde-boton, hsl(var(--clr-primario-3)));
}
:is(.boton-abrir,.boton-cerrar):hover, :is(.boton-abrir,.boton-cerrar):focus{
    --clr-bg-boton: var(--clr-bg-boton-h);
    --clr-texto-boton: var(--clr-texto-boton-h);
    background-color: var(--clr-bg-boton-h, hsl(var(--clr-primario-5)));
    color:var(--clr-texto-boton-h, hsl(var(--clr-primario-0)));
    outline: 2px solid var(--clr-borde-boton-h, var(--clr-borde-boton, hsl(var(--clr-primario-3))));
}
:is(.boton-abrir,.boton-cerrar):focus{
    outline-offset: 0;
}
:is(button, [class*="boton"]) + :is(button,[class*="boton"]){
    margin-left:.5em;
}
.boton-circular{
    --border-radius-boton:50%;
}
.prela,.uc,.tpl{
    display:table-cell;
}
.prelaModal,.tplModal,.ucModal,.eqModal{
    display:none;
}

select{
    font-size: min(2.5vw, 1rem);
}
@media screen and (max-width:500px){
    td{
        font-size: 12px;
    }
    .uc{
        display: none;
    }
    .ucModal{
        display: block;
    }
}
@media screen and (max-width:768px){
    h3,p{
        margin-block: .5em;
    }
    .tpl{
        display: none;
    }
    .tplModal{
        display: block;
    }
}
@media screen and (max-width:950px) {
    .prela{
        display: none;
    }
    .prelaModal{
        display:block;
    }
    .eq{
        display: none;
    }
    .eqModal{
        display:block;
    }    
}/*
.verDetalles{
    display: table-cell;
}
@media screen and (min-width:1400px){
    .verDetalles{
        display:none;
    }
}*/
img{
    width: min(824px, 100%);
    min-height: 100px;
    object-fit: contain;
}

.faq-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

.faq-item {
    width: 100%;
    max-width: 800px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    cursor: pointer;
}

.pregunta {
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: justify;
}

.respuesta {
    margin-left: 20px;
    text-align: justify;
}

.toggle-icon {
    margin-left: 10px;
    font-weight: bold;
    font-size: 1.2em;
}

@media screen and (max-width: 600px) {
    .faq-item {
        width: 90%;
    }
}

.link-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

.link-item {
    margin: 10px 0;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    text-align: center;
    width: 200px;
    transition: background-color 0.3s;
}

.link-item:hover {
    background-color: #e0e0e0;
}