// Aside

.aside-compra {
  background: #eff7fd;
  padding: 40px;
  z-index: 3;

  .aside-compra-ico-toogle {
    background: #eff7fd;
    display: none;
    @include border-radius(3px);
    @include position(absolute, $top: -20px, $left: 20px, $width: 30px, $height: 30px);
    justify-content: center;
    align-content: center;

    .ico {
      width: 15px;
    }
  }

  .aside-header {
    border-bottom: 1px solid #cde9f8;

    h3,
    h3 * {
      color: $primary;

      font: {
        size: 13px;
        weight: 400;
      }

      margin-bottom: 5px;

      * {
        margin: 0;
      }
    }

    h4,
    h4 span {
      color: #414141;
      font-size: 18px;
    }

    .link {
      display: none;
      color: $blue;
      font-weight: 600;
      margin: 5px 0;
      @include position(absolute, $top: 20px, $right: 20px);
    }
  }

  .aside-content {
    min-height: 200px;
    margin: 20px 0;

    .aside-compra-item {
      margin-bottom: 10px;

      span {
        color: grey;
        display: inline-block;
        line-height: 20px;
      }

      p {
        margin: 0;
        font-weight: 600;
        line-height: 16px;

        span {
          color: $grey;
          font-weight: 600;
        }
      }

      .btn {
        margin-top: 40px;
      }
    }

    // SUBTOTAL
    .subtotal-compra {
      padding: 0.5rem 0 1rem 0;

      .costo-subtotal,
      .costo-descuento {
        margin-top: 0.5rem;
        p {
          font: {
            size: 14px;
            weight: 600;
          }
        }
      }
    }

    // TOTAL
    .total-compra {
      margin-top: $spacing;

      .costo-servicio,
      .total {
        display: flex;
        justify-content: space-between;

        p {
          font-size: 11px;
          margin: 0;
        }

        &.total {
          p {
            font: {
              size: 16px;
              weight: 700;
            }
          }
        }
      }
    }
  }

  .aside-footer {
    border-top: 1px solid #cde9f8;
    padding-top: 20px;
  }

  @media (min-width: $medium) {
    @include position(sticky, $right: 0, $top: 100px);

    .collapse {
      display: block;
    }
  }

  @media (max-width: $medium) {
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: $spacing * 2;
    @include position(fixed, $bottom: 0, $width: 100%, $height: auto, $left: 0);

    .aside-header {
      border: none;

      h3 {
        display: none;
      }

      h4,
      h4 span {
        font-size: 14px;
        margin: 0;
        line-height: 18px;
      }
    }

    .aside-content {
      min-height: auto;
      height: auto;
      overflow: visible;
      margin: 0;

      .aside-compra-item {
        margin-bottom: 0;

        p {
          line-height: 18px;
          font-weight: normal;
        }

        span {
          display: none;
        }
      }

      /*
      .aside-cantidad,
      .total-compra,
      .aside-sector,
      .aside-asientos,
      .aside-tarifa {
        display: none;
      }
      */
      .total-compra {
        margin-top: 0 !important;

        .costo-servicio {
          //display: none !important;
        }

        .total {
          margin: 0;

          p {
            font: {
              size: 14px;
              weight: 600;
            }
          }
        }
      }
    }

    .aside-footer {
      display: none;
    }

    &--sticky {
      position: sticky !important;
      width: 100% !important;

      .aside-content {
        display: block !important;
        padding: 0 !important;
        max-height: 100% !important;
        height: 100% !important;
        overflow-y: auto !important;
      }
    }
  }
}

.site-ventanilla {
  .aside-compra-item {
    margin-bottom: 20px;

    span {
      color: #aaaaaa;
      display: block;
      font-size: 13px;
    }

    p,
    p span {
      color: $grey;

      font: {
        size: 14px;
        weight: 600;
      }

      margin: 0;
    }

    .form-select {
      margin: 5px 0;
      max-width: 250px;

      span {
        color: $grey;
      }
    }
  }
}

// Mis compras - Detalle
.mi-cuenta {
  .detalle-panel {
    .aside-compra {
      .aside-content {
        li {
          margin-bottom: 0.25rem;
        }

        label {
          color: #000000 !important;
          font-size: 11px;
          letter-spacing: 0.5px !important;
          font-weight: 400 !important;
        }
      }
    }
  }

  .aside-descarga {
    li {
      text-transform: none !important;
    }
  }
}

@media only screen and (min-width: $medium) {
  .mi-cuenta {
    .detalle-panel {
      .aside-compra {
        position: static !important;
        .verDetalle {
          display: none;
        }
        .collapseDetalle {
          display: block;
        }
      }
      h3.mt-5 {
        margin-top: 1rem !important;
      }
    }
  }
}

@media only screen and (max-width: $medium) {
  .verDetalle {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    i {
      &::before {
      font-size: 20px;
      }
    }
  }
  .step-last {
    .aside-compra {
      // Altura del aside mobile
      padding-bottom: 30px;
      .collapseDetalle {
        display: none;
      }
    }
  }

  .nav-misdatos {
    flex-direction: column;
    .btn {
      max-width: 100%;
      width: 100%;
      margin-bottom: 0.5rem !important;
      margin-right: 0 !important;
    }
  }
}