— clientes/procedimentos/fichas/bloqueios/
pacotes/financeiro/overview. Cada | marca seu rótulo com
data-label no HTML gerado em dashboard/js/tabs/*.js; aqui só o CSS
lê esse atributo, nenhuma tabela precisa de markup diferente por
aba. Nenhuma coluna é removida — só reorganizada: rótulo à esquerda,
valor à direita, uma "linha" de tabela vira um card. */
table.responsive-stack { border: none; }
table.responsive-stack thead { display: none; }
table.responsive-stack,
table.responsive-stack tbody,
table.responsive-stack tr,
table.responsive-stack td { display: block; width: 100%; }
table.responsive-stack tr {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 12px 14px;
margin-bottom: 10px;
}
table.responsive-stack tbody tr:last-child { margin-bottom: 0; }
table.responsive-stack tbody tr:hover td { background: none; } /* hover de mouse não faz sentido em card de toque */
table.responsive-stack td {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 7px 0;
border-bottom: 1px dashed var(--border);
font-size: 12.5px;
text-align: right;
/* valores longos sem espaço (token de anamnese, e-mail comprido) não
tinham onde quebrar e estouravam a largura do card — anywhere
também vale pro min-content do item flex, não só pro overflow */
overflow-wrap: anywhere;
}
table.responsive-stack td:last-child { border-bottom: none; }
table.responsive-stack td[data-label]::before {
content: attr(data-label);
font-weight: 600;
color: var(--text-2);
text-align: left;
flex-shrink: 0;
padding-right: 10px;
}
/* linha sem rótulo (ex: "Nenhum resultado encontrado" com colspan) —
cai no fluxo normal, sem virar um par rótulo/valor quebrado */
table.responsive-stack td:not([data-label]) { display: block; text-align: left; }
/* célula de ações (marcada manualmente com .col-acoes em cada tabela)
— empilha os botões em largura total, alvo de toque ≥44px, em vez
de ficarem lado a lado e cortados fora da viewport */
table.responsive-stack td.col-acoes {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding-top: 10px;
text-align: left;
}
table.responsive-stack td.col-acoes::before { content: none; }
table.responsive-stack td.col-acoes > * { width: 100%; min-height: 44px; }
/* ---------- cabeçalho: título trunca em vez de quebrar linha e brigar
com o sino (min-width:0 é o que permite um item de flex encolher
abaixo do texto inteiro — mesmo caso da landing pública). Saudação
cede o lugar em tela estreita; sino com contador continua sempre
visível. */
#tab-title {
font-size: 17px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar-right { flex-shrink: 0; }
#greeting-text { display: none; }
/* ---------- date/time nativos (Bloquear Agenda e qualquer outro
formulário) — maiores e com alvo de toque melhor; o picker vazio
do Chrome Android já é assim por padrão do navegador (não é bug),
isso só evita que pareça um campo quebrado. */
input[type="date"], input[type="time"] {
min-height: 44px;
font-size: 14px;
}
/* ---------- Configurações: e-mail de contato pode ser bem comprido
(ex: "tm.esteticaavancadaintegrada@gmail.com") — no padding/font-size
padrão do input genérico (13px, 8px 10px), estourava a largura do
card em ~390px. Reduz só o suficiente pra caber inteiro sem rolagem
interna, sem mudar os outros campos do sistema. */
#form-email input[name="email"] {
font-size: 12px;
padding: 8px 8px;
}
/* ---------- kanban de Sessões: navegação por status em vez de 5
colunas lado a lado com scroll horizontal (dashboard/js/tabs/
agendamentos.js gera os chips em #kanban-status-tabs e marca a
coluna ativa com .kanban-col-ativo-mobile — aqui só o CSS decide
mostrar 1 coluna por vez, em largura total). Acima de 860px nada
disso existe: #kanban-status-tabs seguiria escondido e o grid de 5
colunas é o de sempre (regra base, fora deste media query). */
#kanban-status-tabs {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
margin-bottom: 12px;
}
.kanban { grid-template-columns: 1fr; overflow-x: visible; }
.kanban-col { display: none; }
.kanban-col.kanban-col-ativo-mobile { display: flex; }
/* ações do card em largura total, alvo de toque ≥44px — mesmo
critério do padrão tabela→card acima, mesmo motivo (Confirmar/Sinal
pago/Registrar pagamento/WhatsApp ficavam cortados fora da tela) */
.kanban-card .acoes { flex-direction: column; align-items: stretch; }
.kanban-card .acoes > * { width: 100%; min-height: 44px; text-align: center; }
}
/* =====================================================================
KPIs em 2 colunas até 860px (era só 641–860px "tablet"; estendido pra
baixo de 640px também — um celular de ~390px empilhando 4 a 9 KPIs em
coluna única (Visão Geral/Financeiro) gerava um scroll vertical bem
maior que o necessário, com metade da largura da tela sobrando ao lado
de cada card. O breakpoint de NAVEGAÇÃO continua em 860px (sidebar/
bottom-nav não mudam) — isto é só sobre quantas colunas de KPI cabem.
===================================================================== */
@media (max-width: 860px) {
.kpi-row { flex-direction: row; flex-wrap: wrap; }
.kpi { flex: 1 1 calc(50% - 8px); min-width: 0; }
}
/* Barra/drawer mobile nunca aparecem acima de 860px, mesmo que o JS já tenha montado o conteúdo. */
@media (min-width: 861px) {
.bottom-nav,
.mais-overlay,
.mais-drawer {
display: none !important;
}
}
/* =====================================================================
Banner de notificações push (dashboard/js/push.js) — persistente
enquanto não estiver "tudo certo" (não é toast de uma vez só).
===================================================================== */
.push-banner {
position: relative;
margin: 0 0 20px;
padding: 14px 40px 14px 16px;
border-radius: var(--radius);
border: 1px solid var(--border);
font-size: 12.5px;
line-height: 1.5;
}
.push-banner-title { font-weight: 700; margin-bottom: 4px; }
.push-banner-body ol { margin: 6px 0 0; padding-left: 18px; }
.push-banner-body li { margin-bottom: 2px; }
.push-banner button.btn-primary { margin-top: 10px; }
/* "x" de fechar — dispensa persiste por tenant+usuário (ver push.js);
só volta a aparecer se as notificações forem desativadas de novo. */
.push-banner-close {
position: absolute;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: var(--radius-xs);
font-size: 16px;
line-height: 1;
color: inherit;
opacity: 0.6;
cursor: pointer;
padding: 0;
}
.push-banner-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
.push-banner-warn {
background: var(--warning-light);
border-color: rgba(176, 106, 32, 0.3);
color: var(--warning);
}
.push-banner-info {
background: var(--info-light);
border-color: rgba(42, 122, 138, 0.3);
color: var(--info);
}
.push-banner-muted {
background: var(--surface-2);
border-color: var(--border-2);
color: var(--text-2);
}
|