.navegacion-nuevas-opciones {
  border: 0;
}

.contenedor-navegacion-nuevas-opciones {
  margin: 0 0 15px 0;
}

@media screen and (min-width: 768px) {
  .contenedor-navegacion-nuevas-opciones {
    margin: 0 0 30px 0;
  }
}

.panel-selector-year {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

@media screen and (min-width: 768px) {
  .panel-selector-year {
    background-color: var(--colorBackgroundPanelSelectorYear);
  }
}

@media screen and (min-width: 996px) {
  .panel-selector-year {
    height: 80px;
  }
}

.boton-selector-year {
  width: 100%;
  margin: 0 30px 0 30px;
  border: none; /* 1px solid var(--colorBordeSelector) */
  border-radius: 25px; /* Igual en .select-selected */
  background-color: var(--colorBackgroundSelector);
}

@media screen and (min-width: 576px) {
  .boton-selector-year {
    width: 395px;
  }
}

.label-selector-year {
  display: none;
  color: var(--colorTextoLabelSelectorYear);  /* Hasta 20200721 estaba casiNegro */
  font-size: var(--letra16);
  font-weight: bold;
  line-height: 19px;
  letter-spacing: 0.4px;
}

@media screen and (min-width: 576px) {
  .label-selector-year {
    display: block;
  }
}

.boton-selector-year {
  position: relative;
}

.boton-selector-year select {
  display: none; /* hide original SELECT element: */
}

.select-selected {
  color: var(--colorTextoSelectYears);
  background-color: var(--colorBackgroundSelector);
  font-size: var(--letraSelectorNormal);
  font-weight: bold;
  padding: 18px 25px;
  border-radius: 25px; /* Igual que .boton-selector-year */
  cursor: pointer;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "\0276F"; /* https://www.toptal.com/designers/htmlarrows/ */
  font-size: var(--letraSelectorNormal);
  top: 22px;
  right: 25px;
  width: 0;
  height: 0;
  transform: rotate(90deg);
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  position: absolute;
  content: "\0276E"; /* https://www.toptal.com/designers/htmlarrows/ */
  font-size: var(--letraSelectorNormal);
  top: 22px;
  right: 25px;
  width: 0;
  height: 0;
  transform: rotate(90deg);
}

/* style the items (options), including the selected item: */
.select-items div {
  color: var(--colorTextoSelectYears);
  font-size: var(--letraSelectorNormal);
  font-weight: 500;
  padding: 12px 16px;
  border: 1px solid var(--colorBordeItemListaSelector);
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: var(--colorBackgroundItemsSelector);
  border: 1px solid var(--colorBordeSelectItems);
  top: 100%;
  left: -1px;
  right: -1px;
  max-height: 215px;
  overflow-y: scroll;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  color: var(--colorTextoSelectYearsHover);
  background-color: var(--colorBackgroundItemsSelectorHover);
}

div.same-as-selected {
  color: var(--colorTextoSelectYearsHover);
}

.contenedor-panel-documentos-year {
  margin: 30px 20px 15px 20px;
}

@media screen and (min-width: 768px) {
  .contenedor-panel-documentos-year {
    margin: 40px 30px 30px 30px;
  }
}

@media screen and (min-width: 1200px) {
  .contenedor-panel-documentos-year {
    margin: 40px 0 30px 0;
  }
}

.panel-documentos-year {
  height: auto;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .panel-documentos-year {
    border: none; /* 1px solid var(--colorBordePanelDocumentosYear) */
    border-radius: 4px;
  }
}

.sin-panel-year {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  .sin-panel-year {
    margin-top: 30px;
  }
}

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

.opcion-year:hover {
  box-shadow: 0 .1rem 1rem var(--colorGrisSombra);
}

.contenedor-opcion-year { /* 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-year {
  height: 100%;
  align-content: center;
}


.imagen-opcion-year {
  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(--colorBackgroundImagenOpcionYear);
}

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

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

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


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

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


.ir-arriba-opcion-year {
  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-year {
    width: var(--botonVerMasRoundWidthNormal);
    height: var(--botonVerMasRoundHeightNormal);
    border-radius: var(--borderRadiusBotonVerMasNormal);
  }
}

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

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

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

.ir-arriba-opcion-year: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-year {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

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

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

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

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


.panel-lista-documentos {
  margin: 0 20px 20px 20px;
}

@media screen and (min-width: 768px) {
  .panel-lista-documentos {
    margin: 0 30px 30px 30px;
  }
}

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

.imagen-opcion-nueva {
  justify-self: center;
  margin: var(--margenVerticalImagenOpcionSmall) 0 0 0;
}

@media screen and (min-width: 576px) {
  .imagen-opcion-nueva {
    margin: var(--margenVerticalImagenOpcionSmall) 0 var(--margenVerticalImagenOpcionSmall) 0;
  }
}

.id-documento {
  display: flex;
  color: var(--colorTextoIdDocumento);
  font-size: var(--letraOpcionNuevaSmall);
  line-height: var(--letraLineHeightOpcionNuevaSmall);
  font-weight: var(--enfasisDocumentos);
  align-items: center;
  text-decoration: none;
  margin: 0 20px 0 20px;
}

@media screen and (min-width: 576px) {
  .id-documento {
    margin: 0;
  }
}

@media screen and (min-width: 992px) {
  .id-documento {
    font-size: var(--letraOpcionNuevaNormal);
    line-height: var(--letraLineHeightOpcionNuevaNormal);
  }
}


.descripcion-documento {
  display: flex;
  min-height: 68px; /* El botón "Consultar" tiene 50px de alto en esta resolución, más 18px de margen inferior */
  color: var(--colorTextoDescripcionDocumento);
  font-size: var(--letraDescripcionDocumentoSmall);
  line-height: var(--letraLineHeightDescripcionDocumentoSmall);
  align-items: flex-start;
}

@media screen and (min-width: 992px) {
  .descripcion-documento {
    min-height: 70px; /* El botón "Consultar" tiene 50px de alto en esta resolución, más 20px de margen inferior */
    font-size: var(--letraDescripcionDocumentoNormal);
    line-height: var(--letraLineHeightDescripcionDocumentoNormal);
  }
}

.descripcion-documento p {
  margin: 0 20px 0 20px; /* margin: 0 0 40px 40px */
}

@media screen and (min-width: 576px) {
  .descripcion-documento p {
    margin: 0 0 20px 20px; /* margin: 0 0 50px 40px */
  }
}

@media screen and (min-width: 768px) {
  .descripcion-documento p {
    margin: 0 0 20px 20px; /* margin: 0 0 50px 40px */
  }
}

.ver-mas-opcion-nueva {
  justify-self: center;
  margin-bottom: 20px;
}

@media screen and (min-width: 576px) {
  .ver-mas-opcion-nueva {
    align-self: flex-start;
    justify-self: auto;
    margin-bottom: 0;
  }
}