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

@media screen and (min-width: 768px) {
  .panel-selector-letra {
    margin-top: 0;
  }
}

.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: var(--letra20);
  font-weight: var(--enfasisLetras);
  border-radius: 20px;
  color: var(--colorTextoLetrasAbecedario);
  background-color: var(--colorBackgroundLetrasAbecedario);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

@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);                                                                */
    line-height: 50px;
    font-size: var(--letra24);
    border-radius: 25px;
  }
}

.box-letras:hover {
  color: var(--colorTextoLetrasAbecedarioHover);
  background-color: var(--colorBackgroundLetrasAbecedarioHover);
  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s;
}

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

@media screen and (min-width: 768px) {
  .panel-materias-letra {
    border: 1px solid var(--colorGrisBordes);
    border-radius: 4px;
  }
}

.titulo-letra {
  height: 62px;
  width: auto;
  border: 1px solid var(--colorBordeLetrasAbecedarioHover);
  border-radius: 4px;
  background-color: var(--colorBackgroundLetrasAbecedarioDesplegadas);
  margin: 20px 20px 0 20px;
}

@media screen and (min-width: 768px) { /* Hasta 20210609 768px, se cambió por la extensión de las migas de actividades */
  .titulo-letra {
    margin: 20px 30px 0 30px;
  }
}

@media screen and (min-width: 992px) {
  .titulo-letra {
    height: 82px;
  }
}

.titulo-letra img {
  width: 20px;
  height: 20px;
}

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

.texto-titulo-letra {
  color: var(--colorTextoTituloLetra);
  font-size: var(--letra18);
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-left: 10px;
}

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

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


.opcion-letra {
  cursor: pointer;
  height: auto;
  width: 100%;
  border: 1px solid var(--colorBordeOpcionLetra);
  border-radius: var(--borderRadiusBotones);
  background-color: var(--colorBackgroundOpcionLetra);
  box-shadow: 0 3px 7px 0 var(--colorGrisSombra);
}

.contenedor-opcion-letra { /* Debe estar en auto, porque si está en 100% se ve excesivamente alto cuando se abre el panel-lista-documentos */
  height: auto;
  width: 100%;
}

.grid-contenedor-opcion-letra {
  height: 100%;
  align-content: center;
}


.imagen-opcion-letra {
  display: flex;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  justify-self: left;
  align-items: center;
  justify-content: center;
  margin: var(--margenVerticalImagenOpcionSmall) 0 var(--margenVerticalImagenOpcionSmall) 40px;
  background-color: var(--colorBackgroundImagenOpcionLetra);
}

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

.imagen-opcion-letra img { /* No se usa en DP, pues se trabajo con material-symbols */
  width: 35px;
  border-radius: 4px;
}

.imagen-opcion-letra-style {
  color: var(--colorBlanco);
  font-size: 30px;
}


.titulo-opcion-letra {
  display: flex;
  width: 100%;
  color: var(--colorTextoTituloOpcionLetra);
  font-size: var(--letraOpcionNuevaSmall);
  line-height: 22px;
  font-weight: var(--enfasisLetras);
  align-items: center;
  margin: 20px 0 20px 0;
}

@media screen and (min-width: 768px) {
  .titulo-opcion-letra {
    font-size: var(--letraOpcionNuevaNormal);
    line-height: 28px;
  }
}


.ir-arriba-opcion-letra {
  height: 40px;
  width: 40px;
  background-color: var(--colorBackgroundBotonIrArriba);
  align-self: center;
  border: none;
  border-radius: 20px;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
}

@media screen and (min-width: 576px) {
  .ir-arriba-opcion-letra {
    height: 50px;
    width: 50px;
    border-radius: 25px;
  }
}

@media screen and (min-width: 768px) {
  .ir-arriba-opcion-letra {
    width: 138px;
  }
}

@media screen and (min-width: 992px) {
  .ir-arriba-opcion-letra {
    width: 158px;
  }
}

.contenedor-ir-arriba-opcion-letra {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .contenedor-ir-arriba-opcion-letra {
    justify-content: flex-start;
  }
}

.contenedor-ir-arriba-opcion-letra-style {
  color: var(--colorBlanco);
  font-size: var(--fontSizeMaterialIconIrArriba);
  text-align: end;
  margin-right: 0;
}

@media screen and (min-width: 768px) {
  .contenedor-ir-arriba-opcion-letra-style {
    width: 25%;
    margin-right: var(--margenRightMaterialIconIrArriba);
  }
}

.texto-ir-arriba-opcion-letra {
  display: none;
  color: var(--colorTextoBotonIrArriba);
  font-size: var(--letra12);
  font-weight: 500;
}

@media screen and (min-width: 768px) {
  .texto-ir-arriba-opcion-letra {
    display: inline-flex;
    width: 75%;
    font-size: var(--letra14);
    justify-content: flex-start;
    padding-left: 25px;
  }
}

#texto-ir-arriba-opcion-letra { /* No se usa en DP */
  margin: 0;
  padding: 0;
}


.contenedor-panel-lista-materias {

}

.grid-contenedor-panel-lista-materias {

}