`: CSS não lê
o conteúdo de outro elemento, e repetir o nome da coluna em cada `| ` do
PHP seria a mesma regra espalhada por 45 arquivos, com outro nome.
--------------------------------------------------------------- */
/* A linha de fecho de uma tabela de conta — o total do relatório de
comissões é o primeiro caso. Fica no `tbody` de propósito: é de lá que o
`app.js` faz o cartão do celular, com o nome da coluna ao lado do valor. */
.tabela__total > th,
.tabela__total > td {
border-top: 2px solid var(--cinza);
background: var(--cinza-claro);
font-weight: 600;
}
/* Fora do celular o invólucro do valor não existe para o layout: `contents`
faz a célula continuar sendo exatamente o que ela era antes do JS passar. */
.tabela__valor { display: contents; }
@media (max-width: 720px) {
/* A rolagem lateral era o problema — aqui ela deixa de existir. */
.tabela-rolagem { overflow-x: visible; }
.tabela,
.tabela tbody,
.tabela tr,
.tabela td { display: block; width: auto; }
/* O cabeçalho vira o rótulo de cada célula, então some da tela — mas não
do leitor de tela, que continua precisando dele para anunciar a coluna.
`display: none` o tiraria dos dois. */
.tabela thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.tabela tbody tr {
margin: 0 0 10px;
border: 1px solid var(--cinza);
border-radius: var(--raio);
background: var(--superficie);
overflow: hidden;
}
.tabela tbody tr:last-child { margin-bottom: 0; }
.tabela tbody td {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 8px 12px;
border-bottom: 1px solid var(--cinza-claro);
text-align: right;
/* `sem-quebra` existe para o valor não partir no meio da LINHA. No
cartão não há linha para caber: mantê-lo faria a data escapar pela
direita, que é justamente o defeito que este bloco veio consertar. */
white-space: normal;
overflow-wrap: anywhere;
}
.tabela tbody td:last-child { border-bottom: 0; }
/* Célula sem nada dentro não vira linha do cartão: "Vendedor:" seguido de
vazio é ruído que empurra o que importa para baixo. */
.tabela tbody td[data-vazio] { display: none; }
.tabela tbody td[data-rotulo]::before {
content: attr(data-rotulo);
flex: 0 0 auto;
max-width: 45%;
font-size: .74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--texto-suave);
text-align: left;
}
.tabela__valor {
display: block;
min-width: 0;
text-align: right;
}
/* Célula que já ocupava a linha inteira (lista vazia, aviso) continua
ocupando, e sem rótulo nenhum. */
.tabela tbody td[colspan],
.tabela tbody td[colspan] .tabela__valor { text-align: center; }
/* A coluna de ações vira o rodapé do cartão: os botões lado a lado, no
canto que o polegar alcança. */
.tabela tbody td.tabela__acoes {
justify-content: flex-end;
width: auto;
padding: 8px 12px;
background: var(--cinza-claro);
}
.tabela tbody td.tabela__acoes .tabela__valor {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 6px;
}
/* Alvo de toque: o ícone de 16px dentro de um botão apertado é acerto de
sorte no telefone. */
.tabela tbody td.tabela__acoes .btn--icone {
min-width: 38px;
min-height: 38px;
}
/* A grade de permissões é o caso de fora da curva: as três colunas de
estado (herdado, extra, negada) são uma pergunta só, e viram três linhas
de cartão dizendo "◯" cada uma. Aqui elas voltam a ficar lado a lado. */
.grade-tags__tabela tbody tr {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.grade-tags__tabela tbody td { flex: 0 0 auto; border-bottom: 0; }
.grade-tags__tabela tbody td:first-child {
flex: 1 0 100%;
border-bottom: 1px solid var(--cinza-claro);
}
.grade-tags__tabela tbody td[data-rotulo]::before {
max-width: none;
font-size: .68rem;
}
.grade-tags__tabela tbody td,
.grade-tags__tabela tbody td .tabela__valor { text-align: left; }
.grade-tags__atalhos { flex-wrap: wrap; }
}
/* ---------------------------------------------------------------
O que mais estourava a largura no celular, fora as tabelas
--------------------------------------------------------------- */
@media (max-width: 720px) {
/* Três botões de rótulo longo no cabeçalho não cabem em 360px, e sem
quebra o último sai pela direita levando a página junto. */
.pagina__acoes { flex-wrap: wrap; }
/* O rodapé da folha punha observação e totais lado a lado, com os totais
travados em 260px: em tela estreita a soma do pedido — que é o que o
cliente abre o link para ver — ficava fora da tela. */
.folha__rodape { flex-direction: column; gap: 16px; }
.folha__totais { width: 100%; flex: 1 1 auto; }
/* Os itens da folha pública viram cartão pelo mesmo motivo das listas do
painel. O rótulo aqui vem do próprio HTML (`data-rotulo` em
publico/documentos.php): esta página não carrega o app.js. */
.folha__itens,
.folha__itens tbody,
.folha__itens tr,
.folha__itens td { display: block; width: auto; }
.folha__itens thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.folha__itens tbody tr {
margin-bottom: 10px;
border: 1px solid var(--cinza);
border-radius: var(--raio);
overflow: hidden;
}
.folha__itens tbody td {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 6px 10px;
border-bottom: 1px solid var(--cinza-claro);
text-align: right;
white-space: normal;
overflow-wrap: anywhere;
}
.folha__itens tbody td:last-child { border-bottom: 0; }
.folha__itens tbody td[data-rotulo]::before {
content: attr(data-rotulo);
flex: 0 0 auto;
max-width: 45%;
text-align: left;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--texto-suave);
}
/* "Nenhum item." atravessa as oito colunas: sem rótulo e no meio. */
.folha__itens tbody td[colspan] { text-align: center; }
}
/* ---------------------------------------------------------------
Catálogo de personalizadas — 12/09/2026
(docs/41-catalogo-de-personalizadas.md)
O caderno do cliente em cartões: foto à esquerda, os dados do lado, como
na página do caderno. Uma coluna no celular, duas quando cabe.
--------------------------------------------------------------- */
.personalizadas-grade {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 14px;
margin-top: 14px;
}
.personalizada {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-areas: "foto corpo" "acoes acoes";
gap: 10px 14px;
padding: 12px;
border: 1px solid var(--cinza);
border-radius: var(--raio);
background: var(--fundo);
box-shadow: var(--sombra);
}
.personalizada--inativa { opacity: .6; }
.personalizada__foto { grid-area: foto; }
.personalizada__foto img,
.personalizada__sem-foto {
display: block;
width: 120px;
height: 120px;
object-fit: cover;
border-radius: var(--raio);
background: var(--cinza-claro);
}
.personalizada__sem-foto {
display: flex;
align-items: center;
justify-content: center;
color: var(--texto-suave);
font-size: .85rem;
}
.personalizada__corpo { grid-area: corpo; min-width: 0; }
.personalizada__titulo { margin: 0 0 4px; font-size: 1.02rem; }
.personalizada__linha { margin: 0 0 4px; font-size: .9rem; }
.personalizada__obs {
margin: 6px 0 0;
padding: 6px 8px;
border-left: 3px solid var(--cinza);
font-size: .88rem;
color: var(--texto-suave);
white-space: pre-line;
}
.personalizada__acoes {
grid-area: acoes;
display: flex;
gap: 6px;
flex-wrap: wrap;
border-top: 1px solid var(--cinza-claro);
padding-top: 8px;
}
.personalizada__acoes form { margin: 0; }
@media (max-width: 480px) {
.personalizadas-grade { grid-template-columns: 1fr; }
}
/* -----------------------------------------------------------------
Contatos do cliente: e-mails e telefones de sobra (docs/47)
Mesma família visual das variações do produto — linha em caixa, X no fim.
----------------------------------------------------------------- */
.contatos { margin-bottom: 18px; }
.contatos__linhas { display: flex; flex-direction: column; gap: 8px; }
.contatos__linhas:empty { display: none; }
.contatos__linha {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border: 1px solid var(--cinza);
border-radius: var(--raio);
background: var(--fundo);
}
.contatos__valor { flex: 2 1 220px; min-width: 0; }
.contatos__rotulo { flex: 1 1 160px; min-width: 0; }
.contatos__linha .btn { flex: 0 0 auto; white-space: nowrap; }
.contatos__linha .btn--icone { font-size: 1.2rem; line-height: 1; }
.contatos__linha .btn--icone:hover { color: var(--erro); border-color: var(--erro); }
@media (max-width: 600px) {
.contatos__linha { flex-wrap: wrap; }
.contatos__valor, .contatos__rotulo { flex: 1 0 100%; }
}
/* -----------------------------------------------------------------
Modal "para qual e-mail?" — pedido, nota e boleto (docs/47)
----------------------------------------------------------------- */
.envio-email { display: flex; flex-direction: column; gap: 6px; text-align: left; margin: 4px 0 0; }
.envio-email__texto { margin: 0 0 10px; }
.envio-email__opcao {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border: 1px solid var(--cinza);
border-radius: var(--raio);
cursor: pointer;
}
.envio-email__opcao:has(input:checked) { border-color: var(--azul); background: var(--azul-suave, #E8EFFB); }
.envio-email__valor { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.envio-email__marca { font-weight: 700; color: var(--azul); }
.envio-email__rotulo { color: var(--texto-suave, #5A6672); }
.envio-email__outro.swal2-input { width: 100%; margin: 4px 0 0; box-sizing: border-box; }
.envio-email__ajuda { margin: 12px 0 0; font-size: .85rem; color: var(--texto-suave, #5A6672); text-align: left; }
/* Envio de e-mail que falhou (tela do Desenvolvedor, migration 084): a linha
inteira avisa, porque é ela que a pessoa veio procurar. */
.tabela tbody tr.linha--erro { background: var(--erro-fundo); }
.tabela tbody tr.linha--erro td:first-child { box-shadow: inset 3px 0 0 var(--erro); }
|