/* Filtro territorial */

.et_pb_row:has(.filtro-territorial) {
  width: 100% !important;
  max-width: calc(20rem + 22rem * 3 + 2rem * 2) !important; /* 20rem sidebar + 22rem per centro + 2rem of padding on both sides */
  padding-inline: 2rem;
}

.et_pb_column:has(.filtro-territorial) {
  width: 20rem !important;
  margin-right: 3rem !important;
}

.et_pb_column:has(.filtro-territorial) + .et_pb_column {
  width: calc(100% - 20rem - 3rem) !important;
}

.filtro-territorial {
  background-color: #ffffff;
  border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
  overflow: hidden;
  border-width: 0.1rem;
  border-color: #dfdfdf;
  box-shadow: 0px 4px 35px 10px rgba(0, 0, 0, 0.12);
  margin-top: 0 !important;

  & h3 {
    padding: 0.88rem 1.5rem;
    color: #4a5056;
    font-size: clamp(1.125rem, 0.993rem + 0.5634vw, 1.5rem) !important;
    font-family: 'Poppins';
  }

  & ul {
    padding: 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
  }

  & li {
    list-style: none;
    margin-bottom: 0 !important;
    padding: 0.88rem 1.5rem;
    color: #4a5056;
    cursor: pointer;

    &:not(:last-of-type) {
      border-bottom: 0.1rem solid #dfdfdf;
    }

    &:first-of-type {
      border-top: 0.1rem solid #dfdfdf;
    }

    &:hover,
    &.activo {
      background: #2c7ef6;
      color: white !important;
    }
  }
}

@media (1100px < width < 1425px) {
  .et_pb_row:has(.filtro-territorial) {
    max-width: calc(20rem + 22rem * 2 + 2rem * 2) !important; /* 20rem sidebar + 22rem per centro + 2rem of padding on both sides */
  }
}

@media (980px < width < 1101px) {
  .et_pb_row:has(.filtro-territorial) {
    max-width: calc(20rem + 22rem * 1 + 2rem * 2) !important; /* 20rem sidebar + 22rem per centro + 2rem of padding on both sides */
  }
}

@media (width < 981px) {
  .et_pb_row:has(.filtro-territorial) {
    max-width: 20rem !important;
    padding: 0 !important;
  }

  .et_pb_column:has(.filtro-territorial) + .et_pb_column {
    width: 100% !important;
    margin-top: 2rem !important;
  }
}

/* Mostrar y ocultar filtro territorial en moviles  */

.barra-de-filtro {
  display: none !important;
}

@media (width < 980px) {
  .et_pb_row:has(.filtro-territorial) {
    margin-top: 0 !important;
  }

  .filtro-territorial {
    background-color: unset;
    width: 100vw;
    margin-top: 0 !important;
    margin-left: calc((100% - 100vw) / 2); /* Compensate for the centered row */
    margin-right: calc((100% - 100vw) / 2); /* Compensate for the centered row */
    box-shadow: none;
  }
  .filtro-territorial ul {
    display: none !important;
    flex-wrap: wrap !important;
    place-content: unset !important;
    gap: 0.5rem;
    overflow: auto;
    scrollbar-width: none;
    padding: 0.5rem !important;

    &.visible {
      display: flex !important;
    }
  }

  .filtro-territorial li {
    flex-shrink: 0;
    padding: 0.25rem 0.75rem;
    background: #faf9f5;
    border-radius: 999em;
    border: 1px solid hsl(0, 0%, 80%) !important;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
    font-size: 0.8rem !important;
  }

  .filtro-territorial h3 {
    position: relative;
    text-transform: lowercase;

    &:before {
      content: 'Filtrar ';
      text-transform: capitalize;
    }
    &:after {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
      position: absolute;
      right: 1.5rem;
    }
  }

  & .filtro-territorial:has(ul.visible) h3:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E");
  }
}