/* ==========================================================================
   BuuPi — ecrãs internos da aplicação
   Carregado a seguir ao style.css, que define as variáveis de cor.
   ========================================================================== */

:root{
  --bom:#2f6b57;
  --mau:#9e3b3b;
  --atencao:#b07d1f;
  --altura-abas:64px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bom:#6cc0a0;
    --mau:#f0a3a0;
    --atencao:#d9ae55;
  }
}

/* ------------------------------------------------------------- estrutura */

.ecra--app{display:flex;flex-direction:column;height:100svh;overflow:hidden;padding:0}

.topo{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
  padding:calc(12px + env(safe-area-inset-top,0)) 16px 12px;
  background:var(--superficie);
  border-bottom:1px solid var(--linha);
}
.topo__texto{flex:1;min-width:0}
.topo h1{font-size:19px;margin:0;letter-spacing:-.01em;line-height:1.25}
.topo__voltar,.topo__accao{
  flex:none;
  background:none;
  border:0;
  color:var(--tinta);
  font-size:20px;
  cursor:pointer;
  width:40px;height:40px;
  border-radius:10px;
}
.topo__voltar{font-size:26px;line-height:1}
.topo__voltar:hover,.topo__accao:hover{background:var(--fundo)}

.conteudo{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:16px 16px calc(24px + var(--altura-abas) + env(safe-area-inset-bottom,0));
  text-align:left;
}

.seccao{margin:0 0 22px}
.seccao__topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.conteudo h2{font-size:16px;margin:0 0 10px}
.conteudo h3{font-size:14px;margin:18px 0 8px;color:var(--tinta-suave)}
.conteudo > .cartao{max-width:none;margin-bottom:16px}

.a-carregar{padding:40px 0;text-align:center;color:var(--tinta-suave)}
.vazio{padding:28px 18px;text-align:center}
.accoes{display:flex;flex-direction:column;gap:8px;margin:16px 0}

/* --------------------------------------------------------- barra de abas */

.barra-abas{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:5;
  display:flex;
  background:var(--superficie);
  border-top:1px solid var(--linha);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.aba{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:9px 4px;
  background:none;border:0;cursor:pointer;
  color:var(--tinta-suave);
  font:inherit;font-size:11px;
  min-height:var(--altura-abas);
}
.aba__icone{font-size:20px;line-height:1.1}
.aba--ativa{color:var(--acento);font-weight:600}

/* ------------------------------------------------------------------ números */

.numero-grande{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.numero-medio{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.tom--bom{color:var(--bom)}
.tom--mau{color:var(--mau)}
.tom--aviso{color:var(--atencao)}

.tres-colunas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.coluna{min-width:0}
.previsao-resumo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}

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

.linha{
  width:100%;
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border:0;border-bottom:1px solid var(--linha);
  background:none;
  font:inherit;color:inherit;text-align:left;
}
.linha:last-child{border-bottom:0}
.linha--clicavel{cursor:pointer}
.linha--clicavel:active{background:var(--fundo)}
.linha--coluna{flex-direction:column;align-items:stretch;gap:6px}
.linha__icone{flex:none;width:26px;font-size:18px;text-align:center}
.linha__texto{flex:1;min-width:0}
.linha__titulo{font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.linha__valor{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.linha__cima{display:flex;justify-content:space-between;gap:10px;font-size:14px}

.dia-cabecalho{
  display:flex;justify-content:space-between;
  padding:16px 2px 6px;
  font-size:13px;font-weight:600;color:var(--tinta-suave);
}

/* ------------------------------------------------------------------- barras */

.barra{height:6px;border-radius:99px;background:var(--linha);overflow:hidden}
.barra__cheio{height:100%;border-radius:99px;transition:width .3s}
.barra__cheio--bom{background:var(--acento)}
.barra__cheio--atencao{background:var(--atencao)}
.barra__cheio--mau{background:var(--mau)}

/* ------------------------------------------------------------------ filtros */

.filtros{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;-webkit-overflow-scrolling:touch}
.filtros--sub{
  flex:none;padding:10px 16px;margin:0;justify-content:center;
  background:var(--superficie);border-bottom:1px solid var(--linha);
}
.filtro{
  flex:none;
  padding:7px 14px;border-radius:99px;
  border:1px solid var(--linha);background:var(--superficie);
  color:var(--tinta-suave);font:inherit;font-size:13.5px;cursor:pointer;
}
.filtro--ativo{background:var(--acento);color:var(--acento-tinta);border-color:transparent;font-weight:600}

.navegador-mes{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.navegador-mes__nome{font-weight:600}
.navegador-mes .botao{width:auto;margin:0;padding:6px 14px;font-size:20px}

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

.alerta{margin-top:14px;padding:11px 14px;border-radius:10px;font-size:14px;background:var(--acento-fundo);color:var(--acento)}
.alerta--mau{background:var(--erro-fundo);color:var(--erro)}

.aviso-inline{
  display:block;width:100%;margin-top:12px;
  padding:9px 12px;border-radius:9px;border:0;
  background:var(--aviso-fundo);color:var(--tinta);
  font:inherit;font-size:13.5px;text-align:left;cursor:pointer;
}

.etiqueta--aviso{background:var(--aviso-fundo);color:var(--atencao)}
.etiqueta--mau{background:var(--erro-fundo);color:var(--erro)}
.ponto{width:8px;height:8px;border-radius:50%;background:var(--acento);flex:none}

.ligacao{background:none;border:0;color:var(--acento);font:inherit;font-size:13.5px;cursor:pointer;padding:0}

/* ---------------------------------------------------------------- torradas */

.torrada{
  position:fixed;
  left:50%;transform:translateX(-50%);
  bottom:calc(var(--altura-abas) + 16px + env(safe-area-inset-bottom,0));
  z-index:60;
  max-width:min(420px,calc(100vw - 32px));
  padding:12px 18px;border-radius:11px;
  background:var(--tinta);color:var(--fundo);
  font-size:14px;text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
}
.torrada--erro{background:var(--mau);color:#fff}

/* ------------------------------------------------------------------- modal */

.modal{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.45);
}
.modal__caixa{
  width:100%;max-width:520px;max-height:92svh;
  display:flex;flex-direction:column;
  background:var(--superficie);
  border-radius:18px 18px 0 0;
  text-align:left;
}
.modal__topo{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px 12px;border-bottom:1px solid var(--linha);
}
.modal__topo h2{margin:0;font-size:17px}
.modal__x{background:none;border:0;font-size:26px;line-height:1;color:var(--tinta-suave);cursor:pointer;width:36px;height:36px}
.modal__corpo{
  overflow-y:auto;
  padding:16px 18px calc(22px + env(safe-area-inset-bottom,0));
}
.modal__corpo hr{margin:20px 0 12px}

@media (min-width:560px){
  .modal{align-items:center}
  .modal__caixa{border-radius:18px}
}

/* -------------------------------------------------------------- formulários */

.campo{margin-bottom:14px}
.campo label{margin-top:0}

textarea,select,
input[type=date],input[type=number]{
  width:100%;font:inherit;font-size:16px;
  color:var(--tinta);background:var(--fundo);
  border:1px solid var(--linha);border-radius:10px;
  padding:11px 13px;
}
textarea{resize:vertical;min-height:70px}
select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:1px;border-color:transparent}

.entrada-dinheiro{font-size:24px !important;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

.caixa{display:flex;align-items:center;gap:10px;margin:12px 0;font-weight:400;color:var(--tinta);font-size:14.5px}
.caixa input{width:20px;height:20px;flex:none;accent-color:var(--acento)}

.alternador{display:flex;gap:6px;background:var(--fundo);padding:4px;border-radius:11px;margin-bottom:14px}
.alternador__opcao{
  flex:1;padding:9px;border:0;border-radius:8px;
  background:none;color:var(--tinta-suave);font:inherit;font-weight:600;cursor:pointer;
}
.alternador__opcao--ativa{background:var(--superficie);color:var(--tinta);box-shadow:0 1px 3px rgba(0,0,0,.1)}

.botao--perigo{color:var(--mau);border-color:transparent}
.botao--perigo:hover{border-color:var(--mau)}

/* --------------------------------------------------------------- flutuante */

.flutuante{
  position:fixed;right:18px;
  bottom:calc(var(--altura-abas) + 18px + env(safe-area-inset-bottom,0));
  z-index:6;
  width:54px;height:54px;border-radius:50%;
  border:0;background:var(--acento);color:var(--acento-tinta);
  font-size:28px;line-height:1;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.24);
}

/* ------------------------------------------------------------------- partes */

.partes{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.parte{display:flex;flex-direction:column;gap:7px;padding:12px;border:1px solid var(--linha);border-radius:12px}
.parte__cima{display:flex;gap:8px;align-items:center}
.parte__cima .entrada-dinheiro{flex:1}
.parte__cima .botao{width:auto;margin:0;padding:6px 12px;font-size:20px}

/* -------------------------------------------------------------------- notas */

.notas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.nota{
  position:relative;text-align:left;
  padding:14px;border:1px solid var(--linha);border-radius:14px;
  background:var(--superficie);color:inherit;font:inherit;cursor:pointer;
}
.nota--fixada{border-color:var(--acento)}
.nota__pin{position:absolute;top:8px;right:10px;font-size:13px}
.nota__titulo{font-weight:600;font-size:14.5px;margin-bottom:5px;padding-right:18px}
.nota__corpo{font-size:13px;color:var(--tinta-suave);line-height:1.45;margin-bottom:7px;white-space:pre-wrap;overflow-wrap:anywhere}

/* ----------------------------------------------------------------- gráfico */

.grafico{width:100%;height:auto;display:block}
.grafico__linha{fill:none;stroke:var(--acento);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.grafico__area{fill:var(--acento);opacity:.12}
.grafico__zero{stroke:var(--mau);stroke-width:1;stroke-dasharray:3 3;opacity:.6}
.grafico__rotulo{fill:var(--tinta-suave);font-size:8px;font-family:inherit}