e data-rotulo por | . */
@media (max-width:640px){
.tabela-cartoes thead{display:none;}
.tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td{display:block;width:100%;}
.tabela-cartoes tr{margin-bottom:10px;padding:10px 12px;border:1px solid var(--borda-suave);border-radius:12px;background:var(--card);}
.tabela-cartoes tfoot tr{background:var(--verde-tinta)!important;}
/* flex-wrap:wrap (achado da jornada Patrimônio, rótulo longo + valor
numa linha só podia estourar a largura do cartão em telas de 390px
mesmo com o texto empilhado); só entra em ação quando rótulo+valor
não cabem lado a lado, nunca muda o layout de uma linha que já
cabia. */
.tabela-cartoes td{display:flex!important;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:4px 0!important;text-align:right;border:0!important;white-space:normal!important;}
/* Rótulo do cartão em #5c5f54, não var(--neutro) (#8a8d83, 3,38:1
sobre branco): mesmo achado e mesma correção das demais regras
desta jornada, aqui na peça reaproveitável que vira tabela larga em
cartão empilhado no celular. */
.tabela-cartoes td::before{content:attr(data-rotulo);font-weight:600;color:#5c5f54;text-align:left;white-space:normal;}
}
/* Célula de Ações com vários botões (ex.: Caixa de Entrada — Confirmar/
Editar/Descartar): no desktop os botões ficam lado a lado, compactos;
em cartão empilhado (.tabela-cartoes, abaixo de 640px) eles ficam em
linha cheia, um embaixo do outro, cada um com alvo de toque de 44px,
em vez de espremidos lado a lado numa célula estreita. */
.acoes-pend{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
@media (max-width:640px){
.tabela-cartoes td[data-rotulo="Ações"]{display:block!important;text-align:left;}
.tabela-cartoes td[data-rotulo="Ações"]::before{display:block;margin-bottom:8px;}
.tabela-cartoes .acoes-pend{display:flex;flex-direction:column;gap:8px;}
.tabela-cartoes .acoes-pend button{width:100%;}
}
/* ── Login: texto de exemplo (placeholder) legível ───────
O placeholder padrão do navegador fica claro demais sobre
fundo branco (abaixo de 4,5:1); é a única pista de formato
nos campos de e-mail e senha antes de o produtor digitar. */
#login-email::placeholder,
#login-senha::placeholder,
#cad-conta::placeholder,
#cad-email::placeholder,
#cad-senha::placeholder,
#senha-nova::placeholder,
#senha-repita::placeholder{
color:#4b5563;
opacity:1;
}
/* ── Modal genérico (js/modal.js): mesmo ajuste no placeholder dos
campos de formulário — o cinza padrão do Preflight do Tailwind
(#9CA3AF) mede 2,54:1 sobre fundo branco, abaixo do mínimo de 4,5:1
(Gauntlet de UX, jornada "lançar dinheiro"). Todo campo do modal
genérico recebe id="agro-f-" (ver modal.js). */
[id^="agro-f-"]::placeholder{
color:#4b5563;
opacity:1;
}
/* ── Qualquer campo de telefone do app: mesmo ajuste, generalizado
por tipo em vez de id — é o terceiro lugar onde o cinza padrão do
Preflight (#9CA3AF, 2,54:1 sobre branco) reprova o veto de
contraste do auditor (mínimo 4,5:1). Cobre js/sections/canais.js
(campo de telefone do Telegram/WhatsApp) e qualquer campo type="tel"
futuro, sem precisar repetir o mesmo ajuste por id de novo. */
input[type="tel"]::placeholder{
color:#4b5563;
opacity:1;
}
|