/*
=========================================================
ARQUIVO: componentes-app.css
Este arquivo contém estilos específicos do sistema.
Aqui ficam os componentes próprios da aplicação,
que não fazem parte do Bootstrap. 
*/

/*
=============== Barra título ==============
*/
.barra-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
}

.barra-titulo img {
    width: 24px;
    height: 24px;
}

.barra-titulo h1 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0;
}

/* Chrome, Edge, Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/*
===============INPUT ICON==============
*/
.input-icon {
    position: relative;
}

.input-icon svg {
    width: 20px;
    position: absolute;
    right: 10px;
    top: 36px;
}

.input-icon:focus-within svg {
  fill: var(--bs-primary);
}

.input-icon-no-label {
    position: relative;
}

.input-icon-no-label svg {
    width: 20px;
    position: absolute;
    right: 10px;
    top: 4px;
}

.input-icon-no-label:focus-within svg {
  fill: var(--bs-primary);
}

/*
===============TELA DE STATUS==============
*/
.icone-titulo-status svg {
    width: 80px;
    height: 80px;
    fill: var(--bs-success);;
    margin-bottom: 20px;
}

/*
=============== Menu inferior ==============
*/

.menu-inferior {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 84px;
  background-color: #ffffff;
  border-top: 1px solid var(--cor-borda);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 1030;
}

.menu-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--bs-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.menu-item .menu-icone {
  padding: 4px 20px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: all 0.2s ease;
}

.menu-item .menu-icone svg {
  width: 24px;
}

.menu-item .menu-texto {
  line-height: 1.1;
}

.menu-item.ativo svg {
  fill: #ffffff;
}

.menu-item.ativo .menu-icone {
  background-color: var(--cor-primaria);
  color: #ffffff;
  box-shadow: var(--sombra-pequena);
}

.menu-item.ativo .menu-texto {
  color: var(--cor-primaria);
}

.menu-item:not(.ativo):hover {
  color: var(--cor-primaria);
}

/*
=============== Dashboard ==============
*/

.cabecalho-dashboard {
    background: var(--cor-primaria);
    color: #ffffff;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    padding: 32px 24px;
}

.cabecalho-dashboard .foto-perfil .foto {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    overflow: hidden;
    margin-right: 12px;
}

.cabecalho-dashboard .foto-perfil .nome-perfil {
    margin-bottom: 0;
}

.box-notificacao {
  gap: 10px;
}

.cabecalho-dashboard .notificacao {
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, .2);
    border-radius: 100%;
    position: relative;
}

.cabecalho-dashboard .notificacao svg {
    width: 24px;
}

.cabecalho-dashboard .notificacao .notificacao-numero {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-danger);
    font-size: .875rem;
    border-radius: 100%;
}

.cabecalho-dashboard .esconder-valor {
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, .2);
    border-radius: 100%; 
}

.cabecalho-dashboard .esconder-valor svg {
    width: 24px;
}

.cabecalho-dashboard .saldo p {
    margin-bottom: 0;
    font-size: .875rem;
    color: #B3B8BF;
}

.cabecalho-dashboard .saldo .valor-saldo {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}

.conteudo-dashboard {
    padding: 24px 14px 108px 14px;
}

/* Últimas transações*/

.titulo2 {
  font-size: 1.25rem;
  font-weight: bold;
}

.item-lista-transacoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--cor-borda);
  padding: 16px 0;
}

.item-lista-transacoes .box-info-transacoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.item-lista-transacoes .box-info-transacoes .icone-transacao svg {
  width: 36px;
  height: 36px;
  padding: 6px;
  border: 1px solid #D1D8E2;
  border-radius: 100%;
}

.item-lista-transacoes .box-info-transacoes .texto-transacao h3 {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: bold;
}

.item-lista-transacoes .box-info-transacoes .texto-transacao .origem-destino-transacao {
  margin-bottom: 0;
  line-height: 150%;
  font-size: 14px;
  color: var(--bs-secondary);
}

.item-lista-transacoes .valor-data-transacao p {
  margin-bottom: 0;
  text-align: right;
  line-height: 150%;
  font-size: 14px;
  color: var(--bs-secondary);
}

.item-lista-transacoes .valor-data-transacao .valor-transacao {
  color: var(--cor-primaria);
  font-weight: bold;
}

.cartoes .cartao {
  width: 100%;
  height: 210px;
  background: #212121;
  border-radius: 12px;
  padding: 24px;
  color: #ffffff;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cartoes .cartao.cartao1 {
  background: #1F3382;
}

.cartoes .cartao.cartao2 {
  background: #370D50;
}

.cartoes .cartao.cartao3 {
  background: #0A4313;
}

.cartoes .cartao.cartao4 {
  background: #551A09;
}

.cartoes .cartao-logo-cliente {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 80px;
  height: 40px;
  overflow: hidden;
}

.cartoes .cartao .cartao-saldo {
  font-size: .875rem;
}

.cartoes .cartao .cartao-saldo .valor-saldo {
  font-size: 1.125rem;
  font-weight: bold;
  background: rgba(255, 255, 255, .2);
  padding: 8px 16px;
  border-radius: 8px;
  display: block;
  width: fit-content;
}

.cartoes .cartao .cartao-dados span {
  display: block;
}

/* Swiper */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    width: 90% !important;
}

.swiper-pagination {
    position: static !important;
    margin-top: 8px;
    text-align: center;
}

.swiper-pagination-bullet {
    background: var(--bs-secondary);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: var(--bs-primary);
}

/* Transações */

.lista-transacoes .mes{
  margin-bottom: 32px;
}

.lista-transacoes .dia{
  margin-bottom: 20px;
}

.lista-transacoes .dia .titulo-dia{
  font-size: .875rem;
  font-weight: bold;
  border-bottom: 2px solid var(--cor-secundaria);
  padding: 8px 0;
  margin-bottom: 0px;
}

.btn-principal-style {
    background: var(--cor-bt-primaria);
    color: var(--cor-bt-font-primaria);
}

    .btn-principal-style:hover {
        background: var(--cor-bt-primaria) !important;
        color: var(--cor-bt-font-primaria) !important;
        
    }