/* Boi Na Conta - visual do aplicativo (verde dinheiro) */

:root{
  --fundo:#F4F7F5;
  --carta:#FFFFFF;
  --carta-2:#F0F4F1;
  --borda:#E2E8E4;
  --borda-2:#CFD9D3;
  --texto:#0E1A14;
  --apagado:#6B7A72;
  --verde:#059669;
  --verde-2:#047857;
  --verde-3:#065F46;
  --verde-luz:#ECFDF5;
  --entra:#059669;
  --sai:#DC2626;
  --raio:16px;
  --raio-g:20px;
  --sombra:0 1px 2px rgba(14,26,20,.05), 0 8px 24px -16px rgba(14,26,20,.18);
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  background:var(--fundo);
  color:var(--texto);
  font-family:'Sora',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.5;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}

.oculto{display:none !important}

/* ---------- barra de cima ---------- */

.appbar{
  display:none;
  position:sticky; top:0; z-index:20;
  align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px calc(13px + env(safe-area-inset-top));
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borda);
}
.appbar-esq{display:flex; align-items:center; gap:11px; min-width:0}
.avatar{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(140deg,var(--verde),var(--verde-3));
  color:#fff; font-weight:700; font-size:14px; letter-spacing:.02em;
}
.appbar-ola{margin:0; font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.appbar-sub{margin:0; font-size:12px; color:var(--apagado)}
.icone-topo{
  width:38px; height:38px; flex:none; padding:0;
  border:1px solid var(--borda); border-radius:12px;
  background:var(--carta); color:var(--apagado); font-size:17px; cursor:pointer;
}
.icone-topo:hover{color:var(--verde); border-color:var(--verde)}

/* ---------- conteudo ---------- */

.conteudo{
  width:100%; max-width:480px;
  margin:0 auto;
  padding:18px 16px 24px;
}

.tela-auth{
  min-height:88dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding:18px 0;
}
.marca{text-align:center; margin-bottom:22px}
.marca-selo{
  width:66px; height:66px; margin:0 auto 12px;
  display:grid; place-items:center;
  font-size:32px;
  border-radius:20px;
  background:linear-gradient(145deg,var(--verde),var(--verde-3));
  box-shadow:0 12px 26px -12px rgba(5,150,105,.7);
}
.marca-nome{margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--verde-3)}
.marca-frase{margin:4px 0 0; font-size:13.5px; color:var(--apagado)}

/* ---------- cartoes ---------- */

.cartao{
  background:var(--carta);
  border:1px solid var(--borda);
  border-radius:var(--raio-g);
  padding:20px;
  margin-bottom:14px;
  box-shadow:var(--sombra);
}
.cartao h1{margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em}
.cartao h2{margin:0; font-size:16px; font-weight:600}
.secao{margin:0 0 2px !important}
.linha-titulo{display:flex; align-items:center; justify-content:space-between; gap:10px}
.etiqueta{
  font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--verde-2); background:var(--verde-luz);
  border-radius:999px; padding:4px 10px; font-weight:600;
}
.sub{margin:6px 0 0; color:var(--apagado); font-size:13.5px}
.rotulo{margin:0; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--apagado)}
.valor-grande{margin:8px 0 10px; font-size:26px; font-weight:700; font-family:'IBM Plex Mono',monospace}
.barra{height:7px; border-radius:99px; background:var(--carta-2); overflow:hidden}
.barra span{display:block; height:100%; width:38%; border-radius:99px; background:linear-gradient(90deg,var(--verde),var(--verde-3))}

/* cartao do saldo */
.cartao-saldo{
  position:relative; overflow:hidden;
  border-radius:24px;
  padding:22px 20px 20px;
  margin-bottom:16px;
  color:#fff;
  background:
    radial-gradient(360px 200px at 108% -30%, rgba(255,255,255,.28), transparent 62%),
    linear-gradient(145deg,#0AA575 0%,#059669 42%,#04624A 100%);
  box-shadow:0 18px 34px -20px rgba(4,120,87,.8);
}
.cartao-saldo .rotulo{color:rgba(255,255,255,.78)}
.saldo-topo{display:flex; align-items:center; justify-content:space-between}
.olho{
  width:34px; height:34px; padding:0;
  border:1px solid rgba(255,255,255,.35); border-radius:10px;
  background:rgba(255,255,255,.14); color:#fff; font-size:14px; cursor:pointer;
}
.saldo{
  margin:10px 0 2px;
  font-family:'IBM Plex Mono',monospace;
  font-size:34px; font-weight:600; letter-spacing:-.02em;
  cursor:pointer; user-select:none;
}
.saldo-conta{margin:6px 0 0; font-size:13px; color:rgba(255,255,255,.8); font-family:'IBM Plex Mono',monospace}
.saldo-boi{
  position:absolute; right:-8px; bottom:-16px;
  font-size:92px; opacity:.16; pointer-events:none;
}

/* ---------- atalhos ---------- */

.acoes{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin-bottom:16px;
}
.acoes button{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 4px;
  background:var(--carta); border:1px solid var(--borda); border-radius:var(--raio);
  color:var(--texto); font-size:11.5px; font-weight:500; font-family:inherit;
  cursor:pointer; box-shadow:var(--sombra);
  transition:border-color .15s, transform .12s;
}
.acoes button:hover{border-color:var(--verde); transform:translateY(-1px)}
.acoes button em{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:50%; font-style:normal; font-size:17px;
  background:var(--verde-luz); color:var(--verde-2);
}

.atalhos{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.atalhos button{
  padding:9px 14px; border-radius:999px;
  background:var(--carta-2); border:1px solid var(--borda);
  color:var(--texto); font-size:13px; font-family:inherit; cursor:pointer;
}
.atalhos button:hover{background:var(--verde-luz); border-color:var(--verde); color:var(--verde-2)}

/* ---------- campos ---------- */

.campo{margin-top:14px}
.campo label{
  display:block; margin-bottom:6px;
  font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--apagado);
}
.campo input, .campo select{
  width:100%; padding:13px 14px;
  background:var(--carta); color:var(--texto);
  border:1px solid var(--borda-2); border-radius:13px;
  font-size:16px; font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.campo input::placeholder{color:#A3AFA8}
.campo input:focus, .campo select:focus{
  outline:none; border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(5,150,105,.16);
}
.campo-valor{font-family:'IBM Plex Mono',monospace; font-size:20px !important}
.campo-codigo{
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:10px; text-align:center; font-size:24px !important;
}
.dupla{display:flex; gap:10px}
.dupla .campo{flex:1; min-width:0}

/* ---------- botoes ---------- */

button{font-family:inherit}

.cartao > button, .tela-auth button, .conteudo > section > button{
  width:100%; margin-top:16px; padding:15px;
  border:0; border-radius:14px; cursor:pointer;
  background:linear-gradient(95deg,var(--verde),var(--verde-2));
  color:#fff; font-size:16px; font-weight:700; font-family:inherit;
  box-shadow:0 10px 20px -12px rgba(4,120,87,.9);
  transition:filter .15s, transform .12s;
}
.cartao > button:hover, .conteudo > section > button:hover{filter:brightness(1.06)}
.cartao > button:active, .conteudo > section > button:active{transform:translateY(1px)}
.conteudo > section > button{margin-top:6px}
.conteudo > section > button + button{margin-top:10px}

.fantasma{
  background:var(--carta) !important;
  border:1px solid var(--borda-2) !important;
  color:var(--texto) !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
.fantasma:hover{border-color:var(--verde) !important; color:var(--verde-2) !important}

.perigo{
  background:var(--carta) !important;
  border:1px solid rgba(220,38,38,.35) !important;
  color:var(--sai) !important;
  font-weight:600 !important;
  box-shadow:none !important;
}

button:disabled{opacity:.55; cursor:not-allowed}

/* ---------- avisos ---------- */

.erro{
  margin:14px 0 0; padding:11px 13px;
  background:#FEF2F2; border:1px solid #FECACA;
  border-radius:12px; color:#B91C1C; font-size:13.5px;
}
.aviso-ok{
  margin:14px 0 0; padding:11px 13px;
  background:var(--verde-luz); border:1px solid #A7F3D0;
  border-radius:12px; color:var(--verde-3); font-size:13.5px;
}

/* ---------- destino ---------- */

.destino{
  margin-top:16px; padding:14px;
  border:1px solid #A7F3D0; border-radius:14px;
  background:var(--verde-luz);
}
.destino-nome{margin:6px 0 0; font-size:18px; font-weight:600; color:var(--verde-3)}

/* ---------- listas ---------- */

.linha-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--borda);
  cursor:pointer;
}
.linha-item:last-child{border-bottom:0}
.quem{font-size:14.5px; font-weight:500}
.quando{margin-top:2px; font-size:12px; color:var(--apagado)}
.detalhe{
  margin-top:8px; padding:9px 11px;
  background:var(--carta-2); border:1px solid var(--borda); border-radius:10px;
  font-size:12px; color:var(--apagado); word-break:break-all;
}
.valor-entrada{color:var(--entra); font-weight:700; font-family:'IBM Plex Mono',monospace; white-space:nowrap}
.valor-saida{color:var(--sai); font-weight:700; font-family:'IBM Plex Mono',monospace; white-space:nowrap}
.copia{
  margin-top:10px; padding:10px;
  background:var(--carta-2); border:1px solid var(--borda); border-radius:10px;
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; word-break:break-all; color:var(--apagado);
}
#cobranca-resultado img{
  display:block; margin:12px auto 0;
  border-radius:14px; background:#fff; padding:10px;
  border:1px solid var(--borda);
}
#perfil-dados p:first-child{font-weight:700; font-size:18px; margin:0}

.rodape{margin:20px 0 0; text-align:center; font-size:12px; color:#8A968F; line-height:1.7}

/* ---------- barra de baixo ---------- */

.navbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--borda);
}
.navbar button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 2px; background:none; border:0; cursor:pointer;
  color:#9AA69F; font-size:10.5px; font-family:inherit;
}
.navbar button em{font-style:normal; font-size:18px; line-height:1}
.navbar button:hover{color:var(--verde)}

body:has(#tela-inicio:not(.oculto)) .appbar,
body:has(#tela-transferir:not(.oculto)) .appbar,
body:has(#tela-pix:not(.oculto)) .appbar,
body:has(#tela-extrato:not(.oculto)) .appbar,
body:has(#tela-perfil:not(.oculto)) .appbar{display:flex}

body:has(#tela-inicio:not(.oculto)) .navbar,
body:has(#tela-transferir:not(.oculto)) .navbar,
body:has(#tela-pix:not(.oculto)) .navbar,
body:has(#tela-extrato:not(.oculto)) .navbar,
body:has(#tela-perfil:not(.oculto)) .navbar{display:flex}

body:has(.navbar) .conteudo{padding-bottom:96px}

body:has(#tela-inicio:not(.oculto)) .navbar button[data-t="inicio"],
body:has(#tela-transferir:not(.oculto)) .navbar button[data-t="transferir"],
body:has(#tela-pix:not(.oculto)) .navbar button[data-t="pix"],
body:has(#tela-extrato:not(.oculto)) .navbar button[data-t="extrato"],
body:has(#tela-perfil:not(.oculto)) .navbar button[data-t="perfil"]{color:var(--verde-2); font-weight:600}

.cartao .secao{margin:20px 0 2px !important}
.cartao > .secao:first-child{margin-top:0 !important}
.cartao h1 + .secao{margin-top:20px !important}

@media (min-width:560px){
  .saldo{font-size:38px}
}