[data-component-id="tec_prepa:ultimos_articulos"]{
  padding: 16px;
  overflow: hidden;
  background-color: #F2F2F2;

  & .view-bloque-ultimos-articulos {
    display: grid;
    gap: 16px;

    & .infinite-view-block-head {
      margin-bottom: 0;
      gap: 8px;

      & h2 {
        color: #030219;
        font-family: 'DM Sans';
        font-size: 26px;
        font-style: normal;
        font-weight: 500;
        line-height: 34px;
      }

      & .view-filters {
        width: 100%;
        min-height: 27px;

        & form {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin: 0 !important;
          background-color: #F2F2F2;

          & .views-exposed-form__item {
            margin: 0;
          }

          .exposed-filters-wrapper {
            gap: 8px;
            flex-direction: column;
            align-items: start;
          }

          & .exposed-filters-wrapper,
          & .form-item--programa,
          & .form-item--tema,
          & .form-item--categoria {
            & [for*="edit-tema"] {
              color: #030219;
              font-family: Poppins;
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              width: 100%;
              min-width: none;
              /*min-width: 220px;*/
            }

            & .nice-select {
              border: none;
              padding: 8px 32px 8px 8px;
              width: 100%;
              color: #030219;
              font-size: 16px;
              cursor: pointer;
              position: relative;
              background-image: none;
              min-height: auto;
              border-bottom: 2px solid #030219;
              margin-block-start: 0;

              &:hover,
              &:focus {
                box-shadow: none;
              }

              & .current {
                overflow: hidden;
                color: #030219;
                text-overflow: ellipsis;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 20px;
              }

              &:after {
                right: 8px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%) rotate(0deg);
                content: '';
                width: 24px;
                height: 24px;
                background-color: #030219;
                mask-size: 24px 24px;
                mask-position: center;
                mask-repeat: no-repeat;
                mask-image: url(/sites/exatec/themes/tec_prepa/images/svg/icono-arrow-down.svg);
                transition: transform .2s;
              }

              &.open {
                &:after {
                  transform: translateY(-50%) rotate(180deg);
                }

                ul.list {
                  display: block;
                  padding: 8px;
                  border-bottom: 2px solid #030219;
                  max-height: 206px;
                  overflow: auto;
                  overflow-x: hidden;

                  & li {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: var(--Base-Midnight, #030219);
                    text-overflow: ellipsis;
                    font-family: "DM Sans";
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 22px; /* 137.5% */
                    padding: 8px;
                    transition: background-color .3s ease-in-out;

                    &.selected {
                      background-color: #122CDE;
                      color: #FFF;
                    }

                    &:hover {
                      background-color: #122CDE;
                      color: #FFF;
                    }
                  }
                }
              }

              & ul.list {
                position: absolute;
                top: 100%; /* Se muestra justo debajo del select */
                left: 0;
                background-color: #fff;
                overflow-y: auto;
                padding: 8px;
                z-index: 1000;
                display: none; /* Oculto por defecto */
                width: 100%;
              }
            }
          }
        }

        .js-hide {
          display: none;
        }
      }
    }

    &.view-display-id-block_1{
      & .row-content{
        
      }
    }

    & .row-content {
      gap: 16px;
      display: flex;
      display: grid;
      flex-direction: column;
      grid-template-columns: 1fr;
    }

    & .view-empty{
      display: grid;
      gap: 16px;

      p > em {
        display: block;
        color: #030219;
        text-align: center;
        font-family: Archivo;
        font-size: 18px;
        font-style: italic;
        font-weight: 400;
        line-height: 24px;
      }

      & .view-bloque-ultimos-articulos {
        & > .infinite-view-block-head {
          & h3 {
            display: none;
          }
        }
      }

      .infinite-view-block-head {
        &:has(h2) {
          display: none;
        }
      }
    }

    &:has(.view-empty) {
      > .pager {
        display: none;
      }
    }

    .pager {
      padding-top: 0;
    }
  }
}

@media screen and (min-width: 768px) {
  [data-component-id="tec_prepa:ultimos_articulos"]{
    & .view-bloque-ultimos-articulos {
      & .infinite-view-block-head {
        & .view-filters {
          & form {
            & .exposed-filters-wrapper,
            & .form-item--programa,
            & .form-item--tema,
            & .form-item--categoria{
              label {
                min-width: 117px;
              }
            }
          }
        }
      }

      & .row-content {
        gap: 32px;
      }
    }
  }
}


@media screen and (min-width: 1024px) {
  [data-component-id="tec_prepa:ultimos_articulos"]{
    padding: 48px 96px !important;

    & .view-bloque-ultimos-articulos {
      gap: 32px;

      & .infinite-view-block-head {
        & h2 {
          min-width: 456px;
          font-size: 48px;
          font-style: normal;
          font-weight: 500;
          line-height: 50px;
        }

        & .view-filters {
          display: flex;
          align-content: center;
          gap: 0;

          & form {
            justify-content: end;
            align-content: center;
            flex-wrap: nowrap;

            & .exposed-filters-wrapper,
            & .form-item--programa,
            & .form-item--tema,
            & .form-item--categoria {
              width: 100%;
              flex-direction: row;
              align-items: center;
              justify-content: flex-end;

              & [for*="edit-tema"] {
                width: auto;
              }

              & .nice-select {
                width: 250px;
              }
            }

            #edit-actions {
              display: none;
            }
          }
        }
      }

      &.view-display-id-block_1{
        & .row-content{

        }
      }

      & .row-content {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }
  }
}