.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(--letra16);
  font-weight: var(--enfasisLetras);
  border: var(--boxLetrasBorderWidth) solid var(--colorBordeBoxLetras);
  border-radius: 20px;
  /* box-shadow: 0 0.1rem 1rem var(--colorGrisSombra); */ /* Especial para ICBF */
  color: var(--colorTextoLetrasAbecedario);
  background-color: var(--colorBackgroundLetrasAbecedario);
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  transition: .3s background-color ease,.3s transform ease;
  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(--letra18);
    border-radius: 25px;
  }
}

.box-letras:hover {
  color: var(--colorTextoLetrasAbecedarioHover);
  background-color: var(--colorBackgroundLetrasAbecedarioHover);
  text-decoration: underline;
  border: var(--boxLetrasBorderWidth) solid var(--colorBordeBoxLetrasHover);
}

.box-letras:focus {
  background-color: var(--colorBackgroundBotonIrArribaFocus);
  border: var(--boxLetrasBorderWidth) solid var(--colorBordeBoxLetrasFocus);
}

.box-letras:active {
  outline: 0;
  background-color: var(--colorBackgroundBotonIrArribaActive);
  border: var(--boxLetrasBorderWidth) solid var(--colorBordeBoxLetrasActive);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
}

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

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

.opcion-letra {
  height: auto;
  width: 100%;
  background-color: var(--colorBackgroundOpcionLetra);
  border: 1px solid var(--colorBordeOpcionLetra);
  border-radius: var(--borderRadiusBotones);
  transition: .3s box-shadow ease,.3s transform ease;
  cursor: pointer;
}

.opcion-letra:hover {
  box-shadow: 0 .1rem 1rem 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: var(--imageOpcionBorderWidth) solid var(--colorBordeImagenOpcion);
  border-radius: 50%;
  align-self: center;
  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(--colorImagenOpcionLetra);
  font-size: 30px;
  transition: .3s color ease,.3s transform ease;
}


.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 {
  width: var(--botonVerMasRoundWidthSmall);
  height: var(--botonVerMasRoundHeightSmall);
  background-color: var(--colorBackgroundBotonIrArriba);
  align-self: center;
  border: var(--botonVerMasBorderWidth) solid var(--colorBordeBotonIrArriba);
  border-radius: var(--borderRadiusBotonVerMasSmall);
  /* box-shadow: 0 0.1rem 1rem var(--colorGrisSombra); */ /* Especial para ICBF */
  font-family: var(--fontFamilyBotonVerMas); 
  transition: .3s background-color ease,.3s transform ease;
  cursor: pointer;
}

@media screen and (min-width: 576px) {
  .ir-arriba-opcion-letra {
    width: var(--botonVerMasRoundWidthNormal);
    height: var(--botonVerMasRoundHeightNormal);
    border-radius: var(--borderRadiusBotonVerMasNormal);
  }
}

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

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

.ir-arriba-opcion-letra:focus {
  background-color: var(--colorBackgroundBotonIrArribaFocus);
  border: var(--botonVerMasBorderWidth) solid var(--colorBordeBotonIrArribaFocus);
}

.ir-arriba-opcion-letra:active {
  outline: 0;
  background-color: var(--colorBackgroundBotonIrArribaActive);
  border: var(--botonVerMasBorderWidth) solid var(--colorBordeBotonIrArribaActive);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
}

.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(--colorTextoBotonIrArriba);
  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: var(--enfasisTextoBotonIrArriba);
}

@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;
}