.information-container {
  padding: 0 !important;
  .row {
    margin: 0;
    align-items: center;

    .sidenav {
      height: 590px;
      width: 400px !important;
      display: grid;
      grid-template-areas:
        "tittle"
        "search"
        "geo"
        "list";
      grid-template-rows: 70px 40px auto 1fr;
      grid-template-columns: 100%;
      border: 1px solid;
      border-radius: 18px 80px 18px 80px;
      padding: 30px 20px;
      gap: 22px;
      position: absolute;
      left: 60px;
      z-index: 1;
      background: #fff;

      .tittle {
        grid-area: tittle;
        font-size: 1.25rem;
        text-align: center;

        h2 {
          font-size: 2.2rem;
          font-weight: normal;
          margin: 0;
          color: #002855;
        }
        h1 {
          font-size: 3.7rem;
          font-weight: 900;
          margin: 0;
          color: #002855;
        }
      }
      .buscador {
        grid-area: search;
        display: flex;
        align-items: center;

        .input-icon {
          position: absolute;
          left: 10px;
          font-size: 1.6rem;
          z-index: 999;
          color: #797f89 !important;
        }
        #edit-autocomplete {
          width: 100%;
          height: 40px;
          padding: 10px;
          padding-left: 35px;
          border-radius: 5px;
          box-shadow: none;

          &::placeholder {
            font-weight: 700;
            font-size: 1.6rem;
            color: #797f89 !important;
          }
        }
      }

      .geolocalizacion {
        grid-area: geo;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        max-height: 20px;

        #txtGeolocalizacion {
          text-align: center;
          display: none;
          font-weight: bold !important;
          font-size: 1rem;
          text-transform: uppercase;
          margin: 0;
          color: #d12100;
        }
      }
      #puntoInteresMasCercano {
        grid-area: list;
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;

        #puntoInteresMasCercanoContenedor {
          .card-text-numero_droguerias {
            h4 {
              font-size: 1.6rem;
              text-align: center;
              margin: 0;
              color: #002855;
            }
          }
          .error-listado {
            color: #ffa500;
            font-size: 1.6rem;
            display: flex;
            flex-direction: column;
            gap: 20px;
          }
          .listado_drog_yos {
            overflow-y: auto;
            overflow-x: hidden;
            max-height: 315px;
            border-radius: 0px 8px 0px 50px;

            &::-webkit-scrollbar {
              width: 10px; /* Ancho total del scroll incluyendo el borde */
              height: 10px; /* Altura para scroll horizontal */
            }

            &::-webkit-scrollbar-track {
              background: #f1f1f1;
              border-radius: 5px;
            }

            &::-webkit-scrollbar-thumb {
              background: #002855;
              border-radius: 5px;
            }

            .card {
              width: 98%;
              padding: 0;
              border: 1px solid #dadada;

              &.cardActive {
                background: #002855;
                .card-title {
                  color: #fff !important;
                }
                .contenedor_datos {
                  .card-text_direccion {
                    color: #fff !important;
                  }
                  .card-text_distancia {
                    color: #fff !important;
                    .text-distance {
                      color: #fff !important;
                    }
                  }
                }
              }

              .no-gutters {
                .card-body {
                  display: grid;
                  grid-template-areas:
                    "tittle"
                    "cont";
                  grid-template-rows: auto 1fr;
                  min-height: 190px;
                  padding: 15px;
                  gap: 6px;
                  text-align: left;

                  .card-title {
                    grid-area: tittle;
                    margin: 0;
                    font-size: 2.2rem;
                    line-height: 25px;
                    font-weight: 900;
                    color: #002855;
                  }
                  .contenedor_datos {
                    grid-area: cont;
                    display: grid;
                    grid-template-areas:
                      "direccion"
                      "num";
                    grid-template-rows: 27px 1fr;

                    .card-text_direccion {
                      grid-area: direccion;
                      margin: 0;
                      color: #aaaaaa;
                      font-weight: 500;
                      font-size: 1.3rem;
                    }
                    .contendio_tel_map {
                      grid-area: num;
                      display: grid;
                      grid-template-areas:
                        "tel1 tel2"
                        "dis dis"
                        "mas mas";
                      grid-template-columns: 50% 50%;
                      grid-template-rows: 16px 16px 36px;
                      align-content: center;
                      font-size: 1.3rem;
                      font-weight: 900;
                      gap: 6px;
                      align-items: center;

                      .telefono2 {
                        grid-area: tel2;
                        margin: 0;
                        color: #50bc50;
                        display: flex;
                        align-items: center;
                      }
                      .telefono3 {
                        grid-area: tel1;
                        margin: 0;
                        color: #ea7600;
                        display: flex;
                        align-items: center;
                      }
                      .card-text_distancia {
                        grid-area: dis;
                        margin: 0;
                        color: #0077c8;
                        font-size: 1.3rem !important;
                        font-weight: 900;

                        small.text-distance {
                          color: #0077c8;
                          font-size: 1.3rem !important;
                          font-weight: 500;
                        }
                      }
                      .card-text_button {
                        grid-area: mas;
                        height: 36px;
                        background: #eeeeee;
                        border-radius: 12px;
                        border: 1px solid #c3c3c3;
                        padding: 10px 20px;
                        font-size: 1.3rem;
                        font-weight: 900;
                        color: rgba(0, 40, 85, 0.5);
                        box-shadow: 0 5px 6px rgba(0, 0, 0, 0.2);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 5px;

                        &:hover {
                          background: #0077c8;
                          color: #fff;

                          .dots {
                            color: #002855;
                          }
                        }

                        .dots {
                          color: #f0b323;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .map {
      max-width: 100% !important;
      width: 100%;
      flex: none;
      padding: 0;
      align-items: center;
      display: flex;

      #map {
        height: 650px;
        width: 100%;
      }
    }
  }
}

.gm-style-iw.gm-style-iw-c {
  padding: 10px !important;
  width: 100%;
  max-width: 350px !important;

  .gm-style-iw-chr {
    position: absolute;
    right: 5px;
    top: 0px;

    button {
      display: flex !important;
      justify-content: center;
      align-items: center;
      opacity: 1;

      span {
        background-color: #f0b323 !important;
        margin: 0 !important;
      }
    }
  }
  .gm-style-iw-d {
    padding: 0 !important;
    overflow: hidden !important;
    margin-right: 30px;

    .map_container {
      display: grid;
      grid-template-areas:
        "nom nom"
        "tele tele"
        "link link";
      grid-template-rows: auto 40px auto;
      grid-template-columns: 50% 50%;
      align-items: center;
      padding: 5px;
      gap: 5px 0px;
      text-align: left;

      .nom_di {
        grid-area: nom;
        display: grid;
        align-items: center;
        grid-template-areas:
          "nombre"
          "direccion";
        grid-template-rows: auto 20px;
        margin: 0;
        gap: 5px;

        .nombre {
          grid-area: nombre;
          font-size: 1.6rem;
          font-weight: 900;
          color: #002855;
          margin: 0;
        }
        .direccion {
          grid-area: direccion;
          font-size: 1.4rem;
          font-weight: 500;
          color: #aaaaaa;
          margin: 0;
        }
      }
      .telefono {
        grid-area: tele;
        margin: 0;

        .contenido_telefono {
          display: grid;
          grid-template-areas: "tel wsp";
          grid-template-columns: 145px 145px;
          align-items: center;
          font-weight: 900;
          font-size: 1.3rem;

          a.telefono2 {
            grid-area: wsp;
            display: flex;
            align-items: center;
            color: #50bc50;
          }
          a.telefono3 {
            grid-area: tel;
            display: flex;
            align-items: center;
            color: #ea7600;
          }
        }
      }
      .compras_online {
        grid-area: link;
        margin: 0;

        .contenido_compras_online {
          display: grid;
          grid-template-areas: "web farma";
          grid-template-columns: 50% 50%;
          align-items: center;

          a img {
            max-width: 100%;
          }

          .farmaexpressonline {
            grid-area: farma;
          }
          .web {
            grid-area: web;
          }
        }
      }
    }
  }
}

/* modal mapa */
#modal_content.modal-mapa-tdmc {
  background-color: rgb(0, 0, 0, 0.6);

  .modal-dialog {
    max-width: 1418px;
    width: 100%;
    max-height: 735px;
    color: #002855;

    .modal-content {
      border-radius: 10px 80px 15px 85px;
      padding: 0;

      .modal-header {
        border: none;
        position: absolute;
        right: 0;
        height: 58px;
        width: 58px;
        padding: 0;
        z-index: 1;

        button.close {
          padding: 0;
          background: transparent;
          border: none;
          opacity: 1;
          top: 0px;

          img {
            width: 58px;
          }
        }
      }
      .modal-body {
        display: grid;
        grid-template-areas:
          "droguerias"
          "listado";
        grid-template-rows: auto 270px;
        padding: 0;

        #markerInfo {
          grid-area: droguerias;
          padding: 10px 62px;

          .datos-modal {
            display: grid;
            grid-template-areas:
              "top top"
              "left right";
            grid-template-rows: 120px 1fr;
            grid-template-columns: 50% 50%;

            .top-container {
              grid-area: top;
              width: 100%;
              display: grid;
              grid-template-areas: "nom tipo";
              grid-template-columns: 1fr 300px;
              align-items: center;

              .nom_di {
                grid-area: nom;
                display: flex;
                flex-direction: column;
                gap: 13px;
                justify-content: center;

                h6 {
                  font-size: 2.2rem;
                  font-weight: 500;
                  color: #002855;
                  line-height: 100%;
                  margin: 0;
                }
                .nombre {
                  font-size: 3.7rem;
                  font-weight: 800;
                  line-height: 100%;
                }
                .direccion {
                  font-size: 1.3rem;
                  font-weight: 500;
                  line-height: 100%;
                }
              }
              .tipo_drogueria {
                grid-area: tipo;

                img {
                  width: 300px;
                }
              }
            }

            .left-container {
              grid-area: left;
              display: grid;
              grid-template-areas:
                "telefono redes"
                "line line"
                "horarios horarios"
                "compra compra";
              grid-template-rows: 99px 1px 132px 77px;
              grid-template-columns: 50% 50%;
              margin-right: 31px;
              align-items: center;

              .telefono {
                grid-area: telefono;

                .contenido_telefono {
                  display: flex;
                  font-weight: 800;
                  flex-direction: column;

                  a {
                    font-size: 2.4rem;
                    line-height: 100%;
                    letter-spacing: 0;

                    &:hover {
                      color: #50bc50;
                    }
                  }
                }
              }
              .redes_sociales {
                grid-area: redes;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                .contenido_redes_sociales {
                  display: flex;
                  gap: 10px;

                  a {
                    display: block;
                    width: 50px;
                    height: 50px;
                  }
                }
              }

              .line {
                grid-area: line;
                height: 1px;
                background: #ff9d12;
                width: 100%;
              }

              .horarios {
                grid-area: horarios;

                strong {
                  font-size: 2.2rem;
                  font-weight: 800;
                }

                .horarios_wrapper {
                  display: flex;
                  gap: 22px;

                  .horario_left,
                  .horario_right {
                    width: 297px;
                    line-height: 100%;

                    .horario-linea {
                      font-size: 1.3rem;
                      display: grid;
                      grid-template-areas: "dia hora";
                      grid-template-columns: 38px auto;
                      gap: 30px;

                      .horario-dia {
                        font-weight: 900;
                      }
                    }
                  }
                }
              }
              .compras_online {
                grid-area: compra;

                .contenido_compras_online {
                  display: grid;
                  grid-template-areas: "compra farma";
                  grid-template-columns: 50% 50%;
                  grid-template-rows: 77px;
                  gap: 13px;
                  align-items: center;

                  .farmaexpressonline,
                  a.web {
                    width: 292px;
                  }
                  .farmaexpressonline {
                    grid-area: farma;
                  }
                  a.web {
                    grid-area: compra;
                  }
                }
              }
            }
            .right-container {
              grid-area: right;
              margin-left: 31px;
              display: grid;
              grid-template-areas:
                "serv serv"
                "pago tele";
              grid-template-columns: 50% 50%;
              grid-template-rows: 130px 120px;
              align-content: center;
              gap: 52px 0;

              .servicios {
                grid-area: serv;
                overflow: hidden;

                strong {
                  font-size: 2.2rem;
                  font-weight: 800;
                }

                .contenido_servicios {
                  display: flex;
                  flex-wrap: nowrap;
                  overflow-x: auto;
                  overflow-y: hidden;
                  gap: 20px;
                  padding: 15px 0;
                  max-width: 100%;
                  padding-bottom: 20px;

                  &::-webkit-scrollbar {
                    height: 10px;
                    display: block !important;
                  }

                  &::-webkit-scrollbar-track {
                    background: #f1f1f1;
                    border-radius: 5px;
                  }

                  &::-webkit-scrollbar-thumb {
                    background: #ea7600;
                    border-radius: 5px;
                  }

                  .servicio_img {
                    flex: 0 0 auto;
                    width: 50px;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                }
              }
              .metodos_de_pago {
                grid-area: pago;

                strong {
                  font-size: 2.2rem;
                  font-weight: 800;
                }
                .contenido_medios_de_pago {
                  display: flex;
                  gap: 13px;
                }
              }
              .telemedicina {
                grid-area: tele;

                strong {
                  font-size: 2.2rem;
                  font-weight: 800;
                }
                .contenido_telemedicina {
                  display: flex;
                  gap: 13px;
                }
              }
            }
          }
        }

        div#droguerias_modal2 {
          grid-area: listado;
          border-radius: 0px 0px 10px 80px;
          border: 1px solid;
          background: #002855;
          padding: 0px 22px;
          max-width: 1470px;
          overflow-x: hidden;
          overflow-y: hidden;

          .card-text-numero_droguerias {
            text-align: center;

            h4 {
              color: #fff;
              margin-bottom: 13px;
              line-height: 100%;
            }
          }
          .listado_drog_yos {
            display: flex;
            flex-direction: row;
            gap: 15px;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 0;
            width: 1376px;
            margin: auto;

            &::-webkit-scrollbar {
              height: 10px;
              display: block !important;
            }

            &::-webkit-scrollbar-track {
              background: #f1f1f1;
              border-radius: 5px;
            }

            &::-webkit-scrollbar-thumb {
              background: #ea7600;
              border-radius: 5px;
            }

            & > div.card:first-child {
              border-radius: 5px 20px 5px 50px !important;
            }

            .card {
              width: 400px;
              height: 180px;
              flex-shrink: 0;
              margin-right: 0;
              border-radius: 5px 20px 5px 20px;
              background: #eef0f9;
              margin-bottom: 10px !important;

              &.cardActive {
                background: #002855;
                border: 1px solid #fff;

                .card-title {
                  color: #fff !important;
                }

                .card-text_direccion {
                  color: #fff !important;
                }
                .card-text_distancia {
                  color: #fff !important;
                  .text-distance {
                    color: #fff !important;
                  }
                }
              }

              /* Elimina márgenes que puedan interferir */
              .no-gutters {
                margin: 0;
                height: 100%;

                .puntoMasInformacion {
                  width: 100%;
                  height: 100%;

                  .card-body {
                    display: grid;
                    grid-template:
                      "nombre"
                      "direccion"
                      "tele"
                      "dista"
                      "boton";
                    grid-template-rows: auto 16px 14px 16px 37px;
                    gap: 6px;
                    padding: 16px 10px 13px;

                    .card-title {
                      grid-area: nombre;
                      margin: 0;
                      font-size: 2.2rem;
                      line-height: 100%;
                      font-weight: 900;
                      color: #002855;
                      width: 100%;
                      gap: 5px;
                      min-height: 44px;
                      display: grid;
                      grid-template-areas: "text ico";

                      .contenedor_icono {
                        grid-area: ico;

                        img {
                          width: 32px;
                        }
                      }
                    }
                    .card-text_direccion {
                      grid-area: direccion;
                      font-size: 1.3rem;
                      margin: 0;
                      color: #aaaaaa;
                    }
                    .contendio_tel_map {
                      grid-area: tele;
                      display: grid;
                      grid-template-areas: "tele3 tele2";
                      grid-template-rows: 14px;
                      grid-template-columns: 40% 40%;
                      font-weight: 900;

                      .card-text_telefono2 {
                        grid-area: tele2;
                        font-size: 1.3rem;
                        color: #50bc50;
                      }
                      .card-text_telefono {
                        grid-area: tele3;
                        font-size: 1.3rem;
                        color: #ea7600;
                      }
                    }
                    .card-text_distancia {
                      grid-area: dista;
                      margin: 0;
                      color: #0077c8;
                      font-size: 1.3rem !important;
                      font-weight: 900;

                      small.text-distance {
                        color: #0077c8;
                        font-size: 1.3rem !important;
                        font-weight: 500;
                      }
                    }
                    .card-text_button {
                      grid-area: boton;
                      font-size: 1.3rem;
                      text-transform: uppercase;
                      width: 90%;
                      margin: auto;
                      height: 36px;
                      border-radius: 5px 15px 5px 15px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      gap: 5px;
                      background: #fff;
                      border: 1px solid #002855;
                      color: #002855;

                      &:hover {
                        background: #0077c8;
                        color: #fff;

                        .dots {
                          color: #002855;
                        }
                      }

                      .dots {
                        color: #f0b323;
                        font-weight: 900;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 576px) {
  .information-container {
    .row {
      .map {
        flex-direction: column;
        .sidenav {
          width: 500px !important;
          position: relative;
          left: 0;
          border: 0;
          border-radius: 0;
          height: 480px;

          #puntoInteresMasCercano {
            #puntoInteresMasCercanoContenedor {
              .listado_drog_yos {
                max-height: 230px;
                display: flex;
                flex-direction: row;
                gap: 20px;
                overflow-x: auto;
                overflow-y: hidden;
                max-width: 450px;
                border-radius: 0;

                &::-webkit-scrollbar {
                  height: 10px !important;
                }

                .card {
                  width: 400px;
                  height: 220px;
                  margin: 0 !important;
                  min-width: 300px;

                  .no-gutters {
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #modal_content.modal-mapa-tdmc {
    .modal-dialog {
      width: 100%;
      margin: 0 auto;

      .modal-content {
        border-radius: 0;

        .modal-body {
          grid-template-rows: auto 270px;
          #markerInfo {
            padding: 10px;

            .datos-modal {
              grid-template-areas:
                "top"
                "left"
                "right";
              grid-template-rows: 140px 230px 230px;
              grid-template-columns: 100%;

              .top-container {
                grid-template-areas:
                  "tipo"
                  "nom";
                grid-template-columns: 100%;
                grid-template-rows: 50px 90px;

                .nom_di {
                  gap: 5px;
                  text-align: center;

                  h6 {
                    font-size: 1.28rem;
                  }
                  .nombre {
                    font-size: 1.6rem;
                  }
                }
                .tipo_drogueria {
                  .tipo_drogueria_img {
                    width: 200px;
                    margin: auto;

                    img {
                      width: 200px;
                    }
                  }
                }
              }
              .left-container {
                margin: auto;
                width: 350px;
                grid-template-rows: 59px 1px 100px 47px;

                .telefono {
                  .contenido_telefono {
                    a {
                      font-size: 1.6rem;
                      img {
                        width: 1.6rem;
                      }
                    }
                  }
                }

                .redes_sociales {
                  justify-content: center;

                  .contenido_redes_sociales {
                    a {
                      width: 40px;
                      height: 40px;
                    }
                  }
                }

                .horarios {
                  text-align: center;

                  strong {
                    font-size: 1.6rem;
                  }
                  .horarios_wrapper {
                    gap: 5px;

                    .horario_left,
                    .horario_right {
                      width: 100%;

                      .horario-linea {
                        font-size: 1.12rem;
                        gap: 5px;
                      }
                    }
                  }
                }
                .compras_online {
                  .contenido_compras_online {
                    gap: 5px;
                    .farmaexpressonline,
                    a.web {
                      width: 170px;

                      img {
                        width: 170px;
                      }
                    }
                  }
                }
              }
              .right-container {
                margin: auto;
                width: 350px;
                grid-template-rows: 120px 132px 77px;
                gap: 0;

                .servicios,
                .metodos_de_pago,
                .telemedicina {
                  text-align: center;

                  strong {
                    font-size: 1.6rem;
                  }
                  img {
                    width: 50px;
                  }
                }

                .metodos_de_pago {
                  overflow: hidden;
                  width: 100%;

                  .contenido_medios_de_pago {
                    display: flex;
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    overflow-y: hidden;
                    gap: 10px;
                    padding: 5px 0;
                    max-width: 100%;
                    padding-bottom: 20px;

                    .pago_img {
                      flex: 0 0 auto;
                      width: 50px;
                      height: 50px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    }
                  }
                }

                .telemedicina {
                  overflow: hidden;
                  width: 100%;

                  .contenido_telemedicina {
                    display: flex;
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    overflow-y: hidden;
                    gap: 10px;
                    padding: 5px 0;
                    max-width: 100%;
                    padding-bottom: 20px;
                    justify-content: center;

                    div {
                      flex: 0 0 auto;
                      width: 50px;
                      height: 50px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    }
                  }
                }
              }
            }
          }
          #droguerias_modal2 {
            border-radius: 0 !important;
            padding: 10px !important;

            .card-text-numero_droguerias {
              display: none;
            }

            .listado_drog_yos {
              height: 250px;

              .card {
                height: 220px !important;
                width: 300px !important;

                .no-gutters {
                  .puntoMasInformacion {
                    .card-body {
                      grid-template-rows: 66px 20px 20px 20px auto !important;

                      .contendio_tel_map {
                        grid-template-columns: 50% 50% !important;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
/* Pequeños (móviles grandes / tablets verticales) */
@media (min-width: 577px) and (max-width: 768px) {
  .information-container {
    .row {
      .map {
        flex-direction: column;
        .sidenav {
          width: 510px !important;
          position: relative;
          left: 0;
          border: 0;
          border-radius: 0;
          height: 480px;

          #puntoInteresMasCercano {
            #puntoInteresMasCercanoContenedor {
              .listado_drog_yos {
                max-height: 230px;
                display: flex;
                flex-direction: row;
                gap: 20px;
                overflow-x: auto;
                overflow-y: hidden;
                max-width: 470px;
                border-radius: 0;

                &::-webkit-scrollbar {
                  height: 10px !important;
                }

                .card {
                  width: 400px;
                  height: 230px;
                  margin: 0 !important;
                  min-width: 300px;

                  .no-gutters {
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #modal_content.modal-mapa-tdmc {
    .modal-dialog {
      width: 100% !important;
      margin: auto;
      top: 40px;

      .modal-content {
        border-radius: 0;

        .modal-body {
          grid-template-rows: auto 270px;
          #markerInfo {
            padding: 10px;

            .datos-modal {
              grid-template-rows: 100px 240px;

              .top-container {
                grid-template-areas: "nom tipo";
                grid-template-columns: 50% 50%;
                grid-template-rows: 100px;
                justify-items: center;
                padding: 0;

                .nom_di {
                  gap: 5px;
                  text-align: left;

                  h6 {
                    font-size: 2rem !important;
                  }
                  .nombre {
                    font-size: 3rem !important;
                  }
                }
                .tipo_drogueria {
                  .tipo_drogueria_img {
                    width: 300px !important;
                    margin: auto;
                  }
                }
              }
              .left-container {
                margin: auto;
                width: 350px;
                grid-template-rows: 59px 1px 100px 47px;

                .telefono {
                  .contenido_telefono {
                    a {
                      font-size: 1.5rem !important;
                      img {
                        width: 1.5rem !important;
                      }
                    }
                  }
                }

                .redes_sociales {
                  justify-content: center;

                  .contenido_redes_sociales {
                    a {
                      width: 40px;
                      height: 40px;
                    }
                  }
                }

                .horarios {
                  text-align: center;

                  strong {
                    font-size: 1rem;
                  }
                  .horarios_wrapper {
                    gap: 5px;

                    .horario_left,
                    .horario_right {
                      width: 100%;

                      .horario-linea {
                        font-size: 1.1rem !important;
                        gap: 5px;
                      }
                    }
                  }
                }
                .compras_online {
                  .contenido_compras_online {
                    gap: 5px;
                    .farmaexpressonline,
                    a.web {
                      width: 170px;
                    }
                  }
                }
              }
              .right-container {
                margin: auto;
                width: 350px;
                grid-template-rows: 120px 132px 77px;
                gap: 0;

                .servicios,
                .metodos_de_pago,
                .telemedicina {
                  text-align: center;

                  strong {
                    font-size: 1rem;
                  }
                }

                .metodos_de_pago {
                  overflow: hidden;
                  width: 100%;

                  .contenido_medios_de_pago {
                    display: flex;
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    overflow-y: hidden;
                    gap: 10px;
                    padding: 5px 0;
                    max-width: 100%;
                    padding-bottom: 20px;

                    .pago_img {
                      flex: 0 0 auto;
                      width: 50px;
                      height: 50px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    }
                  }
                }

                .telemedicina {
                  overflow: hidden;
                  width: 100%;

                  .contenido_telemedicina {
                    display: flex;
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    overflow-y: hidden;
                    gap: 10px;
                    padding: 5px 0;
                    max-width: 100%;
                    padding-bottom: 20px;
                    justify-content: center;

                    div {
                      flex: 0 0 auto;
                      width: 50px;
                      height: 50px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    }
                  }
                }
              }
            }
          }
          #droguerias_modal2 {
            border-radius: 0 !important;
            padding: 10px !important;

            .listado_drog_yos {
              height: 250px;
              padding: 0 20px !important;

              .card {
                height: 220px !important;
                width: 300px !important;

                .no-gutters {
                  .puntoMasInformacion {
                    .card-body {
                      grid-template-rows: 66px 20px 20px 20px auto !important;

                      .contendio_tel_map {
                        grid-template-columns: 50% 50% !important;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* Medianos (tablets horizontales / pantallas pequeñas) */
@media (min-width: 768px) and (max-width: 992px) {
  .information-container {
    .row {
      .map {
        flex-direction: column;
        .sidenav {
          width: 738px !important;
          position: relative;
          left: 0;
          border: 0;
          border-radius: 0;
          height: 480px;

          #puntoInteresMasCercano {
            #puntoInteresMasCercanoContenedor {
              .listado_drog_yos {
                max-height: 230px;
                display: flex;
                flex-direction: row;
                gap: 20px;
                overflow-x: auto;
                overflow-y: hidden;
                max-width: 650px;
                border-radius: 0;

                &::-webkit-scrollbar {
                  height: 10px !important;
                }

                .card {
                  width: 400px;
                  height: 230px;
                  margin: 0 !important;
                  min-width: 300px;

                  .no-gutters {
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #modal_content.modal-mapa-tdmc {
    .modal-dialog {
      width: 100%;
      margin: 0;

      .modal-content {
        border-radius: 0;

        .modal-body {
          grid-template-rows: auto 300px;
          #markerInfo {
            padding: 10px;

            .datos-modal {
              grid-template-rows: 100px 240px;

              .top-container {
                grid-template-rows: 100px;
                padding-left: 25px;

                .nom_di {
                  gap: 5px;
                  text-align: left;

                  h6 {
                    font-size: 0.8rem;
                  }
                  .nombre {
                    font-size: 1rem;
                  }
                }
                .tipo_drogueria {
                  .tipo_drogueria_img {
                    width: 200px;
                    margin: auto;
                  }
                }
              }
              .left-container {
                margin: auto;
                width: 350px;
                grid-template-rows: 59px 1px 100px 47px;

                .telefono {
                  .contenido_telefono {
                    a {
                      font-size: 1rem;
                      img {
                        width: 1rem;
                      }
                    }
                  }
                }

                .redes_sociales {
                  justify-content: center;

                  .contenido_redes_sociales {
                    a {
                      width: 40px;
                      height: 40px;
                    }
                  }
                }

                .horarios {
                  text-align: center;

                  strong {
                    font-size: 1rem;
                  }
                  .horarios_wrapper {
                    gap: 5px;

                    .horario_left,
                    .horario_right {
                      width: 100%;

                      .horario-linea {
                        font-size: 0.7rem;
                        gap: 5px;
                      }
                    }
                  }
                }
                .compras_online {
                  .contenido_compras_online {
                    gap: 5px;
                    .farmaexpressonline,
                    a.web {
                      width: 170px;
                    }
                  }
                }
              }
              .right-container {
                margin: auto;
                width: 350px;
                grid-template-rows: 120px 132px 77px;
                gap: 0;

                .servicios,
                .metodos_de_pago,
                .telemedicina {
                  text-align: center;

                  strong {
                    font-size: 1rem;
                  }
                }

                .metodos_de_pago {
                  overflow: hidden;
                  width: 100%;

                  .contenido_medios_de_pago {
                    display: flex;
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    overflow-y: hidden;
                    gap: 10px;
                    padding: 5px 0;
                    max-width: 100%;
                    padding-bottom: 20px;

                    .pago_img {
                      flex: 0 0 auto;
                      width: 50px;
                      height: 50px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    }
                  }
                }

                .telemedicina {
                  overflow: hidden;
                  width: 100%;

                  .contenido_telemedicina {
                    display: flex;
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    overflow-y: hidden;
                    gap: 10px;
                    padding: 5px 0;
                    max-width: 100%;
                    padding-bottom: 20px;
                    justify-content: center;

                    div {
                      flex: 0 0 auto;
                      width: 50px;
                      height: 50px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    }
                  }
                }
              }
            }
          }
          #droguerias_modal2 {
            border-radius: 0 !important;
            padding: 10px !important;

            .listado_drog_yos {
              height: 250px;

              .card {
                height: 220px !important;
                width: 300px !important;

                .no-gutters {
                  .puntoMasInformacion {
                    .card-body {
                      grid-template-rows: 66px 20px 20px 20px auto !important;

                      .contendio_tel_map {
                        grid-template-columns: 50% 50% !important;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  #modal_content.modal-mapa-tdmc {
    .modal-dialog {
      width: 100%;
      margin: 0;

      .modal-content {
        border-radius: 0;

        .modal-body {
          grid-template-rows: auto 270px;
          #markerInfo {
            padding: 10px;

            .datos-modal {
              grid-template-rows: 100px 240px;

              .top-container {
                .nom_di {
                  gap: 5px;
                  text-align: left;

                  h6 {
                    font-size: 0.8rem;
                  }
                  .nombre {
                    font-size: 1rem;
                  }
                }
                .tipo_drogueria {
                  .tipo_drogueria_img {
                    width: 200px;
                    margin: auto;
                  }
                }
              }
              .left-container {
                grid-template-rows: 59px 1px 100px 80px;

                .telefono {
                  .contenido_telefono {
                    a {
                      font-size: 1rem;
                      img {
                        width: 1rem;
                      }
                    }
                  }
                }

                .redes_sociales {
                  justify-content: center;

                  .contenido_redes_sociales {
                    a {
                      width: 40px;
                      height: 40px;
                    }
                  }
                }

                .horarios {
                  text-align: center;

                  strong {
                    font-size: 1rem;
                  }
                  .horarios_wrapper {
                    gap: 5px;

                    .horario_left,
                    .horario_right {
                      width: 100%;

                      .horario-linea {
                        font-size: 0.7rem;
                        gap: 5px;
                      }
                    }
                  }
                }
                .compras_online {
                  .contenido_compras_online {
                    gap: 5px;
                    .farmaexpressonline,
                    a.web {
                      width: 170px;
                    }
                  }
                }
              }
              .right-container {
                gap: 0;

                .servicios,
                .metodos_de_pago,
                .telemedicina {
                  text-align: center;

                  strong {
                    font-size: 1rem;
                  }
                }

                .metodos_de_pago {
                  overflow: hidden;
                  width: 100%;

                  .contenido_medios_de_pago {
                    display: flex;
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    overflow-y: hidden;
                    gap: 10px;
                    padding: 5px 0;
                    max-width: 100%;
                    padding-bottom: 20px;

                    .pago_img {
                      flex: 0 0 auto;
                      width: 50px;
                      height: 50px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    }
                  }
                }

                .telemedicina {
                  overflow: hidden;
                  width: 100%;

                  .contenido_telemedicina {
                    display: flex;
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    overflow-y: hidden;
                    gap: 10px;
                    padding: 5px 0;
                    max-width: 100%;
                    padding-bottom: 20px;
                    justify-content: center;

                    div {
                      flex: 0 0 auto;
                      width: 50px;
                      height: 50px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    }
                  }
                }
              }
            }
          }
          #droguerias_modal2 {
            border-radius: 0 !important;
            padding: 10px !important;

            .listado_drog_yos {
              .card {
                .no-gutters {
                  .puntoMasInformacion {
                    .card-body {
                      .contendio_tel_map {
                        grid-template-columns: 50% 50% !important;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .information-container {
    .row {
      .map {
        flex-direction: column;
        .sidenav {
          width: 380px !important;

          #puntoInteresMasCercano {
            #puntoInteresMasCercanoContenedor {
              .listado_drog_yos {
                max-width: 380px !important;
              }
            }
          }
        }
      }
    }
  }
}