:root {
  --verde: #0b8a3e;
  --verde-esc: #076a2f;
  --verde-claro: #12a04a;
  --vermelho: #d92d20;
  --vermelho-bg: #fdecea;
  --verde-bg: #e7f6ee;
  --amarelo: #f4b400;
  --cinza: #6b7280;
  --cinza-claro: #f3f4f6;
  --borda: #e5e7eb;
  --texto: #1f2430;
  --bg: #f5f7f8;
  --sombra: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --raio: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 60px;
}

/* ===== Topo ===== */
.topo {
  background: linear-gradient(135deg, var(--verde) 0%, var(--verde-esc) 100%);
  color: #fff;
  box-shadow: var(--sombra);
  position: sticky; top: 0; z-index: 20;
}
.topo-inner {
  max-width: 1080px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 12px; }
.marca .bola { font-size: 34px; line-height: 1; }
.marca h1 { font-size: 20px; font-weight: 700; letter-spacing: .2px; }
.marca p { font-size: 12.5px; opacity: .85; }

.mes-seletor { display: flex; align-items: center; gap: 6px; }
.mes-seletor input[type=month] {
  border: none; border-radius: 10px; padding: 8px 10px; font-size: 14px;
  background: rgba(255,255,255,.16); color: #fff; font-weight: 600;
}
.mes-seletor input[type=month]::-webkit-calendar-picker-indicator { filter: invert(1); }
.mes-btn {
  width: 34px; height: 34px; border: none; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 20px; line-height: 1;
}
.mes-btn:hover { background: rgba(255,255,255,.28); }

.abas {
  max-width: 1080px; margin: 0 auto; padding: 0 12px;
  display: flex; gap: 4px; overflow-x: auto;
}
.aba {
  border: none; background: transparent; color: rgba(255,255,255,.8);
  padding: 12px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.aba:hover { color: #fff; }
.aba.ativa { color: #fff; border-bottom-color: var(--amarelo); }

/* ===== Layout ===== */
main { max-width: 1080px; margin: 0 auto; padding: 22px 20px; }
.painel { display: none; }
.painel.ativo { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px);} to {opacity:1; transform:none;} }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

/* ===== Cards ===== */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width: 800px) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  background: #fff; border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--borda);
}
.card.destaque { background: linear-gradient(135deg, var(--verde) 0%, var(--verde-esc) 100%); border: none; color: #fff; }
.card.destaque .card-label, .card.destaque .card-sub { color: rgba(255,255,255,.85); }
.card-label { font-size: 12.5px; color: var(--cinza); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.card-valor { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.card-valor.verde { color: var(--verde); }
.card-valor.vermelho { color: var(--vermelho); }
.card-sub { font-size: 12px; color: var(--cinza); }

/* ===== Hero Caixa (dashboard) ===== */
.hero-caixa { display: grid; grid-template-columns: 1.1fr 2fr; gap: 16px; margin-bottom: 18px; }
.hero-esq {
  background: linear-gradient(135deg, var(--verde-claro) 0%, var(--verde-esc) 100%);
  color: #fff; border-radius: 18px; padding: 24px 26px; box-shadow: 0 8px 24px rgba(11,138,62,.22);
  display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
}
.hero-esq::after { content: '⚽'; position: absolute; right: -14px; bottom: -20px; font-size: 110px; opacity: .12; }
.hero-label { font-size: 12.5px; font-weight: 700; opacity: .92; text-transform: uppercase; letter-spacing: .5px; }
.hero-valor { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; margin-top: 6px; line-height: 1; }
.hero-valor.negativo { color: #ffddd6; }
.hero-sub { font-size: 12.5px; opacity: .85; margin-top: 8px; }
.hero-dir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hero-mini { background: #fff; border: 1px solid var(--borda); border-radius: 15px; padding: 15px 16px; display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--sombra); }
.mini-ico { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; flex-shrink: 0; }
.verde-ico { background: var(--verde-bg); color: var(--verde-esc); }
.vermelho-ico { background: var(--vermelho-bg); color: var(--vermelho); }
.azul-ico { background: #e8eefc; color: #2b5bd7; }
.amarelo-ico { background: #fff4e5; color: #b45309; }
.mini-label { font-size: 11px; color: var(--cinza); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; display: block; }
.mini-valor { font-size: 21px; font-weight: 800; display: block; letter-spacing: -.6px; margin-top: 2px; }
.mini-valor.verde { color: var(--verde); }
.mini-valor.vermelho { color: var(--vermelho); }
.mini-sub { font-size: 11px; color: var(--cinza); display: block; margin-top: 1px; }
@media (max-width: 860px) { .hero-caixa { grid-template-columns: 1fr; } .hero-dir { grid-template-columns: 1fr; } }

/* ===== Donut mensalistas ===== */
.mens-resumo { display: flex; align-items: center; gap: 22px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--borda); }
.donut {
  --pct: 0; width: 108px; height: 108px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--verde) calc(var(--pct) * 1%), var(--cinza-claro) 0);
  display: flex; align-items: center; justify-content: center;
}
.donut-centro { width: 78px; height: 78px; background: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-centro strong { font-size: 22px; font-weight: 800; color: var(--verde-esc); line-height: 1; }
.donut-centro small { font-size: 10px; color: var(--cinza); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }
.mens-nums { display: flex; flex-direction: column; gap: 14px; }
.mn-item { display: flex; flex-direction: column; }
.mn-valor { font-size: 21px; font-weight: 800; letter-spacing: -.6px; }
.amarelo-txt { color: #b45309; }
.mn-label { font-size: 12px; color: var(--cinza); margin-top: 1px; }

/* ===== Segmented (Mensalistas / Avulsos) ===== */
.segmented {
  display: flex; gap: 6px; background: #eceef1; border-radius: 12px; padding: 5px;
  margin-bottom: 16px; max-width: 460px;
}
.seg-btn {
  flex: 1; border: none; background: transparent; cursor: pointer;
  padding: 11px 14px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--cinza);
  display: flex; align-items: center; justify-content: center; gap: 7px; transition: all .15s ease;
}
.seg-btn:hover { color: var(--texto); }
.seg-btn.ativa { background: #fff; color: var(--verde-esc); box-shadow: var(--sombra); }
.seg-count {
  background: var(--cinza-claro); color: var(--cinza); font-size: 11.5px; font-weight: 800;
  padding: 1px 8px; border-radius: 999px; min-width: 20px;
}
.seg-btn.ativa .seg-count { background: var(--verde-bg); color: var(--verde-esc); }

/* ===== Blocos ===== */
.bloco {
  background: #fff; border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra);
  border: 1px solid var(--borda); margin-bottom: 18px;
}
.bloco-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.bloco h2 { font-size: 16px; font-weight: 700; }
.sub-titulo { font-size: 13px; font-weight: 700; color: var(--cinza); margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .3px; }
.cinza { color: var(--cinza); }
.pequeno { font-size: 12px; }

.pill { background: var(--cinza-claro); color: var(--texto); font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.pill.verde-pill { background: var(--verde-bg); color: var(--verde-esc); }
.pill.vermelho-pill { background: var(--vermelho-bg); color: var(--vermelho); }

.barra { height: 8px; background: var(--cinza-claro); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.barra-fill { height: 100%; background: var(--verde); border-radius: 999px; transition: width .3s ease; width: 0; }

/* ===== Devedores / categorias ===== */
.lista-devedores { display: flex; flex-wrap: wrap; gap: 7px; max-height: 190px; overflow-y: auto; padding: 2px; }
.lista-devedores::-webkit-scrollbar { width: 8px; }
.lista-devedores::-webkit-scrollbar-thumb { background: #dfe3e8; border-radius: 8px; }
.chip-dev {
  background: #f7f8fa; color: var(--texto); border: 1px solid var(--borda);
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip-dev::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho); flex-shrink: 0; }
.chip-dev.chip-avulso { background: #fff4e5; color: #b45309; border-color: #fcd9a8; }
.tag-avulso { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; opacity: .8; padding: 1px 6px; border-radius: 6px; background: rgba(180,83,9,.12); }
.tudo-pago { color: var(--verde); font-weight: 600; padding: 8px 0; }

/* ===== Lista de status dos mensalistas (dashboard) ===== */
.bloco-acoes { display: flex; align-items: center; gap: 8px; }
.btn-copiar { background: var(--verde); color: #fff; border: none; border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.btn-copiar:hover { filter: brightness(1.06); }
.btn-copiar:active { transform: translateY(1px); }
.btn-imagem { background: #2b5bd7; }
.lista-status { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.lista-status::-webkit-scrollbar { width: 8px; }
.lista-status::-webkit-scrollbar-thumb { background: #dfe3e8; border-radius: 8px; }
.status-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--borda); }
.status-item:last-child { border-bottom: none; }
.si-nome { font-weight: 600; font-size: 14px; }
.si-badge { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.badge-pago-mini { background: var(--verde-bg); color: var(--verde-esc); }
.badge-devendo-mini { background: var(--vermelho-bg); color: var(--vermelho); }
.badge-isento-mini { background: #f3e8ff; color: #6b21a8; }
.mini-secao { font-size: 12.5px; color: var(--cinza); padding: 10px 2px 2px; line-height: 1.5; }
.ms-titulo { font-weight: 700; color: var(--texto); }

.lista-cat { display: flex; flex-direction: column; gap: 8px; }
.cat-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--borda); }
.cat-item:last-child { border-bottom: none; }
.cat-nome { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; text-transform: capitalize; }
.cat-emoji { font-size: 18px; }
.cat-valor { font-weight: 700; color: var(--vermelho); }
.vazio { color: var(--cinza); font-size: 14px; padding: 10px 0; }
.alerta-cf { background: #fff4e5; color: #b45309; border: 1px solid #fcd9a8; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; line-height: 1.5; }
.alerta-atraso { background: #fef3f2; color: #b42318; border: 1px solid #fbcfc9; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-top: 12px; line-height: 1.5; }

/* chips de atraso na tabela de mensalistas */
.atrasos-cell { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-atraso {
  border: 1px solid #fbcfc9; background: #fef3f2; color: #b42318;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.chip-atraso:hover { background: #b42318; color: #fff; border-color: #b42318; }
.atraso-total { font-size: 11.5px; color: var(--vermelho); font-weight: 600; margin-top: 4px; }

/* ===== Tabelas ===== */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--cinza); padding: 8px 10px; border-bottom: 2px solid var(--borda); }
.tabela td { padding: 10px; border-bottom: 1px solid var(--borda); }
.tabela tbody tr:hover { background: #fafbfc; }
.tabela .dir, td.dir { text-align: right; }
.tabela .centro, td.centro { text-align: center; }

.status-btn { border: none; cursor: pointer; padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.status-pago { background: var(--verde-bg); color: var(--verde-esc); }
.status-pendente { background: var(--vermelho-bg); color: var(--vermelho); }
.status-neutro { background: var(--cinza-claro); color: var(--cinza); }

/* células da grade semanal de avulsos */
.cel-avulso { border: 1px solid var(--borda); background: #fff; border-radius: 8px; padding: 7px 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; min-width: 54px; }
.cel-avulso:hover { filter: brightness(.96); }
.cel-vazio { color: #c0c6cf; background: #fafbfc; }
.cel-devendo { background: var(--vermelho-bg); color: var(--vermelho); border-color: #f6c9c4; }
.cel-pago { background: var(--verde-bg); color: var(--verde-esc); border-color: #bfe6cd; }
.cel-isento { background: #f3e8ff; color: #6b21a8; border-color: #e2ccf7; }
tr.linha-inativa { opacity: .6; }
tr.linha-inativa:hover { opacity: 1; }
.data-jogo { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.data-jogo input[type=date] { padding: 7px 10px; }
.rel-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-btn:hover { filter: brightness(.96); }

.badge-cat { padding: 3px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; text-transform: capitalize; background: var(--cinza-claro); }

/* selos de movimentação (Caixa) */
.mov-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.mov-entrada { background: var(--verde-bg); color: var(--verde-esc); }
.mov-saida { background: var(--vermelho-bg); color: var(--vermelho); }

/* ===== Goleiro (isento) ===== */
.tag-goleiro { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: #6b21a8; background: #f3e8ff; border: 1px solid #e2ccf7; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.badge-isento { display: inline-block; font-size: 12px; font-weight: 700; color: #6b21a8; background: #f3e8ff; border: 1px solid #e2ccf7; padding: 4px 12px; border-radius: 999px; }

/* nome + selo de tipo (lista única de jogadores) */
.jg-nome { display: flex; align-items: center; gap: 6px; }
.jg-num { color: var(--cinza); font-weight: 700; min-width: 22px; }
.jg-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.jg-cpf { font-size: 12px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.tipo-badge { border: 1px solid; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; line-height: 1.4; }
.tipo-mensal { background: var(--verde-bg); color: var(--verde-esc); border-color: #bfe6cd; }
.tipo-avulso { background: #fff4e5; color: #b45309; border-color: #fcd9a8; }
.tipo-badge:hover { filter: brightness(.95); }
.sit-wrap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.atraso-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.valor-neg { color: var(--vermelho); font-weight: 800; font-size: 13.5px; }
tr.linha-goleiro { background: #fcfaff; }
.icone-btn.goleiro-on { background: #f3e8ff; color: #6b21a8; }
.icone-btn.goleiro-on:hover { background: #e9d5ff; }

.icone-btn { border: none; background: transparent; cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 6px; color: var(--cinza); }
.icone-btn:hover { background: var(--cinza-claro); color: var(--vermelho); }

/* ===== Paginação ===== */
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pag-info { font-size: 12.5px; color: var(--cinza); font-weight: 600; }
.pag-botoes { display: flex; align-items: center; gap: 8px; }
.pag-atual { font-size: 13px; color: var(--cinza); font-weight: 600; }
.pag-btn { border: 1px solid var(--borda); background: #fff; color: var(--texto); border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.pag-btn:hover:not(:disabled) { background: var(--verde-bg); border-color: var(--verde-claro); color: var(--verde-esc); }
.pag-btn:disabled { opacity: .45; cursor: default; }

/* ===== Formulários ===== */
.form-linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-linha input, .form-linha select { flex: 1; min-width: 130px; }
input, select {
  border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; font-size: 14px;
  font-family: inherit; background: #fff; color: var(--texto);
}
input:focus, select:focus { outline: none; border-color: var(--verde-claro); box-shadow: 0 0 0 3px rgba(11,138,62,.12); }

.btn {
  background: var(--verde); color: #fff; border: none; border-radius: 10px;
  padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--verde-claro); }
.btn:active { transform: translateY(1px); }

.form-config { display: flex; flex-direction: column; gap: 14px; max-width: 340px; }
.form-config label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cinza); }
.form-config input { max-width: 220px; }

.lista-jogadores { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.lista-jogadores::-webkit-scrollbar { width: 8px; }
.lista-jogadores::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 8px; }
.lista-jogadores::-webkit-scrollbar-track { background: transparent; }
.jog-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 4px; border-bottom: 1px solid var(--borda); }
.jog-item:last-child { border-bottom: none; }
.jog-nome { font-weight: 600; font-size: 14px; }
.jog-info { font-size: 12.5px; color: var(--cinza); }

/* ===== Contas fixas ===== */
.lista-contas-fixas { display: flex; flex-direction: column; gap: 10px; }
.cf-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; background: #fafbfc;
}
.cf-card.cf-pendente { border-left: 4px solid var(--vermelho); }
.cf-card.cf-pago { border-left: 4px solid var(--verde); background: var(--verde-bg); }
.cf-info { display: flex; flex-direction: column; gap: 2px; }
.cf-nome { font-weight: 700; font-size: 15px; }
.cf-venc { font-size: 12.5px; color: var(--cinza); }
.cf-venc.venc-atrasado { color: var(--vermelho); font-weight: 700; }
.cf-dir { display: flex; align-items: center; gap: 12px; }
.cf-valor { font-weight: 800; font-size: 18px; color: var(--vermelho); }
.cf-card.cf-pago .cf-valor { color: var(--verde-esc); }

/* ===== CPF ===== */
.cpf-cel { font-variant-numeric: tabular-nums; color: var(--texto); font-size: 13.5px; }
.cpf-falta { color: var(--amarelo); font-weight: 700; font-size: 12.5px; }
td.nowrap, .nowrap { white-space: nowrap; }

/* ===== Relatório ===== */
.relatorio { display: flex; flex-direction: column; gap: 20px; }
.rel-secao { }
.rel-titulo { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--verde-esc); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--verde-bg); }
.rel-linha { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--borda); }
.rel-linha:hover { background: #fafbfc; }
.rel-num { color: var(--cinza); font-weight: 700; text-align: right; }
.rel-nome { font-weight: 600; }
.rel-cpf { font-variant-numeric: tabular-nums; color: var(--cinza); font-size: 13.5px; }
.rel-acoes { display: flex; gap: 2px; }
.rel-acao { display: flex; justify-content: flex-end; }
.rel-mover { border: 1px solid #fcd9a8; background: #fff4e5; color: #b45309; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.rel-mover:hover { background: #ffe8cc; }
.rel-mover.volta { border-color: #bfe6cd; background: var(--verde-bg); color: var(--verde-esc); }
.tag-mov { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--verde-esc); background: var(--verde-bg); border: 1px solid #bfe6cd; padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
.tag-mov-a { color: #b45309; background: #fff4e5; border-color: #fcd9a8; }
.cont-excede { color: var(--vermelho) !important; font-weight: 800; }
@media (max-width: 600px) {
  .rel-linha { grid-template-columns: 24px 1fr auto; }
  .rel-cpf { grid-column: 2; color: var(--verde-esc); font-size: 12.5px; }
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,20,30,.5); display: none;
  align-items: center; justify-content: center; z-index: 60; padding: 20px;
}
.modal-overlay.show { display: flex; animation: fade .15s ease; }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 420px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.modal-topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.modal-topo h3 { font-size: 17px; }
.modal-fechar { border: none; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--cinza); }
.modal-fechar:hover { color: var(--texto); }
.modal-form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cinza); }
.modal-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.btn-sec { background: var(--cinza-claro); color: var(--texto); border: none; border-radius: 10px; padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-sec:hover { filter: brightness(.96); }
.btn-perigo { background: var(--vermelho); }
.btn-perigo:hover { background: #b42318; }
.modal-msg { font-size: 15px; line-height: 1.5; color: var(--texto); }
.modal-confirm { max-width: 400px; }
.icone-btn.editar:hover { color: var(--verde); }

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1f2430; color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.erro { background: var(--vermelho); }

/* ============================================================
   MOBILE — o sistema é usado mais no celular que no desktop
   ============================================================ */
@media (max-width: 640px) {
  body { padding-bottom: 40px; font-size: 15px; }
  main { padding: 14px 12px; }

  /* Cabeçalho */
  .topo-inner { padding: 12px 14px; gap: 10px; }
  .marca h1 { font-size: 18px; }
  .marca p { font-size: 11.5px; }
  .marca .bola { font-size: 28px; }
  .mes-seletor { width: 100%; justify-content: space-between; }
  .mes-seletor input[type=month] { flex: 1; text-align: center; }
  .mes-btn { width: 42px; height: 42px; }
  .abas { padding: 0 8px; }
  .aba { padding: 12px 15px; font-size: 14px; }

  /* Blocos */
  .bloco { padding: 15px 14px; border-radius: 13px; margin-bottom: 14px; }
  .bloco h2 { font-size: 15px; }
  .bloco-topo { flex-wrap: wrap; }

  /* Hero / dashboard */
  .hero-esq { padding: 20px 22px; border-radius: 15px; }
  .hero-valor { font-size: 34px; }
  .hero-mini { padding: 13px 14px; }

  /* Donut mensalistas */
  .mens-resumo { gap: 16px; }
  .donut { width: 92px; height: 92px; }
  .donut-centro { width: 66px; height: 66px; }
  .mn-valor { font-size: 19px; }

  /* Formulários empilham (dedo cabe melhor) */
  .form-linha { flex-direction: column; align-items: stretch; }
  .form-linha input, .form-linha select, .form-linha button, .form-linha .btn {
    width: 100% !important; max-width: none !important; min-width: 0 !important;
  }
  .form-config input { max-width: none; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbar input { width: 100%; }
  input, select { padding: 12px 13px; font-size: 16px; } /* 16px evita zoom no iOS */
  .btn, .btn-sec, .pag-btn { padding: 12px 16px; }

  /* Tabelas: rolagem horizontal suave + alvos de toque maiores */
  .tabela-wrap { -webkit-overflow-scrolling: touch; margin: 0 -2px; }
  .tabela { font-size: 13.5px; }
  .tabela th, .tabela td { padding: 10px 8px; }
  #tabela-mensalistas { min-width: 580px; }
  #tabela-avulsos { min-width: 520px; }
  .status-btn { padding: 9px 13px; font-size: 12.5px; }
  .icone-btn { font-size: 19px; padding: 8px 9px; }

  /* Devedores */
  .lista-devedores { max-height: 240px; }

  /* Paginação empilhada */
  .paginacao { flex-direction: column; align-items: stretch; gap: 10px; }
  .pag-botoes { justify-content: space-between; }
  .pag-btn { flex: 1; }

  /* Modal vira "bottom sheet" (sobe de baixo, mais confortável no polegar) */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: 100%; border-radius: 20px 20px 0 0; }
  .modal-form { padding: 18px 18px 26px; }
  .modal-acoes { position: sticky; bottom: 0; }

  /* Relatório */
  .rel-toolbar { width: 100%; }
  .rel-toolbar input[type=date] { flex: 1; }
}

/* Telas bem pequenas (≤380px) */
@media (max-width: 380px) {
  .hero-valor { font-size: 30px; }
  .aba { padding: 11px 12px; font-size: 13.5px; }
  .cards, .hero-dir { gap: 10px; }
}

/* ============================================================
   MOBILE — tabelas viram CARDS (Mensalistas, Avulsos, Saídas)
   ============================================================ */
@media (max-width: 640px) {
  /* desliga a rolagem horizontal e o min-width das tabelas-card */
  #tabela-mensalistas, #tabela-avulsos, #tabela-despesas { min-width: 0 !important; }
  .tabela-cards, .tabela-cards tbody { display: block; width: 100%; }
  .tabela-cards thead { display: none; }

  .tabela-cards tr {
    display: block; background: #fff; border: 1px solid var(--borda);
    border-radius: 13px; padding: 6px 14px 10px; margin-bottom: 12px; box-shadow: var(--sombra);
  }
  .tabela-cards tr.linha-goleiro { background: #fcfaff; }
  .tabela-cards tr.linha-inativa { opacity: 1; }

  .tabela-cards td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 0; border: none; border-bottom: 1px solid #f0f2f4; text-align: right;
  }
  .tabela-cards td:last-child { border-bottom: none; }
  .tabela-cards td::before {
    content: attr(data-label); font-weight: 700; color: var(--cinza);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; text-align: left; flex-shrink: 0;
  }
  /* primeira célula = título do card (nome / descrição) */
  .tabela-cards td.cel-nome {
    display: block; text-align: left; font-size: 16px; font-weight: 700;
    padding: 6px 0 9px; border-bottom: 2px solid var(--borda); margin-bottom: 4px;
  }
  .tabela-cards td.cel-nome::before { content: none; }
  .tabela-cards td.cpf-cel { font-variant-numeric: tabular-nums; }

  /* alvos de toque confortáveis dentro dos cards */
  .tabela-cards .status-btn { padding: 9px 14px; }
  .tabela-cards .icone-btn { font-size: 21px; padding: 8px 10px; }
  .tabela-cards td[data-label="Ações"] { justify-content: flex-end; gap: 4px; padding-top: 10px; }
  .tabela-cards .atrasos-cell { justify-content: flex-end; }

  /* botões copiar/imagem no topo do bloco ocupam bem o espaço */
  .bloco-acoes { flex-wrap: wrap; gap: 6px; }
  .btn-copiar { padding: 9px 14px; font-size: 13px; }

  /* lista de status um pouco maior no dashboard */
  .lista-status { max-height: 420px; }
  .status-item { padding: 11px 2px; }
  .si-nome { font-size: 15px; }
}

/* ============================================================
   MOBILE — aba JOGADORES continua como TABELA (não vira card)
   e com fonte menor para caber melhor no celular
   ============================================================ */
@media (max-width: 640px) {
  #painel-jogadores .tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #painel-jogadores .tabela-cards { display: table; width: 100%; min-width: 0; font-size: 11.5px; }
  #painel-jogadores .tabela-cards thead { display: table-header-group; }
  #painel-jogadores .tabela-cards tbody { display: table-row-group; }

  #painel-jogadores .tabela-cards tr {
    display: table-row; background: transparent; border: none; border-radius: 0;
    padding: 0; margin: 0; box-shadow: none;
  }
  #painel-jogadores .tabela-cards tr.linha-goleiro { background: #fcfaff; }

  #painel-jogadores .tabela-cards th {
    display: table-cell; font-size: 10px; padding: 6px 5px; white-space: nowrap;
  }
  #painel-jogadores .tabela-cards td {
    display: table-cell; padding: 7px 5px; border: none; border-bottom: 1px solid var(--borda);
    text-align: left; vertical-align: middle; gap: 0;
  }
  #painel-jogadores .tabela-cards td::before { content: none; }  /* remove o rótulo do card */

  /* nome volta a ser uma célula normal da tabela */
  #painel-jogadores .tabela-cards td.cel-nome {
    display: table-cell; font-size: 12px; font-weight: 600;
    padding: 7px 5px; border-bottom: 1px solid var(--borda); margin: 0;
  }
  #painel-jogadores .tabela-cards td.cpf-cel { font-size: 10.5px; }

  /* controles mais compactos dentro da tabela */
  #painel-jogadores .tabela-cards .status-btn { padding: 5px 8px; font-size: 11px; }
  #painel-jogadores .tabela-cards .icone-btn { font-size: 16px; padding: 4px 5px; }
  #painel-jogadores .tabela-cards td[data-label="Ações"] { white-space: nowrap; gap: 2px; }
}

/* ============================================================
   ÍCONES (Lucide) — SVGs e botões com ícone + texto
   ============================================================ */
.lucide { width: 1em; height: 1em; stroke-width: 2; display: inline-block; vertical-align: middle; flex-shrink: 0; }
/* ícones são decorativos: o clique/toque deve sempre cair no botão, nunca no SVG interno */
button svg, .icone-btn svg, .tipo-badge svg { pointer-events: none; }

/* botões de ação (editar, excluir, goleiro): só o ícone, centralizado */
.icone-btn { display: inline-flex; align-items: center; justify-content: center; }
.icone-btn svg { width: 18px; height: 18px; }

/* botões com ícone + texto */
.btn, .btn-copiar { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn svg, .btn-copiar svg { width: 16px; height: 16px; }

/* etiquetas de tipo (Mensal / Avulso) */
.tipo-badge { display: inline-flex; align-items: center; gap: 5px; }
.tipo-badge svg { width: 13px; height: 13px; }

/* setas de mês no topo */
.mes-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.mes-btn svg { width: 20px; height: 20px; }

/* ícones dos cards do caixa */
.mini-ico svg { width: 20px; height: 20px; }

/* etiqueta de goleiro (luva) */
.tag-goleiro { display: inline-flex; align-items: center; padding: 3px 6px; }
.tag-goleiro svg { width: 13px; height: 13px; }

/* ===== Botão Sair ===== */
.btn-sair {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 8px;
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.30);
  border-radius: 10px; padding: 8px 14px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn-sair svg { width: 17px; height: 17px; }
.btn-sair:hover { background: #e5484d; border-color: #e5484d; }
.btn-sair:active { transform: translateY(1px); }

@media (max-width: 640px) {
  /* no celular a barra de mês ocupa a largura toda; o Sair vira quadrado (só ícone) */
  .btn-sair { margin-left: 0; height: 42px; padding: 0 12px; }
}