/* Celular — cadastros (11/10/2026, 2ª rodada do modo celular). Só regras com html.modo-celular na frente: o PC não muda. */

/* ---------- Topo: meses, botões do mês, busca, filtros e totais ---------- */
/* Era 526 px de botões soltos em 7 linhas; agora cada grupo cabe em 1 ou 2 linhas e tudo continua à vista */
html.modo-celular .cadastros-header-bar { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
html.modo-celular .cadastros-header-bar .mes-filtro-chips { gap: 6px; margin-bottom: 0; }
/* Os chips esticam para fechar a linha (fica alinhado dos dois lados) e têm altura de dedo */
html.modo-celular .cadastros-header-bar .mes-filtro-chips > .mes-chip { flex: 1 0 auto; min-height: 40px; padding: 0 8px; font-size: 0.8rem; }
/* Mercadorias / Planilha do mês / Abrir o mês seguinte: uma linha só, 3 botões iguais (eram 2 linhas) */
html.modo-celular .cadastros-header-bar .cad-acoes-mes { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
html.modo-celular .cadastros-header-bar .cad-acoes-mes .mes-chip {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 6px; border-radius: 12px;
  font-size: 0.78rem; line-height: 1.2; text-align: center; white-space: normal;
}

html.modo-celular .cadastros-header-bar .search-and-filters { gap: 8px; }
html.modo-celular .cadastros-header-bar .search-box input { min-height: 44px; }
/* O ✕ da busca era um alvo de 12 px */
html.modo-celular .cadastros-header-bar .btn-clear-search { right: 2px; width: 40px; height: 40px; font-size: 1rem; }
html.modo-celular .cadastros-header-bar .filter-pills { gap: 6px; }
html.modo-celular .cadastros-header-bar .pill-btn { flex: 1 0 auto; min-height: 40px; padding: 0 8px; font-size: 0.75rem; }

/* Os 3 totais num quadro só, uma linha cada, valor à direita; "A receber" primeiro (é o que o dono olha) */
html.modo-celular .cadastros-resumo-rapido {
  flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 2px 12px;
  border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card);
}
html.modo-celular .cadastros-resumo-rapido .resumo-chip {
  flex: none; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 0; border: 0; border-radius: 0; background: none;
}
html.modo-celular .cadastros-resumo-rapido .chip-falta { order: 1; }
html.modo-celular .cadastros-resumo-rapido .chip-recolhido { order: 2; border-top: 1px solid var(--border-color); }
html.modo-celular .cadastros-resumo-rapido .chip-bruto { order: 3; border-top: 1px solid var(--border-color); }
html.modo-celular .cadastros-resumo-rapido .resumo-chip .label { flex: 1 1 auto; min-width: 0; font-size: 0.75rem; line-height: 1.3; }
html.modo-celular .cadastros-resumo-rapido .resumo-chip .val { flex: none; font-size: 0.95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.modo-celular .cadastros-resumo-rapido .chip-falta .val { font-size: 1.1rem; }

/* ---------- Cartão do gerente ---------- */
html.modo-celular #painelCadastros .dividendos-grid { gap: 12px; }
/* Menos recheio; sem o "pulinho" do mouse (no toque ele ficava preso) e sem o desfoque do fundo (pesa na rolagem) */
html.modo-celular .dividendo-card[data-cad] { padding: 12px; gap: 8px; border-radius: 14px; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.modo-celular .dividendo-card[data-cad]:hover { transform: none; }

/* Cabeçalho: código | nome; embaixo do nome, logo o quanto ele DEVE; depois a linha de meses/recolhes e os selos */
html.modo-celular .dividendo-card[data-cad] .card-top-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; }
html.modo-celular .dividendo-card[data-cad] .card-title-group,
html.modo-celular .dividendo-card[data-cad] .div-titles { display: contents; }
html.modo-celular .dividendo-card[data-cad] .cad-codigo { grid-column: 1; grid-row: 1 / span 2; align-self: start; min-width: 2.6rem; padding: 8px 4px; font-size: 1.05rem; line-height: 1.2; }
html.modo-celular .dividendo-card[data-cad] .div-nome { grid-column: 2; grid-row: 1; font-size: 1.08rem; line-height: 1.25; overflow-wrap: anywhere; }
html.modo-celular .dividendo-card[data-cad] .badge-status {
  grid-column: 2; grid-row: 2; justify-self: start; margin: 0; padding: 3px 10px; font-size: 0.82rem; line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
html.modo-celular .dividendo-card[data-cad] .div-titles > :not(.div-nome) { grid-column: 2; justify-self: start; max-width: 100%; }
html.modo-celular .dividendo-card[data-cad] .div-ref { font-size: 0.75rem; line-height: 1.35; }
html.modo-celular .dividendo-card[data-cad] .cad-combinado,
html.modo-celular .dividendo-card[data-cad] .cad-saldo-casa { margin-top: 0; font-size: 0.75rem; white-space: normal; }
/* "separar" era um botão de 22 px de altura */
html.modo-celular .dividendo-card[data-cad] .cad-separar { display: inline-flex; align-items: center; min-height: 40px; margin: 2px 0 0 6px; padding: 0 12px; font-size: 0.75rem; }

/* Barra do total: mais fina; o texto quebra em vez de espremer o valor */
html.modo-celular .dividendo-card[data-cad] .progress-section { gap: 4px; }
html.modo-celular .dividendo-card[data-cad] .progress-labels { align-items: baseline; gap: 8px; font-size: 0.78rem; line-height: 1.35; }
html.modo-celular .dividendo-card[data-cad] .pct-text { flex: none; }
html.modo-celular .dividendo-card[data-cad] .progress-track { height: 6px; }

/* ---------- Quadrados dos meses: 2 por linha, baixinhos (eram 245 px cada) ---------- */
/* No lugar do anel grande vai uma barrinha com a % ao lado; pago e falta numa linha cada, valor inteiro */
html.modo-celular .dividendo-card[data-cad] .cad-meses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
/* Mês sozinho na última linha ocupa a largura toda (não fica um buraco ao lado) */
html.modo-celular .dividendo-card[data-cad] .cad-meses-grid > .mes-quadrado:last-child:nth-child(odd) { grid-column: 1 / -1; }
html.modo-celular .dividendo-card[data-cad] .mes-quadrado {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 6px; padding: 7px 9px;
  grid-template-areas: "topo topo" "barra pct" "pago pago" "falta falta" "rodape rodape";
}
html.modo-celular .dividendo-card[data-cad] .mes-quadrado:hover,
html.modo-celular .dividendo-card[data-cad] .mes-quadrado:focus-visible { transform: none; }
html.modo-celular .dividendo-card[data-cad] .mes-quadrado:focus-visible { outline: 2px solid var(--emerald-400); outline-offset: 2px; }
html.modo-celular .mes-quadrado .mq-topo { grid-area: topo; flex-wrap: wrap; align-items: center; gap: 2px 5px; min-width: 0; }
html.modo-celular .mes-quadrado .mq-mes { font-size: 0.95rem; line-height: 1.2; }
html.modo-celular .mes-quadrado .mq-cod { font-size: 0.75rem; line-height: 1.35; padding: 0 5px; }
html.modo-celular .mes-quadrado .mq-anel { display: contents; }
html.modo-celular .mes-quadrado .mq-anel::before {
  content: ''; grid-area: barra; height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--anel-cor) calc(var(--pct) * 1%), rgba(148, 163, 184, 0.22) 0);
}
html.modo-celular .mes-quadrado .mq-anel > span {
  grid-area: pct; width: auto; height: auto; border-radius: 0; background: none;
  font-size: 0.85rem; font-weight: 800; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
html.modo-celular .mes-quadrado .mq-linha { font-size: 0.75rem; line-height: 1.3; white-space: normal; overflow: visible; text-overflow: clip; }
/* Rótulo e valor na mesma linha; se o valor não couber, ele desce inteiro (nunca "R$ 92.000,…") */
html.modo-celular .mes-quadrado .mq-linha strong { display: inline; font-size: 0.84rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.modo-celular .mes-quadrado .mq-pago { grid-area: pago; }
html.modo-celular .mes-quadrado .mq-falta { grid-area: falta; }
html.modo-celular .mes-quadrado .mq-rodape { grid-area: rodape; gap: 4px; margin-top: 2px; padding-top: 3px; font-size: 0.75rem; line-height: 1.3; }

/* ---------- Último recolhe em 2 linhas: quando + valor em cima; descrição e de quem é o comprovante embaixo ---------- */
/* (o "📎 nome do pagador" ficava escondido além da borda). Em tela estreita o valor desce sozinho, nunca vaza */
html.modo-celular .dividendo-card[data-cad] .cad-ultimo {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 1px 8px;
  padding: 6px 10px; font-size: 0.8rem;
}
html.modo-celular .dividendo-card[data-cad] .cad-ultimo:has(> .cad-ultimo-ver) { min-height: 52px; padding-right: 54px; }
html.modo-celular .dividendo-card[data-cad] .cad-ultimo-rot { display: block; font-size: 0.75rem; }
html.modo-celular .dividendo-card[data-cad] .cad-ultimo-data { font-size: 0.78rem; }
html.modo-celular .dividendo-card[data-cad] .cad-ultimo-val { margin-left: auto; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
html.modo-celular .dividendo-card[data-cad] .cad-ultimo-desc { order: 1; flex: 1 1 100%; font-size: 0.78rem; line-height: 1.4; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
html.modo-celular .dividendo-card[data-cad] .cad-ultimo-desc .tag-comp-vinculado { display: inline; margin-left: 4px; padding: 1px 6px; font-size: 0.75rem; line-height: 1.5; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* 👁️ ver comprovante: era um alvo de 16 px; agora 40 px, no canto direito, na altura das 2 linhas */
html.modo-celular .dividendo-card[data-cad] .cad-ultimo-ver {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; border-radius: 10px; background: rgba(148, 163, 184, 0.12); font-size: 1rem; text-decoration: none;
}

/* ---------- Ações: Extrato | Ampliar | Em mãos numa linha; Jogar comprovante embaixo, inteiro e maior ---------- */
/* Rótulo nunca quebra no meio ("💵 Em" / "mãos"): se os 3 não couberem (tela de 320 px), um desce para a outra linha */
html.modo-celular .dividendo-card[data-cad] .card-footer-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; }
html.modo-celular .dividendo-card[data-cad] .card-footer-actions .btn-card-action {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 8px; border-radius: 12px;
  font-size: 0.8rem; line-height: 1.2; white-space: nowrap;
}
html.modo-celular .dividendo-card[data-cad] .card-footer-actions .btn-card-action.primary { flex-basis: 100%; min-height: 44px; font-size: 0.9rem; font-weight: 700; }

/* ---------- Aviso de linhas fora do bloco (aparece só às vezes) ---------- */
html.modo-celular .alerta-orfaos-box { padding: 12px; }
html.modo-celular .aob-linha code { white-space: pre-wrap; overflow-wrap: anywhere; }
html.modo-celular .aob-destino { flex: 1 1 100%; min-width: 0; }
html.modo-celular .aob-select { display: block; width: 100%; max-width: 100%; min-height: 44px; margin: 4px 0 0; }
html.modo-celular .aob-actions { flex-direction: column; align-items: stretch; gap: 8px; }
html.modo-celular .btn-corrigir-orfaos, html.modo-celular .btn-dispensar-orfaos { min-height: 44px; font-size: 0.85rem; }
/* O botão principal e o título usavam --amber-500/--amber-400, que não existem: o botão saía sem fundo (preto no escuro) */
html.modo-celular .btn-corrigir-orfaos { background: var(--gold-500); color: #1c1203; }
html.modo-celular .aob-titles strong { color: var(--gold-500); }
html.modo-celular body.theme-light .aob-titles strong, html.modo-celular body.theme-light .aob-mes { color: #b45309; }
/* No claro a lista ficava num cinza escuro, com o verde e o branco do código quase sumindo */
html.modo-celular body.theme-light .aob-lista { background: rgba(255, 255, 255, 0.75); }
html.modo-celular body.theme-light .aob-linha code { color: var(--text-primary); background: rgba(15, 23, 42, 0.06); }
html.modo-celular body.theme-light .aob-destino { color: #047857; }

/* ✕ da gaveta de comprovantes (abre por cima dos cartões): 44 px em vez de 36 */
html.modo-celular .gaveta-fechar { width: 44px; height: 44px; }

/* ---------- Tema claro: o que era branco no branco ou verde/amarelo claro demais ---------- */
html.modo-celular body.theme-light .cadastros-header-bar .search-box input { color: var(--text-primary); }
html.modo-celular body.theme-light .cadastros-header-bar .pill-btn.active { color: #047857; }
html.modo-celular body.theme-light .cadastros-resumo-rapido { background: #ffffff; }
html.modo-celular body.theme-light .cadastros-resumo-rapido .resumo-chip .val { color: var(--text-primary); }
html.modo-celular body.theme-light .cadastros-resumo-rapido .chip-recolhido .val { color: #047857; }
html.modo-celular body.theme-light .cadastros-resumo-rapido .chip-falta .val { color: #b45309; }
html.modo-celular body.theme-light .dividendo-card[data-cad] .pct-text { color: var(--text-primary); }
html.modo-celular body.theme-light .dividendo-card[data-cad] .cad-codigo { color: #047857; }
html.modo-celular body.theme-light .dividendo-card[data-cad] .badge-status.status-quitado { color: #047857; }
html.modo-celular body.theme-light .dividendo-card[data-cad] .badge-status.status-bom { color: #1d4ed8; }
html.modo-celular body.theme-light .dividendo-card[data-cad] .badge-status.status-parcial { color: #b45309; }
html.modo-celular body.theme-light .dividendo-card[data-cad] .badge-status.status-zerado { color: #b91c1c; }
html.modo-celular body.theme-light .mes-quadrado .mq-cod { color: var(--text-secondary); }
html.modo-celular body.theme-light .mes-quadrado .mq-anel::before { background: linear-gradient(90deg, var(--anel-cor) calc(var(--pct) * 1%), rgba(15, 23, 42, 0.1) 0); }
html.modo-celular body.theme-light .dividendo-card[data-cad] .cad-ultimo-ver { background: rgba(15, 23, 42, 0.06); }