html {
  --colorBackgroundOpcionNueva: var(--colorTransparente);
  --colorBackgroundOpcionNuevaHover: var(--colorTransparente);
  --colorBackgroundContenedorOpcionNueva: var(--colorTransparente);
  --colorBackgroundContenedorOpcionNuevaHover: var(--colorTransparente);
}

.contenedor-selector-letra-y-materias {
  margin: 30px 20px 20px 20px;
}

@media screen and (min-width: 768px) {
  .contenedor-selector-letra-y-materias {
    margin: 50px 30px 20px 30px;
  }
}

@media screen and (min-width: 1200px) { /* 1140px + 30px x 2 */
  .contenedor-selector-letra-y-materias {
    margin: 50px 0 20px 0;
  }
}

.panel-selector-letra {
  display: flex;
  height: auto;
  width: 100%;
  background-color: var(--colorBackgroundPanelSelectorLetra);
  align-items: center;
  justify-content: center;
}

.contenedor-panel-selector-letra {
  width: 100%;
  padding: 0 1rem 20px 1rem;
}

@media screen and (min-width: 576px) {
  .contenedor-panel-selector-letra {
    padding: 0 2rem 20px 2rem;
  }
}

@media screen and (min-width: 768px) {
  .contenedor-panel-selector-letra {
    padding: 0 6rem 20px 6rem;
  }
}

@media screen and (min-width: 996px) {
  .contenedor-panel-selector-letra {
    padding: 0 10rem 40px 10rem;
  }
}

@media screen and (min-width: 1140px) {
  .contenedor-panel-selector-letra {
    padding: 0 12rem 40px 12rem;
  }
}

.grid-contenedor-panel-selector-letra {
  width: 100%;
  justify-content: center;
}

.box-letras {
  height: 40px;
  width: 40px;
  line-height: 40px;
  font-size: 26px;
  font-weight: 800;
  border-radius: 25px;
  color: var(--colorTextoLetrasAlfabeto);
  background-color: var(--colorBackgroundLetrasAlfabeto);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

.box-letras a {
  text-decoration: none;
  color: inherit;
}

@media screen and (min-width: 768px) {
  .box-letras {
    height: 50px;
    width: 50px; /* Este valor depende de grid-contenedor-panel-selector-letra en orden_alfabetico_grid.css */
                 /* repeat(auto-fill, 50px);                                                                */
    font-size: 32px;
    line-height: 50px;
    font-size: 32px;
  }
}

.box-letras:hover {
  color: var(--colorTextoLetrasAlfabetoHover);
  background-color: var(--colorBackgroundLetrasAlfabetoHover);
}

.panel-materias-letra {
  height: auto;
  width: 100%;
}

.contenedor-panel-materias-letra {
  background-color: var(--colorBackgroundPanelMateriasLetra);
}

.titulo-letra {
  height: 82px;
  width: auto;
  background-color: var(--colorBackgroundTituloLetraAlfabeto);
  margin: 20px 30px 0 30px;
  cursor: pointer;
}

.titulo-letra img {
  height: 15px;
}

.contenedor-titulo-letra {
  display: flex;
  height: 100%;
  width: 100%; /*can be in percentage also.*/
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.texto-titulo-letra {
  color: var(--colorTextoTituloLetraAlfabeto);
  font-size: var(--letraLetrasSmall);
  font-weight: 600;
  margin-left: 20px;
}

@media screen and (min-width: 768px) {
  .texto-titulo-letra {
    font-size: var(--letraLetrasNormal);
  }
}

#texto-titulo-letra {
  margin: 0px;
  padding: 0px 0px 0px 0px;
}

.opcion-nueva {
  border: none;
  border-radius: 0;
  margin: 0 20px 0 20px;
  background-color: var(--colorBackgroundOpcionNueva) ;
}

@media screen and (min-width: 768px) {
  .opcion-nueva {
    margin: 0 40px 0 40px;
  }
}

.contenedor-opcion-nueva {
  border: none;
  border-radius: 0;
  background-color: var(--colorBackgroundContenedorOpcionNueva);
}

.contenedor-opcion-nueva:hover {
  background-color: var(--colorBackgroundContenedorOpcionNuevaHover);
}

.panel-lista-materias {
  background-color: var(--colorBackgroundPanelListaMaterias);
  margin: 0 0 30px 0;
  padding-top: 20px;
}

.contenedor-panel-lista-materias {
}

.grid-contenedor-panel-lista-materias {
}