:root {
  /* --cor-fundo: linear-gradient(135deg, #073e24 0%, #117048 100%); */
  --cor-fundo: #005e32;
  --background-caixa: rgba(110, 110, 110, 0.26);
  --background-modal: #073e24;
  --cor-borda: #117048;
  --box-modal: 1px 4px 8px rgba(255, 255, 255, 0.719);
  --box: 1px 2px 4px rgba(221, 221, 221, 0.719);
  --bac-botao: #7de24d;
  --cor-texto: #fff;
  --cor-text-valor: #bebebe;
  --cor-botao: #04301b;
  --cor-placeholder: #999;
  --cor-sombra: rgba(0, 0, 0, 0.15);
  --cor-card: rgba(0, 0, 0, 0.15);
}

body {
  font-family: "Poppins", Arial, sans-serif;
  background: var(--cor-fundo);
  margin: 0;
  padding: 0;
  color: var(--cor-texto);
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100dvh; */
  /* height: 100vh; */
}

body button{
  cursor: pointer;
}

/*login..................*/

.login-container {
  background: var(--background-caixa);
  border: 2px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: var(--box-modal);
  padding: 40px 15px;
  width: calc(92% - 30px);
  max-width: 400px;
  text-align: center;
  transition: all 0.3s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.login-container h1 {
  margin-bottom: 15px;
  font-size: 26px;
  color: var(--cor-texto);
}

.login-container h2 {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--cor-texto);
}

.login-container .form-group {
  position: relative;
  margin-bottom: 18px;
}

.login-container input {
  width: calc(100% - 17px);
  padding: 12px 0 12px 15px;
  border: 2px solid var(--cor-borda);
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: 0.2s;
}

.login-container input::placeholder {
  color: var(--cor-placeholder);
}

.login-container .toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #555;
  user-select: none;
}

.login-container button {
  width: 100%;
  background: var(--bac-botao);
  color: var(--cor-botao);
  font-size: 17px;
  font-weight: bold;
  border: none;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}

.login-container footer {
  margin-top: 25px;
  font-size: 13px;
  color: var(--cor-texto);
}

/* casa...............*/

.container_casa {
  max-width: 1000px;
  width: 100%;
  text-align: center;
  margin-bottom: 50px;
}

.container_casa h1 {
  color: var(--cor-titulo);
  margin-bottom: 10px;
  font-size: 17px;
}

.container_casa .gestor {
  font-size: 14px;
  margin-bottom: 20px;
  opacity: 0.8;
}

.container_casa .painel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 25px;
  padding: 0 14px;
}

.container_casa .card {
  background: var(--cor-card);
  border-radius: 8px;
  padding: 12px 0;
  box-shadow: var(--box);
}

.container_casa .card span {
  display: block;
  font-size: 13px;
  color: var(--cor-text-valor);
}

.container_casa .valor {
  font-weight: bold;
  font-size: 16px;
  margin-top: 5px;
}

.container_casa h2 {
  margin: 25px 0 15px;
  color: var(--cor-titulo);
  font-size: 15px;
}

.container_casa .botoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
  padding: 0 14px 14px 14px;
  border-bottom: solid 2px #afafaf;
}

.container_casa a.btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  box-shadow: var(--box);
  cursor: pointer;
  transition: 0.2s;
  background: #000;
  color: #fff;
}

.container_casa .btn:active {
  background: #bcdcff;
  color: #000;
}

.container_casa .btn-verde:hover {
  background: #1f6e46;
}

.container_casa .btn.btn-vermelho {
  background: #e63946;
  color: #fff;
}

.container_casa .btn-vermelho:hover {
  background: #c62828;
}

/* ======== MODAL ======== */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.modal .modal-conteudo {
  background: var(--background-modal);
  border: 2px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: var(---box-modal);
  padding: 20px 12px;
  width: calc(94% - 30px);
  max-width: 500px;
  text-align: left;
  animation: abrir 0.3s ease;
}

@keyframes abrir {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal .modal-conteudo h3 {
  text-align: center;
  margin-top: 0;
  color: var(--cor-texto);
}

.modal .modal-conteudo label {
  font-size: 14px;
  display: block;
  margin-top: 10px;
}

.modal .modal-conteudo input {
  width: calc(100% - 17px);
  margin-top: 2px;
  border: 1px solid #ccc;
  padding: 12px 0 12px 15px;
  border: 2px solid var(--cor-borda);
  border-radius: 8px;
  font-size: 15px;
}
.modal .modal-conteudo .flex_olho{
  display: flex;
  align-items: center;
  position: relative;
}
.modal .modal-conteudo .flex_olho svg{
 position: absolute;
 right: 10px;
 cursor: pointer;
}


.modal .modal-conteudo .acoes {
  text-align: center;
  margin-top: 20px;
}

.modal .modal-conteudo button {
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: bold;
  margin: 0 10px;
  cursor: pointer;
}

.modal .modal-conteudo .btn-salvar {
  background: #000;
  border-radius: 8px;
  color: #fff;
}
.modal .modal-conteudo .btn-salvar:active {
  background: #333333;
  border-radius: 8px;
  color: #fff;
}
.modal .modal-conteudo .btn-cancelar{
 background: #e63946;
  color: #fff;
}

.modal .modal-conteudo .btn-cancelar:active {
  background: #c62828;
}


/* listar.................*/


.container_list {
  width: 100%;
  max-width: 600px;
  text-align: center;
}
.container_list .cimaaa{
  width: 100%;
  max-width: 600px;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  padding-top: 10px;
  background: var(--cor-fundo);
  z-index: 2;
}

.container_list .baixoo{
  margin-top: 160px;
  margin-bottom: 40px;
  padding: 0 10px;
}

.container_list h1 {
  font-size: 14px;
  margin: 0 0 20px 0;
}

.container_list .top-info {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.container_list .info-box {
  background: var(--background-modal);
  box-shadow: var(--box);
  border-radius: 8px;
  width: 45%;
  box-sizing: border-box;
}

.container_list .card {
  width: 45%;
  background: var(--cor-card);
  border-radius: 8px;
  padding: 7px 0;
  box-shadow: var(--box);
}
.container_list .card span {
  display: block;
  font-size: 13px;
  color: var(--cor-text-valor);
}
.container_list .card .valor {
  font-weight: bold;
  font-size: 16px;
  margin-top: 3px;
}


.container_list .search-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 6px;
}

.container_list .search-bar input {
  width: 49%;
  padding: 6px;
  border: 1px solid var(--cor-borda);
  border-radius: 5px;
}

.container_list .search-bar button {
 background: #000;
  color: white;
  padding: 4px 0;
  width: 19%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container_list .search-bar button:active {
  background: #222222;
}

.container_list .deposit-item {
  background: #073e24;
  border: 1px solid #7de24d;
  border-radius: 8px;
  padding: 8px 4px;
  margin-top: 10px;
  text-align: left;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container_list .deposit-item .p2 {
  color: var(--cor-text-valor);
  font-size: 13px;
}

.container_list .deposit-item p {
  margin: 0;
  padding: 0;
}
.container_list .deposit-item button{
  background: #000;
  color: white;
  font-size: 15px;
  font-weight: bold;
  border-radius: 5px;
  padding: 8px;
}

.container_list .deposit-item a:hover {
  background: var(--cor-botao-hover);
}