Untitled

<investment-global-banner
  [minHeight]="208"
  [breadcrumbItems]="breadcrumbItems"
  [bannerType]="'investFlex'"
  title="Invest Flex"
  description="O Invest Flex é um serviço exclusivo que permite acessar novas
  oportunidade no mercado sem precisar resgatar suas aplicações. Com base no
  seu portfólio, o valor do Invest Flex é calculado e disponibilizado em
  tempo real."
>
</investment-global-banner>
<section class="invest-flex">
  <article class="invest-flex__content-detail">
    <h1 class="invest-flex__title">Detalhes do limite</h1>

    <div class="invest-flex__content-detail-item">
      <div class="invest-flex__content-detail-group">
        <h2 class="invest-flex__title invest-flex__title--size14">
          Invest Flex disponível para investir
        </h2>
        <div class="invest-flex__content-detail-item">
          <p
            class="invest-flex__text invest-flex__text--emphasis"
            *ngIf="accountCreditLimit"
          >
            {{ accountCreditLimit.creditLimit.available | currency : "R$" }}
          </p>
          <orq-shimmer
            *ngIf="!accountCreditLimit"
            type="text"
            size="large"
            [rows]="1"
            [loading]="true"
          >
          </orq-shimmer>
        </div>
      </div>

      <orq-divider
        class="invest-flex__divider-vertical"
        [verticalSize]="verticalSize"
        [size]="dividerSize.thin"
        [orientation]="dividerOrientation.vertical"
      ></orq-divider>

      <div class="invest-flex__content-detail-group">
        <h2 class="invest-flex__title invest-flex__title--size14">
          Bloqueios de Invest Flex
        </h2>
        <div class="invest-flex__content-detail-item item-direction-colunm">
          <p
            class="invest-flex__text invest-flex__text--emphasis"
            *ngIf="accountCreditLimit"
          >
            {{
              accountCreditLimit.creditLimit.blockedBalance | currency : "R$"
            }}
          </p>
          <orq-shimmer
            *ngIf="!accountCreditLimit"
            type="text"
            size="large"
            [rows]="1"
            [loading]="true"
          >
          </orq-shimmer>

          <p>
            <orq-link
              [size]="linkSize.small"
              [icon]="linkIcon.default"
              routerLink="bloqueios"
              *ngIf="
                accountCreditLimit &&
                accountCreditLimit.creditLimit.blockedBalance > 0
              "
            >
              Ver detalhes
            </orq-link>
          </p>
        </div>
      </div>
    </div>

    <h2 class="invest-flex__title invest-flex__title--size18">
      Juros e Encargos
    </h2>
    <p class="invest-flex__text invest-flex__text--margin-botton-24">
      Ao usar o Invest Flex, serão cobrados juros e encargos proporcionais ao
      período em que a conta ficar negativa.
    </p>

    <div class="invest-flex__content-detail-base">
      <h2 class="invest-flex__title invest-flex__title--size14">Juros:</h2>
      <p
        class="invest-flex__text invest-flex__text--emphasis"
        *ngIf="accountCreditLimit"
      >
        {{ accountCreditLimit.interestRate.interestRate }}% ao mês + IOF
      </p>
      <orq-shimmer
        *ngIf="!accountCreditLimit"
        type="text"
        size="large"
        [rows]="1"
        [loading]="true"
      >
      </orq-shimmer>
    </div>

    <div class="invest-flex__content-detail-base">
      <h2 class="invest-flex__title invest-flex__title--size14">
        Custo efetivo total:
      </h2>
      <p
        class="invest-flex__text invest-flex__text--emphasis"
        *ngIf="accountCreditLimit"
      >
        {{ accountCreditLimit.interestRate.totalEffectiveCosts }}%
      </p>
      <orq-shimmer
        *ngIf="!accountCreditLimit"
        type="text"
        size="large"
        [rows]="1"
        [loading]="true"
      >
      </orq-shimmer>
    </div>
  </article>

  <article class="invest-flex__content-info">
    <h2 class="invest-flex__title">O que é?</h2>
    <p class="invest-flex__text invest-flex__text--margin-botton-24">
      O Invest Flex é um serviço exclusivo do BTG Pactual, ele permite que você
      negocie diversos ativos, mesmo sem ter saldo disponível em conta.
    </p>
    <p class="invest-flex__text">
      Assim, você pode aumentar a sua exposição, sem necessariamente aumentar os
      recursos aplicados, gerando uma alavancagem financeira que pode
      impulsionar a rentabilidade dos seus investimentos.
    </p>

    <orq-divider class="invest-flex__divider"></orq-divider>

    <div class="invest-flex__content-info-group">
      <div class="invest-flex__content-info-group-item">
        <h2 class="invest-flex__title">Como funciona?</h2>
        <p class="invest-flex__text">
          Com base no seu portfólio, o valor do Invest Flex é calculado e
          disponibilizado em tempo real, por meio do seu portal e do Home
          Broker. É habilitado automaticamente no momento em que usa o serviço
          para fazer seu investimento.
        </p>
      </div>
      <div class="invest-flex__content-info-group-item">
        <h2 class="invest-flex__title">Como habilitar?</h2>
        <p class="invest-flex__text">
          Não se preocupe! É muito simples ativar o Invest Flex. Você habilita
          automaticamente no momento em que usa o serviço para fazer seu
          investimento.
        </p>
      </div>
    </div>

    <orq-divider class="invest-flex__divider"></orq-divider>

    <h2 class="invest-flex__title">Como utilizar?</h2>
    <p class="invest-flex__text">
      Após a adesão, o saldo Invest Flex fica disponível automaticamente na
      conta, e já é possível operar os ativos permitidos. Para alguns ativos,
      como Fundos de investimento, por exemplo, será necessário optar pela
      utilização do Invest Flex no momento da aplicação.
    </p>

    <orq-divider class="invest-flex__divider"></orq-divider>

    <h2 class="invest-flex__title">Quais são os ativos permitidos?</h2>
    <p class="invest-flex__text invest-flex__text--margin-botton-24">
      É possível utilizar o Invest Flex para operar os seguintes ativos:
    </p>
    <ul class="invest-flex__content-info-item">
      <li class="invest-flex__text">Ações</li>
      <li class="invest-flex__text">Opções</li>
      <li class="invest-flex__text">ETF’s</li>
      <li class="invest-flex__text">Contratos Futuros</li>
      <li class="invest-flex__text">Fundos Imobiliários</li>
      <li class="invest-flex__text">Ofertas Públicas</li>
      <li class="invest-flex__text">Subscrições</li>
      <li class="invest-flex__text">Outros ativos negociados na B3</li>
      <li class="invest-flex__text">Câmbio</li>
      <li class="invest-flex__text">Renda Fixa</li>
      <li class="invest-flex__text">Fundos de Investimentos*</li>
    </ul>
    <p class="invest-flex__text obs">
      *Essa classe de ativos não está contemplada no contrato. É necessário
      assinar o termo de adesão do Invest Flex no momento da aplicação.
    </p>

    <orq-divider class="invest-flex__divider"></orq-divider>

    <h2 class="invest-flex__title">O que é a Razão de Enquadramento?</h2>
    <p class="invest-flex__text invest-flex__text--margin-botton-24">
      A Razão de Enquadramento é a relação entre sua margem de garantia e sua
      exposição. Você está enquandrado quando para cada R$ 1,00 de exposição,
      você possui R$ 1,00 de garantias ou mais.
    </p>
    <p class="invest-flex__text">
      Quando a sua Razão de Enquadramento for igual ou menor a 5%, você estará
      desenquadrado, assim poderá ter sua posição liquidada (Execução Forçada).
    </p>
  </article>
</section>
<section class="invest-flex__actions">
  <orq-button
    [type]="buttonType.button"
    [appearance]="buttonAppearence.line"
    [size]="buttonSize.medium"
    ($click)="back()"
  >
    Voltar
  </orq-button>
</section>


@import '@btgclient-web/orquestra/sass/tokens-typography';
@import '@btgclient-web/orquestra/sass/tokens-spacing';

.invest-flex {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;

  &__title {
    color: var(--emphasis-base-high);
    font-size: $fontsize-18;
    font-weight: $fontweight-regular;
    line-height: $lineheight-medium;
    margin-bottom: 8px;

    &--size18 {
      font-size: $fontsize-18;
    }

    &--size14 {
      color: var(--emphasis-base-medium);
      font-size: $fontsize-14;
    }
  }

  &__text {
    color: var(--emphasis-base-medium);
    font-size: $fontsize-16;
    font-weight: $fontweight-regular;
    line-height: $lineheight-medium;
    text-align: justify;

    &--emphasis {
      color: var(--emphasis-base-high);
    }

    &--margin-botton-24 {
      margin-bottom: 24px;
    }
  }

  &__content-detail {
    display: flex;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-top: -32px;
    padding: 24px;
    border: 1px solid var(--outline);
    border-radius: 4px;
    background: var(--neutral-state-enabled);

    &-item {
      display: flex;
      flex-flow: row wrap;
      gap: 56px;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;

      @media screen and (max-width: 840px) {
        gap: 16px;
      }
    }

    .item-direction-colunm {
      flex-direction: column;
      gap: 24px;
    }

    &-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 344px;
    }

    &-base {
      display: flex;
      align-items: baseline;
      gap: 8px;
      min-width: 200px;
      white-space: nowrap;
    }
  }

  &__content-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 24px;
    border: 1px solid var(--outline);
    border-radius: 4px;
    background: var(--neutral-state-enabled);

    &-item {
      display: grid;
      grid-template-columns: 33% 33%;
      gap: 8px;
      align-items: baseline;
      width: 100%;
      list-style-type: '• ';

      @media screen and (max-width: 700px) {
        grid-template-columns: 100%;
      }

      @media screen and (max-width: 900px) and (min-width: 701px) {
        grid-template-columns: 50% 50%;
      }
    }

    &-group {
      display: flex;
      flex-flow: row wrap;
      gap: 48px;

      &-item {
        display: flex;
        flex: 0 0 47%;
        flex-direction: column;
        gap: 8px;

        @media screen and (max-width: 680px) {
          flex: 100%;
        }
      }
    }
  }

  &__divider {
    width: 100%;
    margin-bottom: 32px;
    margin-top: 32px;

    &-vertical {
      width: 10px;
    }
  }

  &__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    margin-top: 48px;
  }
}