/* Celular — cartorio (11/10/2026, 2ª rodada do modo celular). Só regras com html.modo-celular na frente: o PC não muda. */
/* Seletores de rótulo com acento vão por prefixo ASCII ([data-rotulo^="Conta"]): não dependem da codificação do arquivo. */

/* ---------- Topo: título mais baixo e Backup / Imprimir lado a lado ---------- */
html.modo-celular #tab-cartorio .cartorio-header-bar { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 12px; }
html.modo-celular #tab-cartorio .cartorio-info-box { align-items: flex-start; gap: 10px; }
html.modo-celular #tab-cartorio .c-icon { font-size: 1.6rem; line-height: 1.2; }
html.modo-celular #tab-cartorio .cartorio-info-box h3 { margin: 0 0 2px; font-size: 1.15rem; }
html.modo-celular #tab-cartorio .cartorio-info-box .sub-text { display: block; font-size: 0.8rem; line-height: 1.4; }
html.modo-celular #tab-cartorio .cartorio-header-bar > .cartorio-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html.modo-celular #tab-cartorio .btn-cartorio-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 0.88rem; }

/* Os 4 números: 2 por linha, cartões mais baixos */
html.modo-celular #tab-cartorio .cartorio-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
html.modo-celular #tab-cartorio .c-stat-card { padding: 10px 12px; border-radius: 14px; }
html.modo-celular #tab-cartorio .cs-num { font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
html.modo-celular #tab-cartorio .cs-label { font-size: 0.75rem; line-height: 1.35; }
html.modo-celular #tab-cartorio .cart-barra { margin: 6px 0 5px; }

/* Faixas de aviso (fotos, histórico, saldo na casa, linhas soltas): menos espaço em volta */
html.modo-celular #tab-cartorio .cart-espaco { margin: 0 0 8px; padding: 8px 12px; font-size: 0.8rem; line-height: 1.4; }
/* Histórico: 📜 | texto; o botão "Mudar" embaixo do texto (antes o 📜 ficava sozinho numa linha) */
html.modo-celular #tab-cartorio .cart-historico-faixa { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; margin: 0 0 8px; padding: 10px 12px; font-size: 0.8rem; }
html.modo-celular #tab-cartorio .cart-historico-faixa > .btn-micro-action { grid-column: 2; justify-self: start; }
html.modo-celular #tab-cartorio .cart-saldos { margin: 0 0 8px; padding: 10px 12px; font-size: 0.8rem; }
html.modo-celular #tab-cartorio .cart-saldo-chip { white-space: normal; }
html.modo-celular #tab-cartorio .cart-soltas { padding: 10px 12px; font-size: 0.82rem; }
html.modo-celular #tab-cartorio .cart-nota { font-size: 0.8rem; margin-bottom: 10px; }

/* Botões pequenos ("Mudar", "Resolver em Cadastros", os do dia): viram botões de dedo, com borda */
html.modo-celular #tab-cartorio .btn-micro-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--border-color); background: rgba(148, 163, 184, 0.1);
  font-size: 0.85rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
}

/* ---------- Filtros: meses e visões numa linha só cada, de arrastar para o lado ---------- */
html.modo-celular #tab-cartorio .cartorio-filtros { gap: 8px; margin: 10px 0 12px; }
html.modo-celular #tab-cartorio .mes-filtro-chips,
html.modo-celular #tab-cartorio .filter-pills {
  display: flex; flex-wrap: nowrap; gap: 6px; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px;
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html.modo-celular #tab-cartorio .mes-filtro-chips::-webkit-scrollbar,
html.modo-celular #tab-cartorio .filter-pills::-webkit-scrollbar { display: none; }
html.modo-celular #tab-cartorio .mes-chip,
html.modo-celular #tab-cartorio .pill-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font-size: 0.85rem; white-space: nowrap;
}
/* A tela é refeita a cada toque e a linha volta para o começo: o chip escolhido abre já à vista (onde o navegador sabe) */
html.modo-celular #tab-cartorio .mes-chip.active,
html.modo-celular #tab-cartorio .pill-btn.active { scroll-initial-target: nearest; }
html.modo-celular #tab-cartorio .cart-filtro-linha { flex-direction: column; align-items: stretch; gap: 8px; }
html.modo-celular #tab-cartorio .cart-sozinho-btn { align-self: flex-start; min-height: 40px; padding: 0 14px; font-size: 0.85rem; }
html.modo-celular #tab-cartorio .cart-busca-linha { flex-direction: column; align-items: stretch; gap: 8px; }
html.modo-celular #tab-cartorio .cart-busca,
html.modo-celular #tab-cartorio .cart-select { width: 100%; min-height: 44px; padding: 0 14px; font-size: 16px; }
html.modo-celular #tab-cartorio .filter-pills.cart-subpills { margin-bottom: 10px; }

/* ---------- Com comprovante / Em mãos / Problemas: cada linha vira um cartão curto ----------
   Em cima: data e hora | valor; embaixo o gerente (conta) e o mês; depois rótulo | dado (descrição, pagador…);
   a foto ao lado do ID do Pix; e os botões numa fileira só. Eram ~470 px por comprovante; agora ~280. */
html.modo-celular #tab-cartorio .cartorio-table-container { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
html.modo-celular #tab-cartorio .cartorio-table { display: block; width: 100%; font-size: 0.9rem; }
html.modo-celular #tab-cartorio .cartorio-table thead { display: none; }
html.modo-celular #tab-cartorio .cartorio-table tbody { display: flex; flex-direction: column; gap: 10px; width: 100%; }
html.modo-celular #tab-cartorio .cartorio-table tr {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; width: auto; margin: 0; padding: 10px 12px 12px;
  border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card);
}
html.modo-celular #tab-cartorio .cartorio-table td {
  display: block; flex: 1 1 100%; width: auto; min-width: 0; padding: 0; border: 0; background: none;
  font-size: 0.9rem; line-height: 1.35; overflow-wrap: anywhere;
}
html.modo-celular #tab-cartorio .cartorio-table tr:hover td { background: none; }
/* Rótulo só onde o dado sozinho não diz o que é (descrição, pagador, tipo, ID): fica numa coluna à esquerda */
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo]::before { content: none; }
html.modo-celular #tab-cartorio .cartorio-table td:is([data-rotulo^="Descri"], [data-rotulo="Pagador"], [data-rotulo="Tipo"], [data-rotulo="ID Pix"]) { position: relative; padding-left: 70px; }
html.modo-celular #tab-cartorio .cartorio-table td:is([data-rotulo^="Descri"], [data-rotulo="Pagador"], [data-rotulo="Tipo"], [data-rotulo="ID Pix"])::before {
  content: attr(data-rotulo); position: absolute; left: 0; top: 0; width: 64px; display: block;
  font-size: 0.75rem; font-weight: 600; line-height: 1.215rem; letter-spacing: 0; text-transform: none; color: var(--text-muted);
}

/* Ordem no cartão (a tabela de Problemas tem outra ordem de colunas) */
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo^="Situa"] { order: 0; }
/* Data e valor dividem a 1ª linha: o valor fica com a largura dele (nunca cortado) e a data com o resto; a hora longa
   ("AM · madrugada") quebra dentro da data. Só se sobrarem menos de 7rem para a data o valor desce. */
html.modo-celular #tab-cartorio .cartorio-table td:is([data-rotulo="Data/Hora"], [data-rotulo="Data"]) { order: 1; flex: 1 1 0; min-width: 7rem; font-size: 0.85rem; color: var(--text-secondary); }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Valor"] { order: 2; flex: 0 0 auto; max-width: 100%; margin-left: auto; text-align: right; white-space: nowrap; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo^="Conta"] { order: 3; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo^="Descri"] { order: 4; }
html.modo-celular #tab-cartorio .cartorio-table td:is([data-rotulo="Pagador"], [data-rotulo="Tipo"]) { order: 5; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="ID Pix"] { order: 6; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Comprovante"] { order: 7; }
html.modo-celular #tab-cartorio .cartorio-table td.cartorio-acoes { order: 8; }

/* Situação (Problemas): o selo sozinho na primeira linha */
html.modo-celular #tab-cartorio .cartorio-table .badge-status { font-size: 0.75rem; white-space: normal; }

/* Data e hora numa linha: "06/10 ⏰ 19:05 PM" */
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Data/Hora"] br { display: none; }
html.modo-celular #tab-cartorio .cartorio-table td:is([data-rotulo="Data/Hora"], [data-rotulo="Data"]) strong { margin-right: 6px; font-size: 1.05rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Data/Hora"] small { font-size: 0.85rem; font-variant-numeric: tabular-nums; }
html.modo-celular #tab-cartorio .hora-ampm { font-size: 0.75rem; }

/* Valor grande à direita; a "parte 1 de 2" logo abaixo */
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Valor"] { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
html.modo-celular #tab-cartorio .cartorio-table .cart-parte { display: inline-block; max-width: 9rem; margin-top: 4px; padding: 2px 8px; font-size: 0.75rem; font-weight: 600; white-space: normal; overflow-wrap: normal; text-wrap: balance; text-align: right; }

/* Gerente (conta) e mês na mesma linha */
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo^="Conta"] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo^="Conta"] br { display: none; }
html.modo-celular #tab-cartorio .cartorio-table .chip-dividendo { display: inline-block; padding: 3px 8px; font-size: 0.82rem; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo^="Conta"] small { font-size: 0.8rem; }

/* Descrição e pagador */
html.modo-celular #tab-cartorio .bm-dest-tag { font-size: 0.75rem; }
html.modo-celular #tab-cartorio .tag-manual { font-size: 0.75rem; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Pagador"] .text-strong { font-weight: 700; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Pagador"] small { display: block; font-size: 0.75rem; line-height: 1.35; }
html.modo-celular #tab-cartorio .cartorio-table .chip-banco { display: inline-block; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Pagador"] .chip-banco { font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Tipo"] .chip-banco { padding: 2px 6px; font-size: 0.78rem; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="ID Pix"] small,
html.modo-celular #tab-cartorio .cart-id-sugestao { font-size: 0.75rem; }

/* Comprovante: botão da foto à esquerda; ID do Pix e de onde veio à direita, um embaixo do outro */
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Comprovante"] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 10px; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Comprovante"] > br { display: none; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Comprovante"] > * { grid-column: 1 / -1; justify-self: start; max-width: 100%; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Comprovante"] > .btn-thumb-preview { grid-column: 1; grid-row: 1 / span 3; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Comprovante"] > .btn-thumb-preview ~ * { grid-column: 2; }
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Comprovante"] small,
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Comprovante"] .text-xs,
html.modo-celular #tab-cartorio .cart-foto-nao-coube { font-size: 0.75rem; line-height: 1.35; }
html.modo-celular #tab-cartorio .cartorio-table .cart-chip-auto { margin-top: 2px; font-size: 0.75rem; }
html.modo-celular #tab-cartorio .code-id-pix { display: inline-block; max-width: 100%; padding: 2px 6px; font-size: 0.75rem; line-height: 1.4; overflow-wrap: anywhere; }
html.modo-celular #tab-cartorio .btn-thumb-preview {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 64px; min-height: 44px; padding: 0 14px;
  border-radius: 10px; border: 1px solid rgba(59, 130, 246, 0.5); background: rgba(59, 130, 246, 0.14);
  color: var(--text-primary); font-size: 0.88rem; font-weight: 700; white-space: nowrap;
}

/* Ações: Linha, Corrigir (e Desfazer) e a lixeira numa fileira, todos com 44 px de altura */
html.modo-celular #tab-cartorio .cartorio-table td.cartorio-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; white-space: normal; }
html.modo-celular #tab-cartorio .cartorio-acoes .btn-micro-action { flex: 1 1 auto; max-width: 12rem; min-height: 44px; margin: 0; }
html.modo-celular #tab-cartorio .btn-table-del {
  flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; width: 48px; min-height: 44px; padding: 0;
  border-radius: 10px; border: 1px solid rgba(244, 63, 94, 0.4); background: rgba(244, 63, 94, 0.08); font-size: 1.05rem; opacity: 1;
}
/* Em mãos: um botão só ("Linha") cabe ao lado do Tipo, sem gastar uma linha inteira */
html.modo-celular #tab-cartorio .cartorio-table td[data-rotulo="Tipo"] { flex: 1 1 0; }
html.modo-celular #tab-cartorio .cartorio-table td.cartorio-acoes:has(> .btn-micro-action:only-child) { flex: 0 0 auto; }
/* Linha de aviso vazia ("Nenhum pagamento…") dentro da lista */
html.modo-celular #tab-cartorio .cartorio-table td.text-center { padding: 1.25rem 0.5rem; text-align: center; }

/* ---------- Falta comprovar / Histórico: grupos por conta ---------- */
html.modo-celular #tab-cartorio .cart-grupos { gap: 10px; }
html.modo-celular #tab-cartorio .cart-grupo { border-radius: 14px; }
html.modo-celular #tab-cartorio .cart-grupo-topo { flex-wrap: wrap; align-items: center; gap: 8px; min-height: 48px; padding: 10px 12px; }
html.modo-celular #tab-cartorio .cart-grupo-id { flex: 1 1 200px; gap: 8px; }
html.modo-celular #tab-cartorio .cart-grupo-id strong { font-size: 0.95rem; }
html.modo-celular #tab-cartorio .cart-grupo-id small { font-size: 0.75rem; line-height: 1.35; }
html.modo-celular #tab-cartorio .cart-cod { padding: 3px 6px; font-size: 0.8rem; }
/* Seta à direita na mesma linha do nome; o "Anexar comprovante" desce e ocupa a largura */
html.modo-celular #tab-cartorio .cart-grupo-dir { flex: 1 0 auto; width: auto; justify-content: flex-end; gap: 10px; }
html.modo-celular #tab-cartorio .btn-cart-anexar { flex: 1 1 auto; width: auto; min-height: 44px; font-size: 0.88rem; }
html.modo-celular #tab-cartorio .cart-seta { font-size: 1rem; }
/* Cada linha: data e hora | valor em cima; descrição | botões embaixo */
html.modo-celular #tab-cartorio .cart-linha {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "data valor" "desc acoes";
  align-items: center; gap: 6px 10px; padding: 10px 12px; font-size: 0.88rem;
}
html.modo-celular #tab-cartorio .cl-data { grid-area: data; }
html.modo-celular #tab-cartorio .cl-data small { display: inline; margin-left: 6px; font-size: 0.8rem; }
html.modo-celular #tab-cartorio .cl-valor { grid-area: valor; text-align: right; }
html.modo-celular #tab-cartorio .cl-desc { grid-area: desc; font-size: 0.85rem; }
html.modo-celular #tab-cartorio .cl-acoes { grid-area: acoes; display: flex; gap: 6px; justify-content: flex-end; }
html.modo-celular #tab-cartorio .cl-acoes .btn-micro-action { padding: 0 10px; }

/* ---------- "📅 O dia" (busca por data) ---------- */
html.modo-celular #tab-cartorio .cart-dia-chip { min-height: 44px; width: 100%; font-size: 0.88rem; }
html.modo-celular #tab-cartorio .cart-dia { padding: 10px; }
html.modo-celular #tab-cartorio .cart-dia-cab h4 { font-size: 0.95rem; }
html.modo-celular #tab-cartorio .cart-dia-sair { min-height: 40px; padding: 0 14px; }
html.modo-celular #tab-cartorio .cart-dia-linha { gap: 6px 8px; padding: 8px 10px; }
html.modo-celular #tab-cartorio .cart-dia-acoes { gap: 6px; margin-left: 0; }
html.modo-celular #tab-cartorio .cart-dia-nota, html.modo-celular #tab-cartorio .cart-dia-txt { font-size: 0.8rem; }

/* ---------- Zona de perigo: o título e os 2 botões com tamanho de dedo ---------- */
html.modo-celular #tab-cartorio .zona-perigo summary { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 12px; font-size: 0.85rem; }
html.modo-celular #tab-cartorio .zona-perigo-corpo .cartorio-actions { flex-direction: column; }
html.modo-celular #tab-cartorio .zona-perigo-corpo .btn-cartorio-action { width: 100%; }

/* Nenhuma letra abaixo de 12 px nesta aba */
html.modo-celular #tab-cartorio small { font-size: 0.75rem; }

/* Foco visível nos botões novos (teclado / leitor de tela) */
html.modo-celular #tab-cartorio .btn-micro-action:focus-visible,
html.modo-celular #tab-cartorio .btn-thumb-preview:focus-visible,
html.modo-celular #tab-cartorio .btn-table-del:focus-visible,
html.modo-celular #tab-cartorio .pill-btn:focus-visible { outline: 2px solid var(--emerald-400); outline-offset: 2px; }

/* ---------- Tema claro: verdes e cinzas fortes demais no branco ---------- */
html.modo-celular body.theme-light #tab-cartorio .cartorio-table .text-emerald-400,
html.modo-celular body.theme-light #tab-cartorio .chip-dividendo,
html.modo-celular body.theme-light #tab-cartorio .pill-btn.active,
html.modo-celular body.theme-light #tab-cartorio .cl-valor { color: #047857; }
html.modo-celular body.theme-light #tab-cartorio .chip-dividendo { background: rgba(16, 185, 129, 0.12); }
html.modo-celular body.theme-light #tab-cartorio .cartorio-table .cart-parte { background: rgba(15, 23, 42, 0.05); }
html.modo-celular body.theme-light #tab-cartorio .code-id-pix { background: rgba(15, 23, 42, 0.06); color: #475569; }
html.modo-celular body.theme-light #tab-cartorio .btn-micro-action { border-color: rgba(15, 23, 42, 0.14); background: #f8fafc; }
html.modo-celular body.theme-light #tab-cartorio .btn-thumb-preview { border-color: rgba(37, 99, 235, 0.45); background: rgba(59, 130, 246, 0.1); color: #1e3a8a; }
html.modo-celular body.theme-light #tab-cartorio .btn-table-del { border-color: rgba(190, 18, 60, 0.35); background: rgba(244, 63, 94, 0.06); }
html.modo-celular body.theme-light #tab-cartorio .cartorio-table tr { border-color: rgba(15, 23, 42, 0.1); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }