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

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

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

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

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

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

.boton-selector-year {
  width: 100%;
  margin: 0 30px 0 30px;
  border: 1px solid var(--colorGrisBorde);
  border-radius: 0; /* Igual en .select-selected */
  background-color: var(--colorBackgroundSelector); /* Hasta 20200721 estaba: linear-gradient(0deg, #F2F4F7 0%, var(--fondoBlanco) 100%); */
}

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

.label-selector-year {
  display: none;
  color: var(--colorTextoLabelSelectorYear);
  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: 0; /* 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);
}
/* Style the arrow inside the select element: */
.xxxxxselect-selected:after {
  position: absolute;
  content: "\0276F"; /* https://www.toptal.com/designers/htmlarrows/ */
  font-size: 16px;
  top: 16px;
  right: 10px;
  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);
}
/* Point the arrow upwards when the select box is open (active): */
.xxxxxselect-selected.select-arrow-active:after {
  position: absolute;
  content: "\0276E"; /* https://www.toptal.com/designers/htmlarrows/ */
  font-size: 16px;
  top: 16px;
  right: 10px;
  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: bold;
  padding: 12px 16px;
  xxxxxborder: 1px solid var(--colorBordeItemListaSelector);
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
/* style the items (options), including the selected item: */
.xxxxxselect-items div {
  color: #ffffff;
  font-size: var(--letra16);
  font-weight: bold;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: var(--colorBackgroundItemsSelector);
  border: 1px solid var(--colorBordeSelectItems);
  top: 100%;
  left: -1px;
  right: -1px;
  z-index: 99;
}
/* Style items (options): */
.xxxxselect-items {
  position: absolute;
  background-color: var(--colorFondoSelector);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

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

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


@media screen and (min-width: 576px) {
  #selector-year {
    border-left: 1px solid var(--bordeGris);
    margin-left: 35%;
    padding-left: 20px;
  }
}


.contenedor-panel-documentos-year {
  background-color: var(--colorBackgroundContenedorPanelDocumentosYear);
  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: 0;
  }
}

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

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


.opcion-year {
  cursor: pointer;
  height: auto;
  width: 100%;
  border: 1px solid var(--colorBordeOpcionYear);
  border-radius: var(--borderRadiusBotones);
  /* background-color: var(--colorBackgroundOpcionYear); */ /* Fue pasado a la class .contenedor-opcion-year */
  box-shadow: 0 3px 7px 0 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%;
  background-color: var(--colorBackgroundOpcionYear);
}

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


.imagen-opcion-year {
  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(--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 {
  height: 32px;
  width: 32px;
  background-color: var(--colorBackgroundBotonIrArribaTranslucido);
  align-self: center;
  border: none;
  border-radius: 16px;
  font-family: var(--fontFamilyGeneral);
  cursor: pointer;
}

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

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

.contenedor-ir-arriba-opcion-year {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-color: var(--colorBackgroundBotonIrArriba);
  align-items: center;
  justify-content: center;
}

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

.contenedor-ir-arriba-opcion-year:hover {
  background-color: var(--colorBackgroundBotonIrArribaHover);
}

.contenedor-ir-arriba-opcion-year-style {
  color: var(--colorTextoBotonVerMas);
  font-size: var(--fontSizeMaterialIconIrArriba); /* font-size se mantiene para las diferentes resoluciones de pantalla */
  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: 20px 20px 30px 20px;
}

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

.contenedor-panel-lista-documentos {

}

.grid-contenedor-panel-lista-documentos {

}

.xxxxxopcion-nueva {
  height: auto;
  width: 100%;
  padding: 0;
  cursor: pointer;
}

.contenedor-opcion-nueva {
  background-color: var(--colorBackgroundOpcionNueva--esDocumento);
}

.imagen-opcion-nueva {
  background-color: var(--colorBackgroundImagenOpcionNueva--esDocumento);
}

.imagen-opcion-nueva-style {
  color: var(--colorImagenOpcion--esDocumento);
}

.id-documento {
  display: flex;
  color: var(--colorTextoIdDocumento);
  font-size: var(--letraOpcionNuevaSmall);
  line-height: var(--letraLineHeightOpcionNuevaSmall);
  font-weight: var(--enfasisDocumentos);
  align-items: center;
}

@media screen and (min-width: 768px) {
  .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: 768px) {
  .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 0 40px 40px;
}

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


.ver-mas-opcion-nueva {
  align-self: flex-start;
}


.fecha-acto {
  color: var(--destacados);
}

.expediente-acto {
  color: var(--destacados);
}

.empresas-acto {
  color: var(--destacados);
}

.tipo-acto {
  color: var(--destacados);
}

.descripcion-acto {
  color: var(--destacados);
}

.fecha-notificacion {
  color: var(--destacados);
}

.empresas-notificacion {
  color: var(--destacados);
}

.tipo-notificacion {
  color: var(--destacados);
}

.descripcion-notificacion {
  color: var(--destacados);
}