/* style.css atualizado */

body {
    background: #f7f7f7;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

.topo-cards {
    display: flex;
    justify-content: space-around;
    gap: 6px;
    margin: 14px 4px 0 4px;
    flex-wrap: wrap;
}

.topo-cards.compacto .card {
    flex: 1 1 20%;
    min-width: 90px;
    max-width: 105px;
    border-radius: 9px;
    padding: 4px 1px 4px 2px;
    box-shadow: 0 0 7px #ccc4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 13px;
    margin: 2px 2px;
}

.card span { font-size: 11px; color: #4b4b4b; }
.card b { font-size: 16px; font-weight: bold; margin-top: 4px; }

.saldo            { background: #dafbe1; color: #2a8d41; }
.receita          { background: #e4f5ff; color: #227ca3; }
.saida            { background: #fff1e3; color: #e88c1d; }
.apagar           { background: #ffe4e4; color: #d43d3d; }
#.saldo-acumulado  { background: #dce7ff; color: #2a3f87; }
.usuarios-cadastrados { background: #fff0b3; color: #ba8c00; }

.botoes-menu {
    display: flex;
    justify-content: space-between;
    margin: 13px 8px 8px 8px;
    gap: 5px;
}

.btn-menu {
    flex: 1 1 32%;
    border: none;
    border-radius: 8px;
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    background: #ededed;
    color: #444;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
    margin: 0 2px;
}

.entrada   { background: #b7f2ce; color: #156f3a; }
.saida     { background: #ffd4d4; color: #a82323; }
.categorias{ background: #ffe8cc; color: #b36d29; }

.btn-menu:active { filter: brightness(0.95); }

.historico-mov {
    background: #fff;
    border-radius: 10px;
    margin: 10px 8px 30px 8px;
    padding: 14px 10px 10px 10px;
    box-shadow: 0 1px 8px #0001;
}

.historico-mov h3 {
    font-size: 15px;
    margin: 0 0 9px 0;
    color: #434343;
}

.item-mov {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
    padding: 4px 0;
    font-size: 13px;
    gap: 9px;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.item-mov:last-child { border-bottom: none; }
.item-mov .data { min-width: 68px; color: #a8a8a8; font-size: 11px; }
.item-mov .desc { min-width: 70px; flex: 1; }
.item-mov .categoria { background: #eee; border-radius: 5px; padding: 1px 8px; font-size: 11px; margin-left: 4px; color: #555;}
.item-mov .entrada { color: #2ea04b; }
.item-mov .saida { color: #e34b4b; }
.item-mov .btn-apagar { color: #e53935; margin-left: 5px; font-size: 16px; text-decoration: none; }
.item-mov .btn-apagar:active { filter: brightness(0.7); }
.item-mov .btn-pagar { color: #22b984; margin-left: 5px; font-size: 16px; text-decoration: none; }
.pago-ok { font-weight: bold; }

.form-bloco {
    background: #fff;
    border-radius: 10px;
    margin: 25px auto;
    padding: 18px 15px 18px 15px;
    box-shadow: 0 1px 8px #0001;
    max-width: 340px;
}
.form-bloco h2 { margin-top: 0; font-size: 18px; color: #25a07d; }

.form-bloco input, .form-bloco select {
    width: 100%;
    padding: 7px 8px;
    margin: 6px 0 12px 0;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.btn-salvar {
    width: 100%;
    border: none;
    border-radius: 7px;
    padding: 11px 0;
    font-size: 15px;
    font-weight: bold;
    background: #25a07d;
    color: #fff;
    margin-bottom: 10px;
    transition: background 0.18s;
}
.btn-salvar.azul    { background: #5bbcf6; }
.btn-salvar.verde   { background: #22b984; }
.btn-salvar.vermelho{ background: #e2592c; }
.btn-salvar:active { filter: brightness(0.92); }

.btn-voltar {
    display: inline-block;
    margin: 7px 0 0 0;
    color: #3d7fc1;
    text-decoration: none;
    font-size: 15px;
    background: none;
    border: none;
    padding: 0;
}
.btn-voltar:active { color: #26537c; }

.lista-categorias { list-style: none; padding-left: 0; }
.lista-categorias li { padding: 7px 2px; border-bottom: 1px solid #ececec; font-size: 15px; color: #505050;}
.lista-categorias li:last-child { border-bottom: none; }
.cat-padrao { font-size: 11px; background: #fff0b3; color: #ba8c00; border-radius: 5px; padding: 1px 7px; margin-left: 7px; }

.btn-toggle-valores, .btn-exportar-pdf {
    margin: 10px 5px;
    padding: 7px 14px;
    font-weight: bold;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    background-color: #25a07d;
    color: white;
    transition: background-color 0.2s ease;
}
.btn-toggle-valores:hover, .btn-exportar-pdf:hover {
    background-color: #1e7c5a;
}

/* Ocultar valores quando ativado */
.valores-ocultos .card b,
.valores-ocultos .item-mov .entrada,
.valores-ocultos .item-mov .saida {
    color: transparent !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.1);
    user-select: none;
}

/* Foto de perfil redonda */
.foto-perfil {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 6px #0002;
    cursor: pointer;
}

@media (max-width: 430px) {
    .topo-cards { flex-wrap: wrap; }
    .topo-cards.compacto .card { min-width: 45vw; max-width: none; }
    .botoes-menu { flex-direction: column; gap: 7px;}
    .form-bloco { max-width: 98vw; }
}
/* ===== Toolbar do painel (limpa, responsiva) ===== */
.toolbar {
  display: grid;
  gap: 14px;
  margin: 16px 0 22px;
}

.toolbar .row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

/* Card dos filtros */
.filters-card {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  display: grid;
  gap: 10px;
}

.filters-card .fields {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 10px;
}
@media (max-width: 1000px) {
  .filters-card .fields { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .filters-card .fields { grid-template-columns: repeat(2, 1fr); }
}

/* Inputs/Selects */
.filters-card input[type="date"],
.filters-card input[type="month"],
.filters-card select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d7d7d7;
  border-radius: 10px;
  font-size: 14px;
  background: #fbfbfb;
}

/* Botões pílula */
.btn-pill {
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: transform .05s ease, opacity .15s ease;
}
.btn-pill:active { transform: translateY(1px); }

.btn-green   { background:#22b984; color:#fff; }
.btn-orange  { background:#e2592c; color:#fff; }
.btn-blue    { background:#5bbcf6; color:#fff; }
.btn-outline { background:#fff; color:#25a07d; border:2px solid #25a07d; }
.btn-outline:hover { background:#25a07d; color:#fff; }

.btn-dark    { background:#334155; color:#fff; }
.btn-primary { background:#3b82f6; color:#fff; }
.btn-success { background:#16a34a; color:#fff; }
.btn-info    { background:#0ea5e9; color:#fff; }

/* Barra de exportação */
.export-card {
  background:#fff;
  border-radius:12px;
  padding:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

/* separadores finos */
.toolbar .divider {
  height: 1px;
  background: #eaeaea;
  margin: 2px 0 6px;
}
<style>
  .resumo {
    font-size: 16px;
    line-height: 1.8;
  }

  .texto-verde {
    color: green;
    font-weight: bold;
  }

  .texto-vermelho {
    color: red;
    font-weight: bold;
  }
</style>