/* Gerado de /css/app-ajustes.css com a paleta do SeuCenoura (app/scripts/gerar-camada-sc.php). Nao editar: editar a original e gerar de novo. */
/* app-ajustes.css: 16/10/2026 (revisao 3 do app, F3, pergunta 2 do dono). FUSAO, na ordem exata da cascata
de antes, de quatro folhas que o index carregava uma atras da outra: app-deferred.css, app-revisao.css,
app-redesign.css e app-fixes.css (a camada final de correcoes). Mesma ordem e mesma pasta: nenhuma regra
mudou de lugar na cascata (prova: diff de pixel no relato RODADA-2026-10-15-APP-PACIENTE.md). O link desta
folha leva o id cssAncoraDeferred: o leitor de rotulos insere a folha dele ANTES dela, como antes.
Correcao nova entra no FIM deste arquivo (o papel que era do app-fixes.css). */
/* ===== origem: css/app-deferred.css ===== */
/* app-deferred.css: bundle de features secundarias extraidas em 2026-05-10.
Inclui: calc, chat, aval, onboarding, streak, agenda, plano, hidratacao.
Total: 257 regras. Carregado async (media=print onload). */
/* calc.css: extraido de app.css em 2026-05-10 (sprint 7-6).
40 regras. Carregado async (media=print onload). */
.calc-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }.calc-card {
background: var(--card); border: 1px solid var(--border); border-radius: 14px;
overflow: hidden; transition: box-shadow .2s;
}.calc-card.open { box-shadow: 0 6px 20px rgba(61, 96, 65,0.16); border-color: #3d6041; }.calc-card.open .calc-card-arrow { transform: rotate(180deg); }.calc-card.open .calc-card-body { max-height: 900px; }.calc-form {
padding: 8px 16px 16px;
display: flex; flex-direction: column; gap: 10px;
border-top: 1px solid var(--border);
}.calc-form label {
display: flex; flex-direction: column; gap: 5px;
font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
}.calc-form input, .calc-form select {
min-height: 44px; padding: 10px 12px;
border: 2px solid var(--border); border-radius: 10px; background: var(--bg);
font-size: 15px; font-family: inherit; color: var(--text); outline: none;
transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}.calc-form input:focus, .calc-form select:focus { border-color: #3d6041; background: var(--card); }.calc-result { margin-top: 8px; }.calc-destaque {
padding: 16px; border-radius: 12px; border: 2px solid #e2e8f0;
background: var(--bg); text-align: center;
}.calc-destaque-val { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }.calc-destaque-lbl { font-size: 13px; color: var(--text-secondary); margin-top: 4px; font-weight: 600; }.calc-extra {
margin-top: 10px; padding: 10px 12px; background: var(--bg);
border-radius: 10px; display: flex; flex-direction: column; gap: 6px;
}.calc-extra div { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary); }.calc-extra strong { color: var(--text); font-weight: 700; }.calc-hint {
display: block; font-size: 12px; color: var(--text-muted);
margin-top: 8px; font-style: italic; line-height: 1.4;
}.calc-aviso {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 14px; background: rgba(90,120,145,0.08); border-radius: 12px;
font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
}.calc-aviso i,.calc-aviso [data-lucide]{ color: #5a7891; margin-top: 2px; flex-shrink: 0; }.calc-card button,
.calc-card select,
.calc-card input { min-height: 44px; }.calc-card.open .calc-card-titulo { color: #3c493d; }.calc-card.open .calc-card-titulo { letter-spacing: -0.005em; }.calc-aviso {
border-left: 3px solid #5a7891;
background: rgba(90,120,145,0.06);
}.calc-section-title {
font-size: 15px;
font-weight: 700;
margin: 0 0 10px 4px;
color: var(--text, #0f172a);
display: flex;
align-items: center;
gap: 8px;
letter-spacing: -0.01em;
}.calc-section-title i,.calc-section-title [data-lucide]{ color: var(--accent); font-size: 14px; }
/* 2026-07-22: mesmo defeito das abas da Agenda (seletores nus dentro do media
de tema do SO). Guard html:not(.theme-light) + par html.theme-dark. */
@media (prefers-color-scheme: dark) {
html:not(.theme-light) .calc-card { background: var(--card); }
html:not(.theme-light) .calc-form input, html:not(.theme-light) .calc-form select { background: var(--bg); color: var(--text); }
html:not(.theme-light) .calc-destaque { background: var(--bg); border-color: var(--border); }
html:not(.theme-light) .calc-extra { background: var(--bg); }
html:not(.theme-light) .calc-aviso { background: rgba(90,120,145,0.14); }
}
html.theme-dark .calc-card { background: var(--card); }
html.theme-dark .calc-form input, html.theme-dark .calc-form select { background: var(--bg); color: var(--text); }
html.theme-dark .calc-destaque { background: var(--bg); border-color: var(--border); }
html.theme-dark .calc-extra { background: var(--bg); }
html.theme-dark .calc-aviso { background: rgba(90,120,145,0.14); }
/* chat.css: extraido de app.css em 2026-05-10 (sprint 7-6).
27 regras. Carregado async (media=print onload). */
.chat-container {
display: flex;
flex-direction: column;
/* Altura responsiva: max do viewport menos top/bottom nav reais.
svh = small viewport height (estavel quando teclado abre/fecha em mobile).
2026-05-09: usa --header-height (varia por breakpoint) em vez de 64px
hardcoded. Antes, em mobile com header 60px, a chat-container ficava
4px maior que o viewport e empurrava o composer ATRAS da bottom-nav. */
height: calc(100svh - var(--header-height, 64px) - var(--nav-height, 65px) - var(--safe-top) - var(--safe-bottom) - 8px);
min-height: clamp(280px, 55vh, 600px);
max-height: calc(100dvh - var(--header-height, 64px) - var(--nav-height, 65px) - var(--safe-bottom));
overflow: hidden;
}.chat-messages {
flex: 1; overflow-y: auto; padding: 16px;
display: flex; flex-direction: column; gap: 12px;
}.chat-msg {
max-width: 85%; padding: 12px 14px; border-radius: 16px;
font-size: 13px; line-height: 1.4; word-break: break-word;
}.chat-msg.enviada { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }.chat-msg.recebida { align-self: flex-start; background: var(--bg); color: var(--text); border-bottom-left-radius: 4px; }/* 03/09/2026: a hora da mensagem recebida media 3,50:1 no tema claro. A cor
ja vinha do token da bolha; a opacity .7 era um apagamento a mais em cima
dela. Em .9 mede 5,62:1 e continua secundaria. */
.chat-msg .time { font-size: 10px; opacity: 0.9; margin-top: 4px; display: block; }.chat-input-area {
/* 2026-05-14: aumenta padding lateral para dar respiro entre input/botao
e margem direita. Antes 14px ficava muito apertado em desktop. */
padding: 12px 18px calc(14px + var(--safe-bottom, 0px));
padding-left: max(18px, env(safe-area-inset-left, 0px));
padding-right: max(18px, env(safe-area-inset-right, 0px));
border-top: 1px solid var(--border);
background: var(--card);
/* Mantém o composer ancorado na base do .chat-thread (que ja tem flex-column) */
position: relative;
z-index: 1;
}.chat-tipo-label {
font-size: 11.5px;
font-weight: 700;
color: var(--text-secondary, #64748b);
letter-spacing: .03em;
text-transform: uppercase;
margin: 0 2px 6px;
}.chat-tipo-select {
display: flex;
gap: 6px;
margin-bottom: 10px;
flex-wrap: nowrap;
}.chat-input-row { display: flex; gap: 10px; align-items: flex-end; min-width: 0; }.chat-input-row .chat-input {
flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--border);
border-radius: 24px; font-size: 16px; font-family: inherit; line-height: 1.4;
resize: none; height: 44px; min-height: 44px; max-height: 120px; overflow-y: auto; background: var(--bg);
}.chat-input:focus { outline: none; border-color: var(--primary); background: var(--bg-white); }.chat-send {
width: 44px; height: 44px; background: var(--primary); border: none;
border-radius: 50%; color: #fff; font-size: 18px; cursor: pointer; flex-shrink: 0;
}.chat-msg.from-nutri {
position: relative;
padding-top: 12px;
min-width: min(220px, 80vw);
}.chat-msg-author {
position: static;
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700; color: #213423;
margin-bottom: 6px; min-width: 0;
}.chat-msg-author-name {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0; flex: 1;
}.chat-msg-author img {
width: 20px; height: 20px;
border-radius: 50%;
/* 2026-07-17 (auditoria contraste AA): ponta clara era #609165 = 3,66:1 com
branco (reprova). Agora #2f4a32 (5,06:1) -> #3d6041 (7,12:1). */
background: linear-gradient(135deg, #2f4a32, #213423);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 800;
object-fit: cover;
}.chat-msg-badge.urgente { background: #fee2e2; color: #991b1b; }.chat-msg-badge.agendamento { background: #e8eef2; color: #1f3854; }.chat-sidebar { display: none; }.chat-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* 2026-08-07 (relato do dono, iPhone): margin PROPRIA do separador de data
somava com o gap:12px de .chat-messages (flex-column) em vez de substituir
ele. Gap nao colapsa com margin em item de flex, entao o vao real era
12+14=26px acima e 12+8=20px abaixo, mais que o dobro do espaco entre duas
bolhas comuns (12px) e assimetrico entre os dois lados. Essa diferenca lia
como espaco vazio e inconsistente no meio da conversa. Reduzido para uma
folga simetrica e modesta por cima do gap ja existente (12+4=16px nos dois
lados). */
.chat-date-sep {
display: flex;
align-items: center;
text-align: center;
margin: 4px;
gap: 8px;
}.chat-date-sep::before,
.chat-date-sep::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-light, #e2e8f0);
}.chat-date-sep span {
font-size: 11px;
font-weight: 600;
color: var(--text-muted, #94a3b8);
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--bg-alt, #f1f5f9);
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}@media (min-width: 600px) {
.chat-msg.from-nutri { min-width: 280px; }
}/* aval.css: extraido de app.css em 2026-05-10 (sprint 7-6).
72 regras. Carregado async (media=print onload). */
.aval-full { font-size: 13px; line-height: 1.45; }.aval-hero {
background: linear-gradient(135deg, #213423 0%, #49594b 100%);
color: #fff;
border-radius: 18px;
padding: 18px 18px 16px;
margin-bottom: 14px;
box-shadow: 0 8px 24px rgba(33, 52, 35, 0.22);
position: relative;
overflow: hidden;
}.aval-hero::before {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 160px; height: 160px;
background: radial-gradient(circle, rgba(61, 96, 65, .4) 0%, transparent 70%);
pointer-events: none;
}.aval-hero-top {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 14px;
}.aval-hero-label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
opacity: 0.82;
}.aval-hero-data {
font-size: 12px; font-weight: 600;
background: rgba(255, 255, 255, 0.14);
padding: 5px 10px; border-radius: 99px;
display: inline-flex; align-items: center; gap: 5px;
backdrop-filter: blur(4px);
}.aval-hero-data i,.aval-hero-data [data-lucide]{ font-size: 10px; }.aval-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}.aval-kpi {
/* 2026-05-10: conteudo centralizado horizontal e vertical (era flex-start
a esquerda, dados ficavam desorganizados). Agora ico em cima centro,
valor abaixo centro, label abaixo centro. Visual mais limpo. */
display: flex; flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 12px 8px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.12);
min-height: 96px;
}.aval-kpi-ico {
width: 32px; height: 32px;
border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px; color: #fff;
margin: 0 auto 8px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.20);
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(2px);
}.aval-kpi-ico.peso, .aval-kpi-ico.imc, .aval-kpi-ico.gord, .aval-kpi-ico.magra { background: rgba(255, 255, 255, 0.20); }.aval-kpi-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
width: 100%;
}.aval-kpi-label {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
opacity: 0.85;
text-align: center;
order: 2;
}.aval-kpi-valor {
font-size: 19px; font-weight: 800;
line-height: 1.05; letter-spacing: -0.02em;
text-align: center;
order: 1;
}.aval-kpi-valor small {
font-size: 10px; font-weight: 600; opacity: 0.7; margin-left: 2px;
}.aval-compare-toggle-wrap { margin-bottom: 14px; }.aval-compare-toggle {
width: 100%;
display: flex; align-items: center; justify-content: space-between;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 12px 14px;
color: #1e293b;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
transition: background .15s, border-color .15s;
font-family: inherit;
}.aval-compare-toggle:hover, .aval-compare-toggle:focus-visible {
background: #f1f5f9;
border-color: #3d6041;
outline: none;
}.aval-compare-toggle i.fa-exchange-alt,.aval-compare-toggle [data-lucide].fa-exchange-alt{ color: #3d6041; margin-right: 6px; }.aval-compare-chevron { transition: transform .2s ease; color: #64748b; font-size: 11px; }.aval-compare-toggle[aria-expanded="true"] .aval-compare-chevron { transform: rotate(180deg); color: #3d6041; }.aval-compare-collapsed { display: none; }.aval-compare-open { display: block; margin-top: 10px; animation: avalCompareIn .2s ease-out; }.aval-compare {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 14px;
margin-bottom: 14px;
}.aval-compare-head h4 {
font-size: 12.5px; font-weight: 700; color: #0f172a;
margin: 0 0 10px; display: flex; align-items: center; gap: 6px;
}.aval-compare-head h4 i,.aval-compare-head h4 [data-lucide]{ color: #213423; font-size: 12px; }.aval-compare-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}.aval-compare-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 10px 8px;
display: flex; flex-direction: column; gap: 5px;
align-items: center; text-align: center;
}.aval-compare-lbl {
font-size: 10.5px; font-weight: 600; color: #64748b;
text-transform: uppercase; letter-spacing: 0.03em;
}.aval-delta {
display: inline-flex; align-items: center; gap: 4px;
font-size: 13px; font-weight: 800;
padding: 4px 10px; border-radius: 99px;
}.aval-delta i,.aval-delta [data-lucide]{ font-size: 10px; }.aval-delta.good { background: #f1f5f9; color: #213423; }.aval-delta.bad { background: #fee2e2; color: #b91c1c; }.aval-delta.neutral { background: #f1f5f9; color: #64748b; }.aval-compare-group { margin-top: 10px; }.aval-compare-group-title {
font-size: 11px; font-weight: 700; color: #213423;
text-transform: uppercase; letter-spacing: 0.04em;
margin-bottom: 6px; display: flex; align-items: center; gap: 5px;
}.aval-compare-group-title i,.aval-compare-group-title [data-lucide]{ font-size: 10px; }.aval-meta-head i,.aval-meta-head [data-lucide]{ font-size: 12px; opacity: 0.9; }.aval-compare-pdf-btn {
display: flex; align-items: center; justify-content: center;
gap: 8px; width: 100%;
padding: 11px 16px;
/* 2026-07-17 (auditoria contraste AA): ponta clara era #609165 = 3,66:1 com
branco (reprova). Agora #2f4a32 (5,06:1) -> #3d6041 (7,12:1). */
background: linear-gradient(135deg, #2f4a32, #213423);
color: #fff; border: none; border-radius: 12px;
font-size: 13.5px; font-weight: 700;
cursor: pointer; margin-bottom: 16px;
box-shadow: 0 4px 12px rgba(61, 96, 65, 0.28);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}.aval-compare-pdf-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(61, 96, 65, 0.38);
}.aval-compare-pdf-btn:active { transform: scale(0.98); }.aval-historico-titulo {
font-size: 13px; font-weight: 700; color: #0f172a;
display: flex; align-items: center; gap: 8px;
margin: 0 0 14px;
}.aval-historico-titulo i,.aval-historico-titulo [data-lucide]{ color: #213423; font-size: 12px; }.aval-timeline {
position: relative;
padding-left: 20px;
}.aval-timeline::before {
content: "";
position: absolute;
left: 7px; top: 12px; bottom: 12px;
width: 2px;
background: linear-gradient(180deg, #3d6041 0%, #cbd5e1 100%);
border-radius: 1px;
}.aval-timeline-item {
position: relative;
margin-bottom: 12px;
}.aval-timeline-item:last-child { margin-bottom: 0; }.aval-timeline-dot {
position: absolute;
left: -18px; top: 12px;
width: 12px; height: 12px;
background: #fff;
border: 3px solid #cbd5e1;
border-radius: 50%;
z-index: 1;
}.aval-timeline-item.latest .aval-timeline-dot {
border-color: #3d6041;
box-shadow: 0 0 0 4px rgba(61, 96, 65, 0.15);
}.aval-timeline-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}.aval-timeline-card:hover {
border-color: #3d6041;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}.aval-timeline-item.latest .aval-timeline-card {
border-color: #3d6041;
background: linear-gradient(135deg, #f1f5f9, #fff 40%);
}.aval-timeline-head {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 14px;
}.aval-timeline-data {
font-size: 13px; font-weight: 700; color: #0f172a;
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}.aval-badge-latest {
/* 2026-07-17 (auditoria contraste AA): 9,5px nao e texto grande, entao exige
4,5:1. Branco sobre #609165 dava 3,66:1; sobre #2f4a32 da 5,06:1. */
font-size: 9.5px; font-weight: 700;
background: #2f4a32; color: #fff;
padding: 2px 7px; border-radius: 99px;
text-transform: uppercase; letter-spacing: 0.04em;
}.aval-timeline-resumo {
font-size: 11.5px; color: #64748b; margin-top: 3px;
line-height: 1.35;
}.aval-chevron {
/* 2026-05-09: AA Large — era #94a3b8 (2.85:1) — agora #64748b (4.6:1). */
color: #64748b; font-size: 12px;
transition: transform 0.2s ease;
flex-shrink: 0;
}.aval-timeline-card.open .aval-chevron {
transform: rotate(180deg);
}.aval-acoes {
display: flex; gap: 6px; flex-wrap: wrap;
margin-top: 12px;
}.aval-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 8px 12px;
background: #f1f5f9; color: #334155;
border: none; border-radius: 8px;
font-size: 11.5px; font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
}.aval-btn:hover { background: #e2e8f0; }/* 2026-07-17 (auditoria contraste AA): #609165 -> #2f4a32 (3,66:1 -> 5,06:1) e
hover desce para #3d6041 (7,12:1) preservando o degrau de hover. */
.aval-btn.primary { background: #2f4a32; color: #fff; }.aval-btn.primary:hover { background: #213423; }@media (min-width: 1024px) {
.aval-hero {
max-width: 720px;
margin-left: auto;
margin-right: auto;
padding: 28px 32px 24px;
border-radius: 22px;
}
.aval-hero-top { margin-bottom: 22px; }
.aval-hero-label { font-size: 13px; }
.aval-kpis { gap: 14px; }
.aval-kpi { padding: 14px 12px; }
.aval-kpi-ico { width: 34px; height: 34px; font-size: 16px; }
}@media (max-width: 375px) {
.aval-kpis { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.aval-kpi-valor { font-size: 16px; }
}/* onboarding.css: extraido de app.css em 2026-05-10 (sprint 7-6).
14 regras. Carregado async (media=print onload). */
.onb-overlay {
position: fixed; inset: 0; z-index: var(--z-tooltip, 1300);
background: rgba(0,0,0,.75);
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}.onb-overlay.active { display: flex; }.onb-card {
/* 2026-05-10: tokens corretos (--card e --text) que existem nos :root.
Antes usava --surface que nao existe -> fallback #ffffff sempre = branco
no fundo branco em dark mode (texto invisivel reportado). */
background: var(--card, #ffffff);
color: var(--text, #0f172a);
max-width: 360px;
padding: 28px 24px;
border-radius: 20px;
text-align: center;
box-shadow: 0 22px 64px rgba(0,0,0,.5);
border: 1px solid var(--border, #e2e8f0);
animation: errPop .35s cubic-bezier(.2,.9,.3,1);
}.onb-step-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }.onb-step-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--border, #e2e8f0);
transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s;
}.onb-step-dot.active { background: #3d6041; width: 24px; border-radius: 4px; }.onb-illust {
font-size: 52px;
margin-bottom: 12px;
/* 2026-05-10: cor explicita para nao herdar branco/transparente em dark */
color: #3d6041;
}.onb-title {
font-size: 18px;
font-weight: 800;
margin: 0 0 8px;
color: var(--text, #0f172a);
}.onb-desc {
font-size: 14px;
color: var(--text-secondary, #475569);
line-height: 1.55;
margin: 0 0 20px;
}.onb-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; }.onb-skip {
background: transparent;
border: none;
color: var(--text-muted, #64748b);
font-size: 13px;
cursor: pointer;
padding: 10px;
}.onb-skip:hover { color: var(--text, #334155); }.onb-next {
padding: 11px 22px;
/* 2026-07-17 (auditoria contraste AA): ponta clara era #609165 = 3,66:1 com
branco (reprova). Agora #2f4a32 (5,06:1) -> #3d6041 (7,12:1). */
background: linear-gradient(135deg, #2f4a32, #213423);
color: #ffffff !important;
/* -webkit-text-fill-color e propriedade herdavel; o pai .onb-card forca
cor escura com !important que "vaza" para os descendentes via essa
propriedade. Forcamos branco aqui para o texto do botao Proximo
aparecer corretamente sobre o fundo verde brand em ambos os temas. */
-webkit-text-fill-color: #ffffff !important;
border: none;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
min-height: 42px;
display: inline-flex;
align-items: center;
gap: 6px;
}.onb-next * { -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; }/* streak.css: extraido de app.css em 2026-05-10 (sprint 7-6).
10 regras. Carregado async (media=print onload). */
.streak-celebration-overlay {
position: fixed; inset: 0; z-index: var(--z-toast, 1100);
background: rgba(15, 23, 42, .55);
backdrop-filter: blur(6px);
display: none;
align-items: center;
justify-content: center;
animation: errFadeIn .3s;
padding: 24px;
}.streak-celebration-overlay.active { display: flex; }.streak-celebration-card {
background: #ffffff;
color: #0f172a;
max-width: 360px;
width: 100%;
padding: 28px 24px 22px;
border-radius: 16px;
text-align: center;
box-shadow: 0 24px 60px rgba(15,23,42,.32), 0 0 0 1px rgba(15,23,42,.06);
position: relative;
animation: streakPop .35s cubic-bezier(.2,.9,.3,1);
border-top: 3px solid #3d6041;
}.streak-fire-big {
width: 56px; height: 56px;
margin: 0 auto 10px;
border-radius: 14px;
background: #f1f5f9;
color: #2f4a32;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
line-height: 1;
}.streak-number {
font-size: 42px;
font-weight: 800;
color: #2f4a32;
letter-spacing: -.02em;
line-height: 1;
margin-bottom: 4px;
}.streak-label {
font-size: 14.5px;
font-weight: 700;
color: #0f172a;
margin: 4px 0 8px;
letter-spacing: -.005em;
}.streak-msg {
font-size: 13px;
line-height: 1.55;
color: #475569;
margin-bottom: 18px;
}.streak-close {
/* 2026-07-17 (auditoria contraste AA): ponta clara era #609165 = 3,66:1 com
branco (reprova). Agora #2f4a32 (5,06:1) -> #3d6041 (7,12:1). */
background: linear-gradient(135deg, #2f4a32, #213423);
color: #fff;
border: none;
padding: 11px 26px;
border-radius: 10px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
min-height: 42px;
transition: filter .15s, transform .15s;
box-shadow: 0 4px 12px rgba(61, 96, 65,.28);
}.streak-close:hover { filter: brightness(0.95); transform: translateY(-1px); }.streak-close:active { transform: translateY(0); }/* agenda.css: extraido de app.css em 2026-05-10 (sprint 7-6).
23 regras. Carregado async (media=print onload). */
.agenda-item { padding: 14px; background: var(--bg); border-radius: 12px; margin-bottom: 10px; }.agenda-item.passado { opacity: 0.5; }.agenda-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }.agenda-date { font-size: 15px; font-weight: 600; }.agenda-tipo { font-size: 12px; color: var(--text-muted); }.agenda-actions {
display: flex; gap: 6px; margin-top: 10px; padding-top: 10px;
border-top: 1px dashed var(--border); flex-wrap: wrap;
}.agenda-btn {
flex: 1; min-width: 80px; padding: 10px; border-radius: 8px; border: none;
font-size: 13px; font-weight: 700; cursor: pointer;
letter-spacing: .01em;
display: flex; align-items: center; justify-content: center; gap: 6px;
text-decoration: none;
}.agenda-btn.confirm {
background: linear-gradient(135deg, #2f4a32, #213423);
color: #fff;
box-shadow: 0 2px 6px rgba(107, 131, 110,0.35);
}.agenda-btn.confirm:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(61, 96, 65,0.4); }.agenda-btn.confirm:disabled { opacity: 0.6; cursor: default; transform: none; }.agenda-btn.cancel {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
border: none;
box-shadow: 0 2px 6px rgba(239,68,68,0.3);
}.agenda-btn.cancel:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(239,68,68,0.4); }.agenda-btn.video { background: var(--info); color: #fff; }.agenda-btn.whatsapp { background: #25D366; color: #fff; }/* 2026-07-22 (homologacao Dr. Jayme, defeito 2): as abas Proximas/Anteriores
apareciam com as cores do modo escuro mesmo com o app em modo claro.
Causa raiz: o bloco @media (prefers-color-scheme: dark) no fim desta secao
usava seletores nus (.agenda-tabs / .agenda-tab-count), entao o tema do
SISTEMA operacional vencia a escolha manual do usuario (html.theme-light).
Correcao na origem: as regras abaixo passam a ler tokens de tema; os valores
escuros sao declarados uma unica vez, no escopo correto (html.theme-dark e
html:not(.theme-light) dentro do media). Sem !important. */
.agenda-tabs {
display: flex;
gap: 6px;
padding: 6px;
background: var(--agenda-tabs-bg, #f1f5f9);
border-radius: 12px;
margin-bottom: 16px;
}.agenda-tab {
flex: 1;
padding: 10px 12px;
border: none;
background: transparent;
color: var(--agenda-tab-fg, #64748b);
font-weight: 600;
font-size: 13px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: background .2s, color .2s, box-shadow .2s;
font-family: inherit;
}.agenda-tab:hover:not(.active) { background: var(--agenda-tab-hover-bg, rgba(255,255,255,.55)); color: var(--agenda-tab-hover-fg, #1e293b); }.agenda-tab.active {
/* 2026-07-17 (auditoria contraste AA): ponta clara era #609165 = 3,66:1 com
branco (reprova). Agora #2f4a32 (5,06:1) -> #3d6041 (7,12:1).
2026-05-09: o mesmo gradient brand vale nos dois temas (antes o escuro
usava #86C98C, emerald-300, fora da paleta SeuSaude). So a sombra muda. */
background: linear-gradient(135deg, #2f4a32, #213423);
color: #ffffff;
box-shadow: var(--agenda-tab-active-shadow, 0 2px 6px rgba(61, 96, 65, .28));
}.agenda-tab.active i,.agenda-tab.active [data-lucide]{ color: #ffffff; }.agenda-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
background: var(--agenda-count-bg, #e2e8f0);
color: var(--agenda-count-fg, #475569);
border-radius: 99px;
font-size: 11px;
font-weight: 700;
}.agenda-tab.active .agenda-tab-count {
background: var(--agenda-count-active-bg, rgba(255, 255, 255, .22));
color: #ffffff;
border: 1px solid var(--agenda-count-active-border, rgba(255, 255, 255, .35));
}.agenda-sub-title {
font-size: 12px;
font-weight: 700;
color: var(--agenda-sub-fg, #64748b);
text-transform: uppercase;
letter-spacing: .05em;
margin: 4px 0 12px;
}
/* Tokens do tema escuro da Agenda: declarados uma unica vez e reaproveitados
nos dois gatilhos de tema escuro do app.
1) html.theme-dark: o usuario escolheu "escuro" no app (vale mesmo com o SO
em claro, caso que o bloco antigo nao cobria);
2) @media (prefers-color-scheme: dark) + html:not(.theme-light): o usuario
esta em "automatico" e o SO esta escuro. O guard html:not(.theme-light) e
o padrao da casa (ver leitor-rotulos.css, 2026-05-19) e e exatamente o que
faltava aqui: sem ele, quem escolhia "claro" num aparelho com SO escuro
continuava vendo a barra de abas azul-marinho. */
html.theme-dark {
--agenda-tabs-bg: #1e293b;
--agenda-tab-fg: #94a3b8;
--agenda-tab-hover-bg: rgba(255,255,255,.08);
--agenda-tab-hover-fg: #f1f5f9;
--agenda-tab-active-shadow: 0 2px 6px rgba(0,0,0,.45);
--agenda-count-bg: #334155;
--agenda-count-fg: #cbd5e1;
--agenda-count-active-bg: rgba(255,255,255,.18);
--agenda-count-active-border: rgba(255,255,255,.30);
--agenda-sub-fg: #94a3b8;
}
@media (prefers-color-scheme: dark) {
html:not(.theme-light) {
--agenda-tabs-bg: #1e293b;
--agenda-tab-fg: #94a3b8;
--agenda-tab-hover-bg: rgba(255,255,255,.08);
--agenda-tab-hover-fg: #f1f5f9;
--agenda-tab-active-shadow: 0 2px 6px rgba(0,0,0,.45);
--agenda-count-bg: #334155;
--agenda-count-fg: #cbd5e1;
--agenda-count-active-bg: rgba(255,255,255,.18);
--agenda-count-active-border: rgba(255,255,255,.30);
--agenda-sub-fg: #94a3b8;
}
}/* plano.css: extraido de app.css em 2026-05-10 (sprint 7-6).
34 regras. Carregado async (media=print onload). */
.plano-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; background: var(--accent-light); color: #3c493d;
gap: 10px;
flex-wrap: wrap;
}.plano-info h4 { font-size: 14px; font-weight: 700; color: #3c493d; overflow: hidden; text-overflow: ellipsis; }.plano-info span { font-size: 11px; color: #213423; }.plano-calorias strong { font-weight: 800; }.plano-dia { display: none; }.plano-dia.active { display: block; }.plano-acoes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 12px 0 16px;
}.plano-acoes.plano-acoes-rodape {
gap: 6px;
margin: 0;
padding: 10px 12px;
border-top: 1px solid var(--border, #e2e8f0);
background: var(--bg, #f8fafc);
border-radius: 0 0 14px 14px;
}.plano-acoes.plano-acoes-rodape .plano-acao-btn {
padding: 8px 6px;
font-size: 12px;
min-height: 38px;
border-radius: 8px;
gap: 5px;
}.plano-acoes.plano-acoes-rodape .plano-acao-btn i,.plano-acoes.plano-acoes-rodape .plano-acao-btn [data-lucide]{ font-size: 13px; }.plano-acao-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 8px;
background: var(--bg-alt, #f1f5f9);
color: var(--text, #1e293b);
border: 1px solid var(--border, #e2e8f0);
border-radius: 10px;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, transform .1s ease;
-webkit-tap-highlight-color: transparent;
min-height: 44px; /* HIG iOS toque */
}.plano-acao-btn i,.plano-acao-btn [data-lucide]{ color: #3d6041; font-size: 14px; flex-shrink: 0; }.plano-acao-btn:hover { background: #f1f5f9; border-color: #b8e0bd; }.plano-acao-btn:active { transform: scale(0.97); }.plano-acao-btn:disabled { opacity: 0.55; cursor: wait; }.plano-acao-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.plano-meta-box {
background: rgba(61, 96, 65, 0.08);
border-left: 3px solid #3d6041;
padding: 10px 14px;
margin: 12px 0;
border-radius: 0 8px 8px 0;
font-size: 13.5px;
color: var(--text-secondary);
}.plano-meta-box strong { color: var(--text); font-weight: 700; }.plano-orient-box {
background: rgba(245,158,11,0.10);
border-left: 3px solid #d8b774;
padding: 10px 14px;
margin: 12px 0;
border-radius: 0 8px 8px 0;
font-size: 13px;
color: var(--text-secondary);
}.plano-orient-titulo {
display: block;
margin-bottom: 6px;
color: var(--text);
font-weight: 700;
}.plano-orient-titulo i,.plano-orient-titulo [data-lucide]{ color: #b45309; margin-right: 4px; }.plano-orient-lista { margin: 0; padding-left: 18px; }.plano-orient-lista li { margin-bottom: 4px; line-height: 1.5; }.plano-ver-todas {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: calc(100% - 28px);
margin: 4px 14px 12px;
padding: 12px 16px;
background: rgba(61, 96, 65, 0.10);
border: 1px dashed rgba(61, 96, 65, 0.45);
border-radius: 12px;
color: #2f4a32;
font-family: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
-webkit-tap-highlight-color: transparent;
}.plano-ver-todas:hover,
.plano-ver-todas:focus-visible {
background: rgba(61, 96, 65, 0.18);
border-style: solid;
border-color: #3d6041;
color: #374438;
outline: none;
}.plano-ver-todas .fa-arrow-right { font-size: 11px; }@media (max-width: 380px) {
.plano-header { padding: 12px 14px; }
.plano-info h4 { font-size: 13px; }
.plano-calorias { font-size: 12px; padding: 5px 10px; }
}@media (min-width: 1024px) {
.plano-header { padding: 18px 22px; }
.plano-info h4 { font-size: 16px; }
.plano-calorias { font-size: 14px; padding: 8px 16px; }
}@media (max-width: 380px) {
.plano-acoes.plano-acoes-rodape .plano-acao-btn { padding: 7px 4px; font-size: 11.5px; }
.plano-acoes.plano-acoes-rodape .plano-acao-btn i,
.plano-acoes.plano-acoes-rodape .plano-acao-btn [data-lucide]{ font-size: 12.5px; }
}@media (max-width: 380px) {
.plano-acao-btn { font-size: 11.5px; padding: 9px 6px; gap: 4px; }
.plano-acao-btn i,
.plano-acao-btn [data-lucide]{ font-size: 13px; }
}@media (min-width: 1024px) {
.plano-acoes { gap: 12px; margin: 16px 0 20px; }
.plano-acao-btn { padding: 12px 14px; font-size: 13.5px; }
}/* hidratacao.css: extraido de app.css em 2026-05-10 (sprint 7-6).
37 regras. Carregado async (media=print onload). */
.water-card {
background: linear-gradient(135deg, #e8eef2 0%, #f1f5f9 100%);
border: 1px solid #cbd5e1;
border-radius: 14px;
padding: 16px;
margin: 14px 0;
box-shadow: 0 2px 8px rgba(44, 71, 98, 0.08);
}.water-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}.water-title {
font-size: 15px;
font-weight: 700;
color: #172a3f;
display: flex;
align-items: center;
gap: 6px;
}.water-title i,.water-title [data-lucide]{ color: #3d5e7b; }.water-badge {
font-size: 12px;
font-weight: 600;
color: #2c4762;
background: rgba(255, 255, 255, 0.7);
padding: 4px 10px;
border-radius: 999px;
}.water-progress {
height: 10px;
background: rgba(255, 255, 255, 0.6);
border-radius: 999px;
overflow: hidden;
margin-bottom: 10px;
}.water-progress-bar {
height: 100%;
background: linear-gradient(90deg, #5a7891, #2c4762);
border-radius: 999px;
transition: width 0.4s ease;
}.water-stats {
display: flex;
justify-content: space-between;
gap: 6px;
font-size: 12px;
color: #334155;
margin-bottom: 10px;
flex-wrap: wrap;
}.water-actions { display: flex; gap: 8px; }.water-btn {
flex: 1;
padding: 10px 14px;
background: #2c4762;
color: #fff;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: transform 0.1s, background 0.2s;
}.water-btn:active { transform: scale(0.97); background: #1f3854; }.water-note {
margin-top: 8px;
font-size: 11px;
color: #475569;
font-style: italic;
}
/* 2026-05-14: bloco "hidratacao-counter/dots/mini/splash/btn-mini" removido.
Era da versao gamificada (renderHidratacaoGamificada), substituida pelo
card unico #alertaHidratacao. Reducao: ~89 linhas, ~2.4KB. */
@media(pointer:coarse){.aval-btn{min-height:40px}}
/* ===== origem: css/app-revisao.css ===== */
/* =====================================================================
app-revisao.css - Redesenho PROFUNDO do PWA do paciente (2026-05-28)
---------------------------------------------------------------------
Camada ADITIVA, carregada por ultimo no . Implementa o redesenho:
1. Tipografia profissional + leve : Plus Jakarta Sans + Inter (fallback)
+ JetBrains Mono em numerais tabulares.
2. Cards mais sutis (borda 1px + sombra leve, sem gradientes pesados).
3. Bottom-nav refinado (altura 64-68px, alvos >=44px, item ativo em
verde escuro com indicador 3px).
4. Header compacto e fino.
5. Botoes padronizados (>=44px em acoes importantes, raio 12px,
estados default/hover/active/focus/disabled consistentes).
6. Dark mode calibrado (#0a0e1b background, #1c2230 cards, bordas mais
sutis). Mantem paridade clara/escura em todo texto.
7. Estados de loading consistentes (skeleton/spinner) + estado vazio
amigavel + toast central 3s.
8. Micro-interacoes: scale .96 em :active, fade-in 180ms ao trocar
de view (.app-section.active).
9. Verde da marca consistente (usa tokens "--brand" prefixados; sem green ou emerald do Tailwind).
10. Ritmo de cards compacto no mobile (menos rolagem).
Reverter: comentar o de app-revisao.css no index.html.
===================================================================== */
/* =====================================================================
1. TIPOGRAFIA : Plus Jakarta Sans + Inter (fallback) + JetBrains Mono
Override dos tokens definidos em app.css (que tinha Inter + Fraunces).
2026-05-28 (auditoria): comentario interno do :root parecia funcionar
mas o parser ignorava a regra inteira (101 rules sem :root). Comentario
foi movido para FORA do bloco — agora os tokens chegam ao runtime.
===================================================================== */
:root {
--font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-numeric: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Significado dos tokens:
--font-body : corpo, labels, paragrafos (Plus Jakarta 500/600)
--font-display : titulos, KPIs hero (Plus Jakarta 700/800)
--font-numeric : KPIs/IMC/peso (Inter tabular ou JetBrains Mono) */
/* Corpo da pagina: forca Plus Jakarta Sans em todo o ecossistema do app,
inclusive em inputs/buttons/select (eles herdavam Inter via :root antigo). */
html, body,
input, button, select, textarea {
font-family: var(--font-body);
}
/* Titulos: Plus Jakarta 700/800 com tracking levemente negativo.
IMPORTANTE: sobrescreve --font-display antigo (Fraunces). */
h1, h2, h3, h4, h5, h6,
.dash-hero h1,
.historico-hero h2,
.calc-hero h2,
.avalcomp-hero h2,
.cog-hub-titulo,
.feedback-equipe-titulo,
.aval-timeline-data,
.card-header h3,
.home-hero-cta-title,
.next-appointment .date,
.app-header .header-brand {
font-family: var(--font-display);
font-feature-settings: "ss01" on, "cv11" on;
letter-spacing: -0.012em;
}
/* Pesos dos titulos no PWA (sem serif/italic herdado): */
h1, h2 { font-weight: 800; }
h3, h4 { font-weight: 700; }
h5, h6 { font-weight: 600; }
/* Numeros : tabular + zero cortado em qualquer KPI. */
.stat-pro-value, .av-topo-imc-num, .av-topo-imc-val,
.kpi-value, .stat-card .value, .stat-card-pro .stat-value,
.stat-value, .progresso-streak strong {
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums slashed-zero;
letter-spacing: -0.008em;
font-weight: 700;
}
/* =====================================================================
2. CARDS MAIS SUTIS (borda 1px + sombra leve, sem sombra pesada)
===================================================================== */
.main-content .card {
border: 1px solid var(--border, #e5e7eb);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: box-shadow .2s ease, border-color .2s ease;
}
.main-content .card:hover {
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.card-header {
background: transparent;
border-bottom: 1px solid var(--border-light, #f1f5f9);
padding: 12px 16px;
}
.card-header h3 {
font-size: 14.5px;
font-weight: 700;
color: var(--text);
}
.card-header h3 i,
.card-header h3 [data-lucide]{ color: var(--brand-primary, #3d6041); }
/* =====================================================================
3. RITMO COMPACTO (menos rolagem)
No mobile, reduz espaco entre cards para 14px sem encostar.
===================================================================== */
@media (max-width: 599px) {
.main-content .card { margin-bottom: 14px; }
.main-content .card > .card-body { padding: 15px 16px; }
.main-content .home-hero-cta { margin-bottom: 14px; }
.main-content .next-appointment { margin-bottom: 14px; }
.atalhos-grid { padding: 12px 0; }
}
@media (max-width: 480px) {
.main-content .card { margin-bottom: 12px; }
.stats-grid { gap: 8px; }
}
/* =====================================================================
4. TITULOS E ROTULOS CENTRALIZADOS NAS CAIXAS
Cabecalho de card sem acao a direita : centraliza o titulo.
===================================================================== */
.card-header > h3:only-child {
justify-content: center;
width: 100%;
text-align: center;
}
/* =====================================================================
5. ESTADOS VAZIOS + CARREGANDO consistentes
Padroniza estado vazio (icone em verde brand suave, max 28ch).
Skeleton e spinner padronizados.
===================================================================== */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 8px;
padding: 28px 18px;
}
.empty-state i,
.empty-state [data-lucide]{
color: var(--brand-primary, #3d6041);
opacity: 0.5;
font-size: 32px;
margin-bottom: 4px;
}
.empty-state p {
margin: 0;
max-width: 28ch;
line-height: 1.45;
color: var(--text-secondary, #475569);
font-size: 14px;
}
.empty-state .btn,
.empty-state .btn-primary {
margin-top: 10px;
}
/* Spinner padronizado (substitui fas fa-spinner espalhado). */
.app-spinner {
width: 32px; height: 32px;
border: 3px solid var(--border, #e2e8f0);
border-top-color: var(--brand-primary, #3d6041);
border-radius: 50%;
animation: appSpin .8s linear infinite;
display: inline-block;
}
@keyframes appSpin {
to { transform: rotate(360deg); }
}
/* 2026-08-05 (limpeza de CSS morto): o skeleton .lr-skeleton (+ lr-skel-title,
lr-skel-line, lr-skel-card e o keyframe lrSkelShine) foi removido. Nenhuma
marcacao do app o usava: zero ocorrencia em index.html, pages/*.html e em
todos os js/*.js, inclusive nos trechos que montam HTML por concatenacao.
Quem desenha carregamento hoje e o .app-spinner (acima) e o texto
"Carregando..." de cada secao. */
/* =====================================================================
6. TOQUE / SAFE-AREA : alvos >=44px (sem inflar)
===================================================================== */
.btn-icon,
button.icon-only,
.chip,
.pill,
.tab-pill {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* 2026-08-11 (auditoria desktop): alvo de 44px é regra de TOQUE. Sem o gate de
ponteiro, chips e pílulas ficavam com 44px de altura no desktop com mouse,
inflando cabeçalhos e filtros. Mesmo padrão já usado em app-fixes.css. */
@media (pointer: coarse) {
.btn-icon,
button.icon-only,
.chip,
.pill,
.tab-pill { min-height: 44px; }
}
@media (pointer: fine) {
.btn-icon,
button.icon-only,
.chip,
.pill,
.tab-pill { min-height: 34px; }
}
@media (max-width: 599px) {
.main-content { padding-bottom: max(20px, var(--safe-bottom, 0px)); }
}
/* =====================================================================
7. BOTOES PADRONIZADOS
Primario : verde brand, texto branco, raio 12, peso 700, >=44px
Secundario : borda verde + texto verde, fundo transparente
Destrutivo : vermelho semantico
Estados : :hover (eleva 1px), :active (scale .96), :focus-visible
(outline 2 verde), :disabled (opacidade .6, sem sombra)
===================================================================== */
.btn-primary,
.btn-action,
.leitor-btn-primary,
.agenda-btn,
.btn-confirm,
.home-hero-cta-btn {
font-family: var(--font-body);
font-weight: 700;
letter-spacing: 0.005em;
border-radius: 12px;
transition: transform .15s ease, box-shadow .18s ease,
background .18s ease, opacity .15s ease, color .18s ease;
-webkit-tap-highlight-color: transparent;
}
/* Garante altura minima 44px em CTAs principais (acoes do paciente).
2026-08-11 (auditoria desktop): o 44px vale para TOQUE; com mouse o CTA
fica em 38px. Padding e fonte continuam globais. */
.btn-primary,
.btn-action,
.agenda-btn,
.leitor-btn-primary {
padding: 11px 18px;
font-size: 14.5px;
}
@media (pointer: coarse) {
.btn-primary,
.btn-action,
.agenda-btn,
.leitor-btn-primary { min-height: 44px; }
}
@media (pointer: fine) {
.btn-primary,
.btn-action,
.agenda-btn,
.leitor-btn-primary { min-height: 38px; }
}
.btn-primary:hover:not(:disabled),
.btn-action:hover:not(:disabled),
.agenda-btn:hover:not(:disabled),
.leitor-btn-primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(61, 96, 65, 0.22);
}
.btn-primary:active:not(:disabled),
.btn-action:active:not(:disabled),
.agenda-btn:active:not(:disabled),
.leitor-btn-primary:active:not(:disabled),
.home-hero-cta-btn:active:not(:disabled) {
transform: scale(.96);
}
.btn-primary:focus-visible,
.btn-action:focus-visible,
.agenda-btn:focus-visible,
.leitor-btn-primary:focus-visible {
outline: 2px solid var(--brand-primary, #3d6041);
outline-offset: 2px;
}
.btn-primary:disabled,
.btn-action:disabled,
.agenda-btn:disabled,
.leitor-btn-primary:disabled {
opacity: .6;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* 2026-08-05 (limpeza de CSS morto): .btn-secondary e .btn-danger removidos.
Nenhum elemento do app usa essas classes: a unica ocorrencia parecida no
app.js e `cog-hub-btn-secondary`, outra classe, que so contem o nome como
pedaco. Os botoes vivos do app sao .btn-action, .leitor-btn-primary,
.cog-hub-btn-* e .tk-*. */
/* =====================================================================
8. BOTTOM-NAV refinado (altura ~64-68px, item ativo verde escuro)
===================================================================== */
.bottom-nav {
/* Sombra mais discreta + borda 1px sutil. */
box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.05);
border-top: 1px solid rgba(226, 232, 240, 0.7);
/* 2026-07-25 (Jayme): ainda sobrava faixa vazia embaixo do menu no
celular. A almofada de 60% do safe-area (teto 18px) + padding do item
deixava ~22px mortos abaixo dos rotulos no iPhone. Agora: almofada de
35% do safe-area (piso 4px, teto 12px) e item mais compacto. O fundo
da barra continua cobrindo a area do home indicator (bottom: 0) e o
alvo de toque (pilula de 44px) fica acima da zona de gesto. */
align-items: center;
padding-top: 3px;
/* 16/10/2026 (#703 h): no app Android o SystemBars do Capacitor 8 injeta --safe-area-inset-bottom e o menu
pinta o proprio fundo atras da barra do sistema com os itens acima dela; fora do app vale a almofada. */
padding-bottom: var(--safe-area-inset-bottom, clamp(4px, calc(env(safe-area-inset-bottom, 0px) * 0.35), 12px));
}
.nav-item {
min-height: 52px;
padding: 3px 4px 2px;
color: #64748b;
}
.nav-item-icon {
width: 52px;
min-height: 44px;
border-radius: 14px;
transition: background .22s ease, transform .18s ease;
}
.nav-item-icon i,
.nav-item-icon [data-lucide]{
font-size: 22px;
line-height: 1;
filter: none;
}
.nav-item-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
line-height: 1.1;
letter-spacing: 0.01em;
margin-top: 1px;
}
.nav-item.active {
color: var(--brand-primary-darker, #213423);
}
.nav-item.active .nav-item-icon {
background: var(--brand-tint, #f1f5f9);
}
.nav-item.active .nav-item-icon i,
.nav-item.active .nav-item-icon [data-lucide]{
color: var(--brand-primary-darker, #213423);
transform: scale(1.04);
}
.nav-item.active .nav-item-label {
font-weight: 800;
color: var(--brand-primary-darker, #213423);
}
.nav-item::before {
height: 3px;
width: 28px;
background: var(--brand-primary-dark, #2f4a32);
}
.nav-item-badge {
background: #ef4444;
color: #fff;
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
box-shadow: 0 1px 3px rgba(239, 68, 68, .35);
}
/* =====================================================================
9. HEADER compacto e fino
===================================================================== */
.app-header {
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}
.app-header .header-brand img {
height: 32px;
width: auto;
max-width: 180px;
}
.app-header .header-btn {
min-width: 40px;
min-height: 40px;
border-radius: 10px;
transition: background .15s ease, color .15s ease, transform .12s ease;
}
.app-header .header-btn:active { transform: scale(.94); }
.app-header .header-btn .badge {
font-family: var(--font-body);
font-weight: 700;
font-size: 10px;
}
/* =====================================================================
10. NEXT APPOINTMENT : sombra mais sutil, mesma identidade
===================================================================== */
.next-appointment {
box-shadow: 0 4px 12px rgba(61, 96, 65, 0.22);
border-radius: 14px;
}
.next-appointment .date {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: -0.012em;
}
.next-appointment .btn-action {
min-height: 40px;
border-radius: 10px;
}
/* =====================================================================
11. HOME HERO CTA : tipografia atualizada (Plus Jakarta)
===================================================================== */
.home-hero-cta {
box-shadow: 0 4px 14px rgba(107, 131, 110, 0.18);
}
.home-hero-cta-title {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: -0.012em;
}
.home-hero-cta-btn {
min-height: 40px;
padding: 10px 18px;
border-radius: 10px;
}
/* =====================================================================
12. STAT-CARDS : tipografia + sombra coerente
===================================================================== */
.stat-card-pro,
.stat-card {
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.stat-card .value,
.stat-card-pro .stat-pro-value {
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums slashed-zero;
font-weight: 800;
}
/* =====================================================================
13. CONSISTENCIA DE MARCA (badges/labels verde residuais)
===================================================================== */
.badge.green,
.tag.green,
.label.green {
background: var(--brand-tint, #f1f5f9);
color: var(--brand-primary-darker, #213423);
}
/* =====================================================================
14. FADE-IN entre views (180ms) + REDUCED MOTION
===================================================================== */
@keyframes appSectionFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.app-section.active {
animation: appSectionFadeIn 0.18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.app-section,
.app-section.active,
.btn-primary, .btn-secondary, .btn-danger,
.nav-item, .nav-item.active,
.home-hero-cta, .home-hero-cta-btn,
.lr-skeleton, .app-spinner {
animation: none !important;
transition: none !important;
}
}
/* =====================================================================
15. DARK MODE : paleta calibrada
Antes : #0f172a (slate-900) / #1e293b (slate-800)
Agora : #0a0e1b (mais profundo) / #1c2230 (cards) — visual mais premium
e mais distinto entre superficie e card.
===================================================================== */
html.theme-dark {
--bg: #0a0e1b;
--bg-alt: #141824;
--bg-white: #1c2230;
--card: #1c2230;
--card-hover: #242a3a;
--text: #e2e8f0;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--border: #2a3142;
--border-light: #1e2433;
color-scheme: dark;
}
html.theme-dark body {
background: #0a0e1b;
color: #e2e8f0;
}
html.theme-dark .main-content .card {
background: #1c2230;
border-color: #2a3142;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
html.theme-dark .main-content .card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
border-color: #34405a;
}
html.theme-dark .card-header {
border-bottom-color: #232a3a;
}
html.theme-dark .bottom-nav {
background: #0f1422;
border-top-color: #1f2535;
box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.4);
}
html.theme-dark .bottom-nav::after { background: #0f1422; }
html.theme-dark .nav-item { color: #94a3b8; }
html.theme-dark .nav-item.active {
color: #86c98c;
}
html.theme-dark .nav-item.active .nav-item-icon {
background: rgba(134, 201, 140, 0.14);
}
html.theme-dark .nav-item.active .nav-item-icon i,
html.theme-dark .nav-item.active .nav-item-label,
html.theme-dark .nav-item.active .nav-item-icon [data-lucide]{
color: #86c98c;
}
html.theme-dark .nav-item::before { background: #86c98c; }
html.theme-dark .app-header {
background: rgba(10, 14, 27, 0.92);
border-bottom: 1px solid #1f2535;
box-shadow: none;
}
html.theme-dark .app-header .header-btn {
color: #cbd5e1;
}
html.theme-dark .app-header .header-btn:hover {
background: rgba(134, 201, 140, 0.08);
color: #86c98c;
}
html.theme-dark .empty-state i,
html.theme-dark .empty-state [data-lucide]{ color: #86c98c; opacity: .5; }
html.theme-dark .empty-state p { color: #94a3b8; }
/* 2026-05-28 (auditoria): titulos e texto dentro de cards estavam em
verde escuro hardcoded (#3d6041 / #2f4a32) — invisivel sobre fundo
#1c2230 do dark. Override para texto claro em todos os elementos
de texto dentro de card no dark mode. Verde brand fica como cor
semantica de icone/CTA, nunca como cor de texto sobre escuro. */
/* 2026-08-28 (revisao geral do texto secundario): a rede ganhou
`:not([class*="muted"])` em div E em span. Antes, com especificidade (0,7,2),
ela atropelava a propria saida que esta folha oferece
(`.main-content .card .text-muted`, (0,4,1)) e qualquer regra de classe com
`color: var(--text-muted)`: rotulo de KPI, contagem de categoria, data de
live, separador de data do chat e estado vazio ficavam TODOS na mesma cor
do titulo (#e2e8f0), sem hierarquia. Medido por Playwright em 16 telas no
escuro em 27 e 28/08. O caminho canonico agora e marcar o texto secundario
com a classe `text-muted` no template: a rede deixa passar e o tom #94a3b8
(4,5:1 ou mais sobre o fundo de card #1e293b, medido 5,71:1) assume.
A excecao pontual `:not(.produto-util-desc)` de 27/08 saiu: a descricao do
produto agora carrega `text-muted` no proprio template.
`small` dentro de card nunca precisou de excecao: a rede so casa div e span,
e a regra `.card small` abaixo atinge o elemento direto, o que vence
heranca. Medido: small na tela de Fotos ja rendia #94a3b8 antes da rede
mudar. */
html.theme-dark .main-content .card,
html.theme-dark .main-content .card h1,
html.theme-dark .main-content .card h2,
html.theme-dark .main-content .card h3,
html.theme-dark .main-content .card h4,
html.theme-dark .main-content .card h5,
html.theme-dark .main-content .card h6,
html.theme-dark .main-content .card p,
html.theme-dark .main-content .card span:not([class*="badge"]):not([class*="chip"]):not([class*="muted"]),
html.theme-dark .main-content .card label,
html.theme-dark .main-content .card div:not([class*="badge"]):not([class*="chip"]):not([class*="time"]):not([class*="muted"]) {
color: #e2e8f0;
}
html.theme-dark .main-content .card .text-muted,
html.theme-dark .main-content .card small {
color: #94a3b8;
}
/* Verde brand SOMENTE em icones e acoes; titulo principal volta para claro. */
html.theme-dark .main-content .card .card-header h3,
html.theme-dark .main-content .card-header h3 {
color: #e2e8f0;
}
html.theme-dark .main-content .card .card-header h3 i,
html.theme-dark .main-content .card .card-header h3 [data-lucide]{
color: #86c98c;
}
html.theme-dark .lr-skeleton {
background: linear-gradient(90deg, #1c2230 0%, #242a3a 50%, #1c2230 100%);
background-size: 200% 100%;
}
html.theme-dark .app-spinner {
border-color: #2a3142;
border-top-color: #86c98c;
}
/* No dark, KPIs e numerais herdam um pouco mais de tracking pra leitura. */
html.theme-dark .stat-card-pro .stat-pro-value,
html.theme-dark .stat-card .value {
color: #f1f5f9;
}
/* =====================================================================
16. TOAST padronizado : canto inferior central no mobile, 3s
(definido aqui pra qualquer view que chame showToast() ja herdar)
===================================================================== */
.app-toast,
#appToast,
.toast-container {
position: fixed;
left: 50%;
bottom: calc(var(--nav-height, 65px) + var(--safe-bottom, 0px) + 16px);
transform: translateX(-50%);
z-index: 1100;
pointer-events: none;
}
.app-toast .toast,
#appToast .toast,
.toast-container .toast {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
background: rgba(15, 23, 42, 0.94);
color: #fff;
border-radius: 12px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
max-width: min(90vw, 360px);
pointer-events: auto;
animation: toastIn 0.2s ease-out, toastOut 0.25s ease-in 2.75s forwards;
}
.app-toast .toast.toast-success { background: var(--brand-primary-dark, #2f4a32); }
.app-toast .toast.toast-error,
.app-toast .toast.toast-danger { background: #dc2626; }
.app-toast .toast.toast-warn,
.app-toast .toast.toast-warning { background: #d97706; color: #fff; }
@keyframes toastIn {
from { opacity: 0; transform: translate(-50%, 8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes toastOut {
to { opacity: 0; transform: translate(-50%, 8px); }
}
/* =====================================================================
17. FOCUS VISIBLE GLOBAL : padrao acessivel verde brand
===================================================================== */
:focus-visible {
outline-color: var(--brand-primary, #3d6041);
}
/* =====================================================================
18. PULL-TO-REFRESH preservado : nao mexer (ja existe no JS).
Aqui apenas ajusta o indicador visual se houver classe .ptr-indicator.
===================================================================== */
.ptr-indicator i,
.ptr-indicator .fa-arrow-down,
.ptr-indicator .fa-sync,
/* =====================================================================
18. PULL-TO-REFRESH preservado : nao mexer (ja existe no JS).
Aqui apenas ajusta o indicador visual se houver classe .ptr-indicator.
===================================================================== */
.ptr-indicator [data-lucide]{
color: var(--brand-primary, #3d6041);
}
/* =====================================================================
19. REFEICAO: overflow / margem (2026-05-28)
Caso reportado: paciente Carlos tinha uma refeicao chamada "ht" cujo
conteudo ultrapassava a borda do card e ficava cortada. Causa: varios
flex containers (.refeicao-header h5, .ref-alt, .alimento-item) sem
min-width:0, entao os filhos texto nao shrinkavam abaixo do conteudo e
overflowavam horizontalmente. Tambem havia chance de string longa sem
espaco (ex.: link inteiro) escapar do flex.
Fix: containment + min-width:0 + overflow-wrap:anywhere em texto.
===================================================================== */
.refeicao { box-sizing: border-box; overflow: hidden; }
.refeicao-header { box-sizing: border-box; gap: 8px; min-width: 0; }
.refeicao-header h5 { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; word-break: break-word; line-height: 1.3; }
.refeicao-header .refeicao-horario { flex-shrink: 0; }
.refeicao-content { box-sizing: border-box; max-width: 100%; }
.ref-slot, .ref-slot * { box-sizing: border-box; max-width: 100%; }
.ref-alt { min-width: 0; max-width: 100%; }
.ref-alt-texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.alimento-item { box-sizing: border-box; min-width: 0; }
.alimento-item > div:last-child { flex: 1 1 auto; min-width: 0; }
.alimento-nome, .alimento-quantidade { overflow-wrap: anywhere; word-break: break-word; }
.ref-obs { box-sizing: border-box; max-width: 100%; }
.ref-obs-texto, .ref-obs-lista { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
/* =====================================================================
PWA: bloqueia pull-to-refresh NATIVO do browser (2026-05-28)
Causa do "app sai e volta": o gesto de puxar a tela disparava o Chrome
PTR (cria header com spinner verde e recarrega a URL inteira -> volta
pra tela de carregando). overscroll-behavior-y:contain impede esse
gesto subir pro browser, mantendo so o handler custom (iniciarPullToRefresh).
===================================================================== */
html, body { overscroll-behavior-y: contain; }
/* iOS Safari: overscroll-behavior nao funciona; usar -webkit-overflow-scrolling
touch + bloqueio extra. */
#appWrapper { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
/* =====================================================================
AVALIACOES: refinamento editorial (2026-05-28)
"use o front design": aproximar do padrao das paginas Resumo / Hoje
ja redesenhadas. Mantem todos os IDs/ classes, so refina o visual.
- Hero menos saturado, mais arejado, com numeros tabulares fortes
- KPI cards mais espacados, ico em fundo translucido (vidro), label
em maiusculo letterspaced
- Timeline com card limpo, hover suave, badge "Recente" verde brand
- Historico titulo refinado, sem icones agressivos
===================================================================== */
.aval-hero {
border-radius: 18px !important;
background: linear-gradient(135deg, #2f4a32 0%, #213423 100%) !important;
box-shadow:
0 1px 2px rgba(36, 49, 38, 0.18),
0 18px 38px -18px rgba(47, 74, 50, 0.55) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
padding: 20px 22px !important;
margin-bottom: 16px;
}
.aval-hero-top {
margin-bottom: 16px !important;
}
.aval-hero-label {
font-size: 10.5px !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
font-weight: 800 !important;
color: rgba(255, 255, 255, 0.78) !important;
}
.aval-hero-data {
font-size: 12.5px !important;
font-weight: 600 !important;
color: rgba(255, 255, 255, 0.92) !important;
}
.aval-kpis {
gap: 14px !important;
}
.aval-kpi {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: 12px !important;
padding: 12px 14px !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.aval-kpi-ico {
width: 36px !important; height: 36px !important;
background: rgba(255, 255, 255, 0.12) !important;
border-radius: 10px !important;
display: flex; align-items: center; justify-content: center;
font-size: 15px !important;
}
.aval-kpi-label {
font-size: 10.5px !important;
letter-spacing: 0.7px !important;
text-transform: uppercase !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.72) !important;
}
.aval-kpi-valor {
font-size: 22px !important;
font-weight: 800 !important;
letter-spacing: -0.6px !important;
line-height: 1.05 !important;
font-variant-numeric: tabular-nums;
font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
color: #ffffff !important;
}
.aval-kpi-valor small {
font-size: 12px !important;
font-weight: 600 !important;
margin-left: 3px !important;
color: rgba(255, 255, 255, 0.78) !important;
font-family: inherit !important;
}
/* Historico timeline refinado */
.aval-historico-titulo {
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
color: var(--brand-primary-darker, #2f4a32) !important;
margin: 22px 0 12px !important;
padding-left: 12px !important;
border-left: 3px solid var(--brand-primary, #3d6041) !important;
}
.aval-timeline { padding-left: 14px !important; border-left: 2px dashed rgba(61, 96, 65,.22) !important; margin-left: 4px; }
.aval-timeline-item { position: relative; padding-bottom: 14px !important; }
.aval-timeline-dot {
width: 12px !important; height: 12px !important;
border-radius: 50% !important;
background: #ffffff !important;
border: 3px solid var(--brand-primary, #3d6041) !important;
box-shadow: 0 0 0 3px rgba(61, 96, 65,.12) !important;
position: absolute !important;
left: -22px !important; top: 16px !important;
}
.aval-timeline-item.latest .aval-timeline-dot {
background: var(--brand-primary, #3d6041) !important;
border-color: #ffffff !important;
box-shadow: 0 0 0 3px rgba(61, 96, 65,.32), 0 0 0 6px rgba(61, 96, 65,.10) !important;
}
.aval-timeline-card {
border-radius: 14px !important;
border: 1px solid rgba(61, 96, 65, 0.16) !important;
box-shadow: 0 1px 2px rgba(36, 49, 38, 0.04), 0 6px 14px -8px rgba(47, 74, 50, 0.18) !important;
background: #ffffff !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.aval-timeline-card:hover {
transform: translateY(-1px);
border-color: rgba(61, 96, 65, 0.32) !important;
box-shadow: 0 1px 2px rgba(36, 49, 38, 0.05), 0 12px 22px -10px rgba(47, 74, 50, 0.28) !important;
}
.aval-timeline-head { padding: 14px 16px !important; }
.aval-timeline-data {
font-size: 14px !important;
font-weight: 700 !important;
color: #1f2937 !important;
display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap;
}
.aval-timeline-resumo {
font-size: 12.5px !important;
color: #475569 !important;
margin-top: 4px !important;
font-variant-numeric: tabular-nums;
}
/* 2026-09-18: a linha de resumo do item ("68,5 kg . IMC 25,2") e a PREVIA do
cartao fechado. Com o cartao aberto ela repetia, palavra por palavra, o que
o detalhe logo abaixo ja mostrava: medido, o IMC aparecia QUATRO vezes na
mesma tela e o peso em tres formatos. Some ao abrir e volta ao fechar.
O gancho `aval-aberta` e posto pelo toggleAvaliacaoDetalhe. */
.aval-timeline-card.aval-aberta .aval-timeline-resumo { display: none; }
/* ===========================================================================
2026-09-18: a calha do trilho no celular
---------------------------------------------------------------------------
Medido em 390px: o texto da avaliacao so comecava em x=48, porque ate chegar
nele havia CINCO recuos encaixados: .main-content 10px, borda do .card 1px,
.card-body 16px, o trilho (margin 4 + borda 2 + padding 14 = 20px) e a borda
do proprio cartao. Com os 24px do lado direito, 72px da tela (18,5%) eram
moldura. Em 320px a conta piora para 20%.
No celular o trilho sai e a marca passa para DENTRO do cartao: um filete
verde no item mais recente diz a mesma coisa que o ponto na linha, sem
gastar coluna. O trilho continua valendo do tablet para cima, onde sobra
largura. As regras ficam AQUI, logo depois das globais que elas corrigem,
para a historia nao se partir entre duas folhas.
=========================================================================== */
@media (max-width: 560px) {
.aval-timeline {
padding-left: 0 !important;
border-left: 0 !important;
margin-left: 0 !important;
width: 100% !important;
}
/* O ponto vivia em left:-22px, ou seja, dentro da calha que acabou de sair. */
.aval-timeline-dot { display: none !important; }
/* O filete da ultima avaliacao entra como sombra INTERNA, nao como borda:
borda de 3px comeria 3px do texto de volta, e o ganho de largura era o
motivo de tirar o trilho. A elevacao do cartao e repetida aqui porque
box-shadow nao acumula entre regras. */
.aval-timeline-item.latest > .aval-timeline-card {
box-shadow:
inset 3px 0 0 var(--brand-primary, #3d6041),
0 1px 2px rgba(36, 49, 38, 0.04),
0 6px 14px -8px rgba(47, 74, 50, 0.18) !important;
}
.aval-timeline-item { padding-bottom: 10px !important; }
/* O historico e um cartao DENTRO de outro cartao: a moldura de fora nao
carrega informacao nenhuma (o card so tem um card-body, sem cabecalho
proprio) e no celular ela so consome largura. Vira espacamento, e cada
avaliacao segue sendo o cartao que a pessoa toca. Escopo por :has para
nao mexer em card nenhum fora do historico de avaliacoes. */
.card:has(> .card-body > .aval-timeline) {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.card-body:has(> .aval-timeline) {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
.aval-badge-latest {
/* 2026-07-17 (auditoria contraste AA): esta regra carrega depois do
app-deferred.css e tem !important, entao era ela quem valia de fato.
Ponta clara #609165 = 3,66:1 com branco -> #2f4a32 (5,06:1) -> #3d6041. */
background: linear-gradient(135deg, #2f4a32, #213423) !important;
color: #ffffff !important;
padding: 3px 9px !important;
border-radius: 999px !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
}
.aval-chevron {
color: var(--brand-primary, #3d6041) !important;
transition: transform 0.2s ease;
}
/* Botao comparativo PDF mais limpo */
.aval-compare-pdf-btn {
width: 100%;
background: rgba(61, 96, 65, 0.10) !important;
/* 2026-08-11: --brand-text vira por tema. O verde escuro fixo dava 1,4:1
no modo escuro e o override dark do app.css perdia para este important. */
color: var(--brand-text, #2f4a32) !important;
border: 1px dashed rgba(61, 96, 65, 0.40) !important;
border-radius: 12px !important;
padding: 12px 16px !important;
font-weight: 700 !important;
font-size: 13px !important;
cursor: pointer;
transition: background 0.18s ease;
}
.aval-compare-pdf-btn:hover {
background: rgba(61, 96, 65, 0.18) !important;
}
/* Dark mode mantem hero verde escuro (ja esta em tom alvo); ajusta apenas
timeline card pra nao misturar branco com fundo escuro. */
html.theme-dark .aval-timeline-card,
html:not(.theme-light) .aval-timeline-card {
background: #1c2230 !important;
border-color: rgba(134, 201, 140, 0.16) !important;
}
html.theme-dark .aval-timeline-data,
html:not(.theme-light) .aval-timeline-data { color: #e2e8f0 !important; }
html.theme-dark .aval-timeline-resumo,
html:not(.theme-light) .aval-timeline-resumo { color: #94a3b8 !important; }
html.theme-dark .aval-historico-titulo,
html:not(.theme-light) .aval-historico-titulo { color: #86c98c !important; }
/* =====================================================================
20. PULL-TO-REFRESH suave (sem reload de browser) (2026-05-28)
Suaviza a transicao do indicador ptr-indicator: antes o gesto disparava
um window.location.reload() que sumia o app por 1-2s; agora o handler
refaz so o estado e re-renderiza (ver mudanca em app.js).
===================================================================== */
.ptr-indicator {
transition: transform 0.22s cubic-bezier(.2,.9,.3,1), opacity 0.18s ease;
}
.ptr-indicator.ptr-loading i,
.ptr-indicator.ptr-loading [data-lucide]{
animation: ptrSpin 0.9s linear infinite;
}
@keyframes ptrSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* =====================================================================
21. FIX DARK: modal de detalhe da avaliacao (Historico fisico)
(2026-06-10)
Causa raiz: app.css tem a regra global
.modal-content [style*="color:#0f172a"], ... [style*="color:#475569"]
{ color:var(--text)!important }
que, em html.theme-dark, forca o texto inline do modal para #f1f5f9
(quase branco). Porem os FUNDOS inline do modal (#f8fafc nas linhas de
medida e #e8f7ee nas observacoes) nao escureciam: o override antigo
html.theme-dark .aval-detail-modal [style*="background:#f8fafc"]
{ background:#0f172a }
nao tem !important e perde para o style inline. Resultado: letra
branca sobre fundo claro, ilegivel. Bloco abaixo escurece os fundos
(com !important pontual, mesma tecnica do nuclear fix) e clareia os
acentos verdes/vermelhos para manter contraste AA (>=4.5:1) sobre
#0f172a. Escopo estrito em html.theme-dark: modo claro intacto.
===================================================================== */
/* Linhas de medida (Peso, IMC, %Gordura, circunferencias, RCQ) */
html.theme-dark .aval-detail-modal [style*="background:#f8fafc"],
html.theme-dark .aval-detail-modal [style*="background: #f8fafc"] {
background: #0f172a !important;
border-left-color: var(--brand-pastel, #86c98c) !important;
}
/* Caixa de observacoes (tint verde claro no modo claro) */
html.theme-dark .aval-detail-modal [style*="background:#e8f7ee"],
html.theme-dark .aval-detail-modal [style*="background: #e8f7ee"] {
background: rgba(61, 96, 65, 0.16) !important;
border-left-color: var(--brand-pastel, #86c98c) !important;
}
/* Botao secundario "Enviar PDF para meu email" (fundo branco inline) */
html.theme-dark .aval-detail-modal button[style*="background:#fff"] {
background: #0f172a !important;
border-color: var(--brand-pastel, #86c98c) !important;
}
/* Titulos de secao e icones em verde escuro (#3d6041/#609165): ilegiveis
sobre fundo escuro; viram verde pastel da marca. */
html.theme-dark .aval-detail-modal [style*="color:#213423"],
html.theme-dark .aval-detail-modal [style*="color: #213423"],
html.theme-dark .aval-detail-modal [style*="color:#3d6041"],
html.theme-dark .aval-detail-modal [style*="color: #3d6041"] {
color: var(--brand-pastel, #86c98c) !important;
}
/* Status/deltas e classificacao IMC: tons mais claros para AA no escuro */
html.theme-dark .aval-detail-modal [style*="color:#dc2626"] { color: #f87171 !important; }
html.theme-dark .aval-detail-modal [style*="color:#ef4444"] { color: #f87171 !important; }
html.theme-dark .aval-detail-modal [style*="color:#991b1b"] { color: #fca5a5 !important; }
html.theme-dark .aval-detail-modal [style*="color:#b45309"] { color: #fbbf24 !important; }
/* =====================================================================
22. FIX DARK: opcoes/alternativas do PLANO ALIMENTAR (2026-06-10)
Causa raiz: as linhas de alternativa do plano (.ref-alt) tem em app.css
fundo claro fixo (.alt-zebra = var(--brand-tint) = #f1f5f9 ; .alt-branco
= #fff) e cor de texto #1e293b. Em html.theme-dark, --brand-tint NAO e
sobrescrito (continua #f1f5f9) e uma regra global de modo escuro clareia
o texto para #e2e8f0. Resultado provado no QA (paciente 2677, plano 156):
texto cinza claro (#e2e8f0) sobre faixa clara (#f1f5f9 / #fff) => contraste
~1.1:1, alternativas praticamente ilegiveis no escuro.
Fix: escurece as faixas (zebra = tint verde translucido ; branca = card
escuro) e garante texto/numeracao/cabecalho legiveis (AA >=4.5:1) sobre
#0f172a. Mantem a barra verde de acento. Mesma tecnica do bloco 21.
Escopo estrito em html.theme-dark: modo claro 100% intacto.
===================================================================== */
html.theme-dark .ref-alt {
color: var(--text-secondary, #cbd5e1) !important;
border-left-color: var(--brand-pastel, #86c98c) !important;
}
html.theme-dark .ref-alt.alt-zebra {
background: rgba(61, 96, 65, 0.14) !important;
}
html.theme-dark .ref-alt.alt-branco {
background: var(--card, #1e293b) !important;
}
html.theme-dark .ref-alt-num {
color: var(--brand-pastel, #86c98c) !important;
}
html.theme-dark .ref-alt-texto {
color: var(--text, #f1f5f9) !important;
}
html.theme-dark .ref-slot-header {
color: var(--brand-pastel, #86c98c) !important;
}
/* Caixa de observacoes da refeicao: creme claro -> amber translucido escuro */
html.theme-dark .ref-obs {
background: rgba(202, 138, 4, 0.16) !important;
color: #fcd9a3 !important;
}
html.theme-dark .ref-obs-label {
color: #fbbf24 !important;
}
html.theme-dark .ref-obs-texto,
html.theme-dark .ref-obs-lista,
html.theme-dark .ref-obs-lista li {
color: #fcd9a3 !important;
}
/* Estado vazio e itens estruturados (alimento-*) ja herdam --text no escuro,
reforco defensivo para a quantidade que usa --text-muted. */
html.theme-dark .ref-vazia {
color: var(--text-muted, #94a3b8) !important;
}
/* =====================================================================
14. REVISAO 2026-07-25 (Jayme): Ultima avaliacao slim + cabecalhos de
secao sem safe-area indevido + chip de formulario ja enviado
===================================================================== */
/* 14a. Cabecalhos de secao (forms/med/lives/leitor/historico/rec): a regra
antiga aplicava padding-top:max(env(safe-area-inset-top),16px), pensada
para headers colados no TOPO da viewport. Esses heroes ficam DENTRO do
conteudo, abaixo do .app-header fixo; em celular com notch isso virava
uma faixa vazia de ~50px dentro do card. Normaliza o padding. */
.forms-hero,
.historico-hero,
.leitor-hero,
.lives-hero,
.med-hero,
.rec-hero {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
/* 14b. Ultima avaliacao: hero mais slim e profissional. Sem caixotes de
icone (eram o maior gasto vertical), KPIs em faixa unica de 4 colunas,
numeros menores e alinhados. O bloco cai de ~450px para ~150px. */
.aval-hero {
padding: 14px 16px 13px !important;
margin-bottom: 12px !important;
}
.aval-hero::before { display: none; }
.aval-hero-top {
margin-bottom: 10px !important;
}
.aval-kpis {
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
}
.aval-kpi {
padding: 9px 4px 8px !important;
border-radius: 10px !important;
gap: 2px;
}
.aval-kpi-ico { display: none !important; }
.aval-kpi-valor {
font-size: 16.5px !important;
letter-spacing: -0.4px !important;
}
.aval-kpi-valor small { font-size: 10.5px !important; margin-left: 2px !important; }
.aval-kpi-label {
font-size: 9.5px !important;
letter-spacing: 0.5px !important;
margin-top: 1px;
}
@media (min-width: 480px) {
.aval-kpi-valor { font-size: 19px !important; }
.aval-kpi-label { font-size: 10px !important; }
}
@media (min-width: 1024px) {
.aval-hero { padding: 18px 22px 16px !important; }
.aval-kpi { padding: 12px 8px 10px !important; }
}
/* 14c. Chip "Formulario desta semana ja enviado" na secao Meus Formularios. */
.forms-week-ok {
display: flex;
align-items: center;
gap: 8px;
background: #e8f7ee;
color: #213423;
border: 1px solid rgba(61, 96, 65, 0.35);
border-radius: 10px;
padding: 10px 14px;
font-size: 13.5px;
font-weight: 600;
line-height: 1.35;
margin-bottom: 8px;
}
.forms-week-ok i,
.forms-week-ok [data-lucide]{ font-size: 15px; flex-shrink: 0; }
html.theme-dark .forms-week-ok {
background: rgba(61, 96, 65, 0.16);
color: #a7d4ac;
border-color: rgba(134, 201, 140, 0.35);
}
/* ====================================================================
* Fotos de evolução (2026-07-30): a paciente fotografa e envia pelo app.
* Alvos de toque de 44px+, pensados para uso com uma mão.
* ==================================================================== */
/* 2026-08-11 (auditoria de tema): tokens no lugar de hex claro. A tela de
fotos era a pior do modo escuro: cartao branco fixo com texto trocado para
claro pela rede de resgate (contraste ~1,1:1). Com tokens, os dois temas
ficam corretos na fonte, sem override dark. */
.foto-pose {
display: flex; align-items: center; gap: 12px; width: 100%;
min-height: 62px; padding: 12px 14px; margin-bottom: 8px;
background: var(--card, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 12px;
font: inherit; text-align: left; cursor: pointer;
}
.foto-pose:active { transform: translateY(1px); }
.foto-pose__ico {
flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand-tint, #e8f7ee); color: var(--brand-primary, #3d6041); font-size: 15px;
}
.foto-pose__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.foto-pose__txt strong { font-size: .95rem; color: var(--text, #0f172a); }
.foto-pose__txt small { font-size: .76rem; color: var(--text-muted, #64748b); line-height: 1.4; }
.foto-pose__seta { flex: 0 0 auto; color: var(--text-muted, #64748b); font-size: .8rem; }
.foto-consent {
display: flex; align-items: flex-start; gap: 9px; margin-top: 12px;
font-size: .8rem; color: var(--text-secondary, #475569); line-height: 1.45;
}
.foto-consent input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--brand-primary, #3d6041); }
.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
.foto-item { margin: 0; }
.foto-item img {
width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
border-radius: 10px; background: var(--bg-alt, #f1f5f9); display: block;
}
.foto-item figcaption { margin-top: 4px; font-size: .7rem; color: var(--text-muted, #64748b); text-align: center; }
.foto-vazio { margin: 0; font-size: .86rem; color: var(--text-muted, #64748b); line-height: 1.5; }
/* Botões de ação do próximo agendamento (2026-07-30): "Confirmar presença"
quebrava em duas linhas ao lado de "Desmarcar" e desalinhava a fileira.
O rótulo visível virou "Confirmar" e o nowrap impede recaída. */
.btn-action { white-space: nowrap; }
/* 2026-08-04 (a11y toque, WCAG 2.5.5): alvos de toque >= 44px em telas de toque.
Expande a AREA de toque sem inchar o desktop (@media pointer:coarse). min-width/
min-height vencem o width/height de 32-36px das media queries de tela pequena. */
@media (pointer: coarse) {
.header-btn, .modal-close, .mais-close, .sc-close {
min-width: 44px;
min-height: 44px;
}
}
/* 2026-08-10: KPI "Peso" truncava no tablet. Na faixa 768-1023px a grade ia a 4
colunas dentro de um main de 720px, deixando cada card ~149px, e o valor
"82,4kg" (nowrap + ellipsis) não cabia. 2x2 dá largura de sobra e a coluna do
valor pode encolher sem cortar. */
@media (min-width: 640px) and (max-width: 1023px) {
.stats-grid,
.stats-grid-pro {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* O valor do KPI não corta: se faltar espaço, diminui a fonte em vez de cortar. */
.stat-card-pro .stat-pro-value,
.stat-card .value {
min-width: 0;
}
/* =====================================================================
2026-10-08 (achados do dono no aparelho, prompt APPS-TESTE-NO-APARELHO)
a) Cabecalho com UMA acao primaria (Hidratacao, 44 px) e o resto no menu
"Mais acoes" (notificacoes, mensagens, suporte, tema, perfil).
b) "Mais" (sec-mais): grade de 2 colunas de caixas deitadas, agrupadas.
===================================================================== */
.header-actions { position: relative; }
html body .header-btn--mais { position: relative; }
.header-btn--mais .header-mais-ponto { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #b91c1c; border: 2px solid var(--card, #fff); display: none; }
.header-btn--mais.tem-pendencia .header-mais-ponto { display: block; }
.header-mais-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 236px; max-width: calc(100vw - 24px); background: var(--card, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 14px; box-shadow: 0 14px 40px rgba(15, 23, 42, .18); padding: 6px; z-index: 320; display: flex; flex-direction: column; gap: 2px; }
.header-mais-menu[hidden] { display: none; }
html body .header-mais-menu .header-btn,
html body.sn-mobile-shell .header-mais-menu .header-btn { display: flex !important; width: 100%; height: auto; min-height: 44px; justify-content: flex-start; gap: 10px; padding: 0 12px; background: transparent; border: 0; border-radius: 10px; color: var(--text, #0f172a); font-size: 14px; font-weight: 600; font-family: inherit; text-align: left; }
.header-mais-menu .header-btn:hover, .header-mais-menu .header-btn:focus-visible { background: var(--brand-tint, #f1f5f9); }
.header-mais-menu .header-btn > i:first-child { width: 22px; text-align: center; font-size: 16px; color: var(--brand-primary-darker, #213423); }
.header-mais-menu .header-mais-rotulo { flex: 1 1 auto; min-width: 0; }
html body .header-mais-menu .header-btn .badge { position: static; margin-left: auto; }
html body .header-mais-menu .header-btn .user-avatar { width: 28px; height: 28px; font-size: 12px; flex: 0 0 28px; }
html.theme-dark .header-mais-menu { background: #0f172a; border-color: #334155; }
html.theme-dark .header-mais-menu .header-btn { color: #e2e8f0; }
html.theme-dark .header-mais-menu .header-btn:hover, html.theme-dark .header-mais-menu .header-btn:focus-visible { background: #1e293b; }
html.theme-dark .header-mais-menu .header-btn > i:first-child { color: var(--brand-pastel, #86c98c); }
/* A folha de correcoes escondia o botao da agua no telefone (cabecalho lotado); com o menu ha lugar.
O JS continua escondendo por style quando nao ha meta de agua. */
html body.sn-mobile-shell #btnHeaderAgua:not([style*="none"]) { display: flex !important; }
html body.sn-mobile-shell #btnHeaderMais { display: flex !important; }
.water-card--destaque { box-shadow: 0 0 0 3px var(--brand-pastel, #86c98c) !important; transition: box-shadow .3s ease; }
/* "Mais": caixas deitadas, 2 colunas, grupos com titulo (mais de 6 itens). */
html body .mais-secao-corpo { padding: 6px 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.mais-grupo-titulo { margin: 10px 0 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary, #475569); }
html body .mais-grid.mais-grid-secao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html body .mais-grid-secao .mais-item { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; min-height: 56px; padding: 6px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; background: var(--card, #fff); }
html body .mais-grid-secao .mais-item-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; font-size: 17px; }
html body .mais-grid-secao .mais-item-label { text-align: left; font-size: 13px; line-height: 1.25; -webkit-line-clamp: 2; }
@media (min-width: 600px) { html body .mais-grid.mais-grid-secao { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 339px) { html body .mais-grid.mais-grid-secao { grid-template-columns: minmax(0, 1fr); } }
/* As regras antigas escondem esses botoes por ID no telefone (peso de ID); dentro do menu eles
voltam com dois IDs no seletor, que e o unico jeito de vencer sem mexer na folha de correcoes. */
html body.sn-mobile-shell #headerMaisMenu #btnNotificacoes, html body.sn-mobile-shell #headerMaisMenu #btnChatHeader,
html body.sn-mobile-shell #headerMaisMenu #headerWhatsApp, html body.sn-mobile-shell #headerMaisMenu #headerThemeToggle,
html body.sn-mobile-shell #headerMaisMenu #headerAvatarBtn { display: flex !important; }
/* Sem depender da classe do body (o SeuCenoura nao a tem) e acima do :has() da folha de correcoes. */
html body .header-actions #btnHeaderAgua:not([style*="none"]) { display: flex !important; }
html body .header-actions #btnHeaderMais { display: flex !important; }
.app-header .header-content .header-actions .header-mais-menu#headerMaisMenu #btnNotificacoes,
.app-header .header-content .header-actions .header-mais-menu#headerMaisMenu #btnChatHeader,
.app-header .header-content .header-actions .header-mais-menu#headerMaisMenu #headerWhatsApp,
.app-header .header-content .header-actions .header-mais-menu#headerMaisMenu #headerThemeToggle,
.app-header .header-content .header-actions .header-mais-menu#headerMaisMenu #headerAvatarBtn { display: flex !important; }
/* A regra de tamanho dos filhos do .header-actions (40, 38 e 34 px por largura, com !important) nao vale
para a caixa do menu, que e um filho mas nao e botao. */
html body .header-content .header-actions > .header-mais-menu { width: auto !important; height: auto !important; min-width: 236px !important; min-height: 0 !important; }
/* O tamanho por largura dos .header-btn (40, 38 e 34 px com !important) e o fundo de botao nao valem
para as linhas do menu: cada linha e larga, de 44 px de altura, sem moldura. */
html body .header-mais-menu .header-btn { width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 44px !important; font-size: 14px !important; background: transparent !important; border: 0 !important; justify-content: flex-start !important; padding: 0 12px !important; border-radius: 10px !important; box-shadow: none !important; transform: none !important; }
html body .header-mais-menu .header-btn:hover, html body .header-mais-menu .header-btn:focus-visible { background: var(--brand-tint, #f1f5f9) !important; }
html.theme-dark body .header-mais-menu .header-btn:hover, html.theme-dark body .header-mais-menu .header-btn:focus-visible { background: #1e293b !important; }
html body .header-mais-menu .header-btn .badge { position: static !important; margin-left: auto; min-width: 22px; height: 20px; }
html body .header-btn--mais .header-mais-svg { width: 20px; height: 20px; display: block; }
/* ===== origem: css/app-redesign.css ===== */
/*
* app-redesign.css - App Paciente - Elevacao visual (2026-06-04)
*
* Camada de OVERRIDE final: carrega depois de app-revisao.css, entao vence a
* cascata para selectores de igual especificidade. Objetivo: elevar a presenca
* da marca, corrigir inputs <16px (zoom iOS), e refinar login/cards/nav/botoes.
*
* REGRAS:
* - Tenant-aware: cores solidas SEMPRE via tokens --brand-*. Verde literal so em
* brilhos/aneis translucidos (mesmo padrao ja usado no app.css legado).
* - color-mix mistura a partir de --brand-pastel para aquecer fundos sem perder
* o white-label (cada tenant aquece para a propria cor).
* - Reversivel: remover o deste arquivo restaura o visual anterior.
* - Contraste: o botao primario fica no verde escuro (AA 4.56:1 com texto branco);
* nao clarear o fundo do botao.
*/
:root {
--rd-brand-glow: 0 12px 30px -14px rgba(61, 96, 65, .48);
--rd-card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px -18px rgba(15, 23, 42, .22);
--rd-ring: 0 0 0 3px rgba(61, 96, 65, .18);
--rd-radius-card: 18px;
}
/* ===== 1. Inputs: 16px no mobile (anti zoom iOS) + foco de marca ===== */
@media (max-width: 768px) {
body .app-section input:not([type=checkbox]):not([type=radio]):not([type=range]),
body .app-section select,
body .app-section textarea,
.compras-busca input,
.rec-busca input,
.chat-search-input,
.cog-label input,
.cog-label select,
.sug-input,
.sug-select,
.sug-textarea,
.registrar-foto-label textarea {
font-size: 16px;
}
}
body .app-section input:focus,
body .app-section select:focus,
body .app-section textarea:focus {
border-color: var(--brand-primary);
box-shadow: var(--rd-ring);
outline: none;
}
/* ===== 2. Botao primario: verde escuro (AA) + brilho de marca + cantos suaves ===== */
.btn.btn-primary,
.btn-primary {
background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary-darker));
box-shadow: var(--rd-brand-glow);
border-radius: 14px;
}
.btn.btn-primary:hover:not(:disabled):not(.btn-loading),
.btn-primary:hover:not(:disabled):not(.btn-loading) {
box-shadow: 0 16px 36px -14px rgba(61, 96, 65, .58);
}
/* ===== 3. Bottom-nav: estado ativo com pill de marca mais presente ===== */
.nav-item.active .nav-item-icon {
background: color-mix(in srgb, var(--brand-pastel) 22%, #fff);
box-shadow: inset 0 0 0 1px rgba(61, 96, 65, .22);
}
/* ===== 4. Cards: elevacao (so raio+sombra; NAO mexer em border-color para nao
clobberar bordas laterais de status em cards internos). body .card vence app.css. ===== */
body .card {
border-radius: var(--rd-radius-card);
box-shadow: var(--rd-card-shadow);
}
/* ===== 5. Header: assinatura sutil de marca na sombra inferior ===== */
body .app-header {
box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 10px 24px -20px rgba(61, 96, 65, .55);
}
/* ===== 6. Login: card mais marcante + porta de entrada coerente ===== */
body .login-box {
border-radius: 24px;
box-shadow: 0 26px 64px -26px rgba(33, 52, 35, .45), 0 2px 6px rgba(15, 23, 42, .06);
}
/* Desktop: deixar o card respirar sem ficar perdido no vazio (1440px) */
@media (min-width: 920px) {
.login-container {
width: 100%;
max-width: 440px;
}
.login-box {
padding: 38px 40px;
}
}
/* ===== 7. Dark mode: manter coerencia da elevacao (theme-dark = mecanismo do app) ===== */
html.theme-dark body .card,
body.theme-dark .card {
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -18px rgba(0, 0, 0, .5);
}
/* ===== 8. 2026-06-12 (auditoria responsividade): anti zoom iOS - complemento =====
Campos que escapavam do guard da secao 1 (fora de .app-section ou com
classe propria de mesma especificidade declarada antes na cascata):
.clube-busca input 14px, .sc-input-bar input 15px, .command-palette-input 15px
(app.css) e .calc-form input/select 15px (app-deferred.css). Regra aditiva,
vence por ordem de cascata (este arquivo e o ultimo ). */
@media (max-width: 768px) {
.clube-busca input,
.sc-input-bar input,
.command-palette-input,
.calc-form input,
.calc-form select {
font-size: 16px;
}
}
/* ===== 9. 2026-06-12 (auditoria responsividade): touch targets >= 44px =====
Botoes de fechar/acoes com caixa fixa 28-36px (.mais-close/.sc-close 36,
.header-btn/.modal-close 32, .status-banner__close 28, .pdf-drawer-btn 36).
Sem mexer no layout: pseudo-elemento transparente expande a area de toque
apenas em ponteiro grosso (touch). Nenhum desses seletores usa ::after no
bundle (verificado 2026-06-12) e nenhum define position, logo o relative
nao desloca nada. */
@media (pointer: coarse) {
.mais-close,
.sc-close,
.modal-close,
.status-banner__close,
.pdf-drawer-btn,
.header-btn {
position: relative;
}
.mais-close::after,
.sc-close::after,
.modal-close::after,
.status-banner__close::after,
.pdf-drawer-btn::after,
.header-btn::after {
content: "";
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
}
.status-banner__close::after {
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
}
}
/* ===== 10. 2026-06-12 (auditoria responsividade): modal em viewport dinamico =====
.modal-content usa max-height:90vh; no iOS o vh e o viewport GRANDE (com a
barra de URL recolhida), entao em telas baixas o rodape do modal podia ficar
atras da barra. dvh acompanha o viewport visivel. Mesmo valor no desktop. */
@supports (height: 1dvh) {
.modal-overlay .modal-content {
max-height: 90dvh;
}
}
/* ===== 11. 2026-07-03 (mobile): avaliacao fisica — tabela vira CARD + resumo do topo =====
No mobile a tabela .av-ptbl (Parametro | Atual | Recomendacao | Situacao) tinha 4
colunas espremidas: os rotulos "Recomendacao"/"Situacao" e os textos quebravam letra
a letra ("palavras montadas"). Aqui cada linha vira um card legivel: nome + valor no
topo, badge de situacao e a recomendacao em linha propria (largura total). O cabecalho
de colunas some (nao faz sentido em cards). */
@media (max-width: 520px) {
.av-ptbl { overflow: visible !important; border-radius: 0 !important; }
.av-ptbl-head { display: none !important; }
/* 2026-09-18: a linha gastava TRES alturas de texto e media 145px em 390px.
Duas causas somadas. Primeira: cada celula ainda carregava o
`padding: 7px 10px` da tabela de desktop, que aqui vira padding dentro de
padding e dobra a altura de cada uma. Segunda: situacao e recomendacao
ocupavam uma linha cada, sendo que as duas juntas cabem numa. Agora sao
duas alturas: rotulo com o valor em cima, situacao com a recomendacao
embaixo. */
.av-ptbl-row {
display: grid !important;
grid-template-columns: 1fr auto !important;
grid-template-areas:
"param val"
"sit rec" !important;
column-gap: 10px;
row-gap: 4px;
align-items: baseline;
padding: 11px 13px !important;
margin-bottom: 8px;
border: 1px solid var(--border, #e5e7eb);
border-radius: 12px;
background: var(--card, #fff);
font-size: 13px !important;
}
/* A celula nao tem mais padding proprio: quem espaca e o cartao da linha. A
borda esquerda transparente de 3px tambem e heranca da tabela e so comia
largura. */
.av-ptbl-row span { padding: 0 !important; border-left: 0 !important; }
.av-ptbl-row .av-ptbl-col1 {
grid-area: param !important;
justify-self: start !important;
text-align: left !important;
font-weight: 700;
font-size: 12.5px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.av-ptbl-row .av-ptbl-val {
grid-area: val !important;
justify-self: end !important;
text-align: right !important;
font-size: 15px !important;
font-weight: 800;
white-space: nowrap;
}
.av-ptbl-row .av-ptbl-sit {
grid-area: sit !important;
justify-self: start !important;
text-align: left !important;
margin-top: 0;
}
.av-ptbl-row .av-ptbl-sit .av-badge { white-space: nowrap; }
.av-ptbl-row .av-ptbl-rec {
grid-area: rec !important;
justify-self: end !important;
text-align: right !important;
white-space: normal !important;
overflow-wrap: anywhere;
font-size: 11.5px !important;
line-height: 1.45;
/* #475569 contra o branco do cartao da 7,5:1; o #64748b anterior dava
4,4:1 e reprovava o AA por pouco, justo na linha que diz a faixa
recomendada. */
color: #475569;
margin-top: 0;
}
.av-ptbl-row.av-z0, .av-ptbl-row.av-z1 { background: var(--card, #fff) !important; }
/* Resumo do topo (.av-topo): IMC em destaque + colunas empilhadas com respiro. */
.av-topo { gap: 10px !important; }
.av-topo-col { flex: 1 1 100% !important; min-width: 0 !important; }
.av-topo-imc {
flex: 1 1 100% !important;
padding: 14px 12px !important;
border-radius: 14px !important;
}
.av-topo-imc-num { font-size: 30px !important; }
.av-topo-linha { font-size: 13.5px !important; }
}
/* ===== 12. 2026-07-16 (auditoria contraste): status-banner no tema escuro =====
*
* O tema escuro tratou o TEXTO do banner (html.theme-dark .status-banner.is-warning
* -> #fed7aa, .is-info -> #cdd9e3) mas esqueceu o ICONE e o botao FECHAR, que ficaram
* com a cor do tema claro. E as regras do claro sao mais especificas que a correcao
* do escuro, entao venciam mesmo no escuro:
* .status-banner.is-info .status-banner__icon (0,3,0) vencia
* html.theme-dark .status-banner__icon (0,2,1)
* Medido no navegador (theme-dark, fundo real do banner):
* is-info icone #2c4762 sobre #1c2535 = 1,60:1 fechar = 2,00:1
* is-warning icone #b45309 sobre #3e2e17 = 2,60:1 fechar = 3,83:1
* Aqui a cor do icone/fechar passa a ser a MESMA ja usada no texto do banner no
* escuro, o que da 9,65:1 (aviso) e 10,71:1 (informacao) e mantem a coerencia.
* Especificidade (0,4,1) vence as regras do claro.
*/
html.theme-dark .status-banner.is-info .status-banner__icon,
html.theme-dark .status-banner.is-info .status-banner__close {
color: #cdd9e3;
}
html.theme-dark .status-banner.is-warning .status-banner__icon,
html.theme-dark .status-banner.is-warning .status-banner__close {
color: #fed7aa;
}
/* ===== 13. 2026-07-16 (auditoria contraste): hex escuro fixo sem variante escura =====
*
* O app tem uma rede de resgate em app-revisao.css:
* html.theme-dark .main-content .card div:not([class*=badge]):not(...)
* que devolve #e2e8f0 a QUALQUER div dentro de um .card. Ela salva a maioria dos
* hex escuros herdados do tw-app.css. Os itens abaixo escapam da rede por um destes
* motivos e ficaram com letra escura sobre fundo escuro (medido no navegador):
* - nao sao div (h4, span, p, i) ou tem regra propria que vence a herança;
* - nao ficam dentro de .main-content .card (clube, prompt flutuante).
*/
/* 13a. Lives: ".lives-card-body h4,.med-card h4{color:#0f172a}" vem DEPOIS de
".lives-card-body h4{color:var(--text)}" e com a mesma especificidade (0,1,1),
entao o hex vencia. Antes: 1,22:1. Com o token: 11,9:1. */
html.theme-dark .lives-card-body h4 {
color: var(--text);
}
/* 13b. Legenda das lives e paragrafo da meditacao: #475569 sobre #1e293b = 1,93:1.
--text-muted no escuro (#94a3b8) da 6,1:1. */
html.theme-dark .lives-card-body span,
html.theme-dark .med-card p {
color: var(--text-muted);
}
/* 13c. Clube de vantagens: fica FORA de .main-content .card, entao a rede de
resgate nao alcanca. Texto #475569 sobre #0f172a = 2,36:1; icone
--brand-primary-darker (#3d6041) = 2,51:1. */
html.theme-dark .clube-info-item {
color: var(--text-muted);
}
html.theme-dark .clube-info-item i,
html.theme-dark .clube-info-item [data-lucide] {
color: var(--brand-pastel);
}
/* O icone do WhatsApp mantem o verde da marca dele (regra propria do app.css). */
html.theme-dark .clube-info-item .fa-whatsapp {
color: #25d366;
}
/* 13c-2. Miniatura sem imagem (.med-card-noimg): o fundo e um gradiente CINZA CLARO
(#cbd5e1 -> #94a3b8) nos dois temas, mas o icone era branco: 1,48:1 no claro e
1,20:1 no escuro (onde vira #e2e8f0). Ou seja: o icone de "sem miniatura" estava
invisivel sempre. #334155 da 6,97:1 na ponta clara e 4,04:1 na escura, acima dos
3:1 exigidos para elemento grafico. Serve aos dois temas, entao sem escopo.
O alvo e o , nao o .med-card-noimg: a rede de resgate de app-revisao.css
(especificidade 0,6,2) pinta QUALQUER div dentro de .main-content .card e
venceria a regra no proprio contêiner. O seletor dela termina em `div`, entao
o icone nao e alcancado e aqui so a heranca compete. */
.med-card-noimg > i,
.med-card-noimg > [data-lucide] {
color: #334155;
}
/* 13d. Prompt "Ativar modo escuro?": o card e ESCURO nos DOIS temas
(#0f172a no claro, #1e293b no escuro) mas o icone da lua e #b45309 (ambar
escuro): 3,56:1 no claro e 2,91:1 no escuro. Ironia de o convite para o modo
escuro ser o item menos legivel. #fbbf24 da 8,76:1 e serve aos dois temas,
por isso a regra NAO e escopada por tema. */
/* ============================================================
14. 2026-07-17 - Auditoria de contraste AA: verde de marca como
FUNDO de texto branco.
O padrao do sistema usava o verde medio #609165 (--accent / --brand-primary)
como fundo de texto branco. Medido no navegador: 3,66:1, abaixo dos 4,5:1
que a AA exige para texto normal. Reprovava nos DOIS temas, entao nao era
regressao do modo escuro: era divida antiga.
Correcao: o verde escuro que a marca JA tem (--brand-primary-dark #2f4a32,
o "escurecido ~18%" da bbar do PDF e do cabecalho de email) da 5,06:1, e o
--brand-primary-darker #3d6041 da 7,12:1. Nao e cor nova.
Tenant-aware por token, como manda o cabecalho deste arquivo: quem tem
white-label continua escurecendo para a PROPRIA cor.
O #609165 segue valido como acento e como fundo SEM texto branco em cima:
so muda onde o contraste reprovava. ============================================================ */
/* 14a. Card da proxima consulta: a ponta clara do gradiente era o #609165. */
.next-appointment {
background: linear-gradient(135deg, var(--brand-primary-dark, #2f4a32) 0, var(--brand-primary-darker, #213423) 100%);
}
/* 14b. Botoes dentro do card, no tema escuro: mesma ponta clara #609165.
O card em si NAO entra aqui: no escuro ele e um veu translucido
(rgba(96,145,101,.18) sobre fundo escuro), entao o branco por cima ja passa
folgado. So os dois botoes abaixo sao verde OPACO com texto branco. */
html.theme-dark .next-appointment .btn-confirm,
html.theme-dark .next-appointment .btn-confirmed-state {
background: linear-gradient(135deg, var(--brand-primary-dark, #2f4a32) 0, var(--brand-primary-darker, #213423) 100%) !important;
}
/* 14c. Editar foto do perfil: 12px branco sobre verde solido. */
.profile-avatar-edit {
background: var(--brand-primary-dark, #2f4a32);
}
/* 14d. Botao de agua do card compacto: 12,5px branco sobre verde solido. */
.water-card--compact .water-btn--inline {
background: var(--brand-primary-dark, #2f4a32);
}
/* 14e. Hover do botao da gaveta de PDF: o hover levava o fundo de volta ao
verde medio, entao o texto branco reprovava justamente ao passar o mouse. */
.pdf-drawer-btn:hover {
background: var(--brand-primary-dark, #2f4a32);
}
/* ===== 15. SeuCenoura (FAB) x botao de enviar do Chat =====
2026-07-22 (homologacao Dr. Jayme, defeito 1): na tela de Chat o botao
flutuante do SeuCenoura colidia com o botao de enviar mensagem.
Causa raiz: o FAB e position:fixed com bottom: 82px (valor cravado, pensado
so para "logo acima da bottom-nav"), enquanto o composer do chat
(.chat-input-area, ~180px medidos) ocupa exatamente essa faixa, com o
.chat-send colado na direita. Medido antes da correcao em 360px de largura:
FAB em 286-344 x 760-818 e botao de enviar em 289-333 x 757-801, ou seja
sobreposicao quase total. Empurrar alguns pixels nao resolve porque a altura
do composer muda com o tamanho da fonte, com a quebra dos chips de tipo e
com env(safe-area-inset-bottom) das barras de gestos.
Correcao: a posicao vertical do FAB passa a sair de --sc-fab-bottom, que o
seu-cenoura.js calcula medindo o topo real do composer sempre que a secao de
Chat entra em cena, quando a janela muda de tamanho e quando o teclado abre
ou fecha. Os valores abaixo sao o fallback de CSS puro (JS indisponivel):
fora do Chat reproduzem exatamente o comportamento anterior
(65 + 0 + 17 = 82px) e, dentro do Chat, sobem o FAB acima do composer.
Sem !important: esta camada carrega depois do app.css. */
.sc-fab {
bottom: var(--sc-fab-bottom, calc(var(--nav-height, 65px) + env(safe-area-inset-bottom, 0px) + 17px));
}
/* Fallback do Chat: altura tipica do composer (rotulo + chips de tipo + linha
do input + paddings) mais um respiro de 14px (medido: 179px em 360/390/414px). */
html.sc-chat-ativo .sc-fab {
bottom: var(--sc-fab-bottom, calc(var(--nav-height, 65px) + env(safe-area-inset-bottom, 0px) + 196px));
}
/* Teclado virtual aberto dentro do Chat: o FAB sai de cena para nao disputar
espaco com o composer ancorado no topo do teclado. */
.sc-fab.sc-fab-oculto {
display: none;
}
@media (min-width: 1024px) {
/* Desktop nao tem bottom-nav: base de 24px, mesma do layout original. */
.sc-fab {
bottom: var(--sc-fab-bottom, 24px);
}
html.sc-chat-ativo .sc-fab {
bottom: var(--sc-fab-bottom, calc(var(--nav-height, 65px) + 196px));
}
}
/* ===== origem: css/app-fixes.css ===== */
/* =====================================================================
app-fixes.css : camada final de correcoes (2026-07-25)
Carregada DEPOIS de app-redesign.css. Corrige, na ordem:
1. Rolagem indevida da tela (trava global + trava de overlay)
2. Card "Proxima consulta" da home (layout, contraste, 320px)
3. Gaveta "Mais" (barra inferior sumindo + caixa dupla no modo escuro)
4. Chat (espaco vazio acima do titulo, abaixo do campo de mensagem, lista
de mensagens curta grudando no topo, e agrupamento do mesmo remetente)
5. Responsividade transversal
Sem !important salvo onde a regra anterior ja usava !important.
Reverter: comentar o de app-fixes.css no index.html.
===================================================================== */
/* =====================================================================
1. ROLAGEM : a tela nao pode "correr" em nenhum eixo
---------------------------------------------------------------------
Sintoma relatado: ao baixar um arquivo (PDF do plano, avaliacao,
compartilhamento) a tela corria para cima, para baixo e para os lados.
Causas: (a) nenhum eixo horizontal estava travado no documento;
(b) os modais abriam sem travar o scroll do fundo, e no iOS
"overflow:hidden" no body sozinho NAO trava (precisa position:fixed);
(c) o temporario era anexado ao body sem sair do fluxo.
===================================================================== */
/* ATENCAO a arquitetura deste app: o app.css ja define
`body,html{height:100%;overflow:hidden;overflow-x:hidden}` e quem realmente
rola e o proprio (overflow-y:auto, altura travada em 100%).
Portanto NAO se pode usar aqui o padrao classico de trava
(`body{position:fixed;top:-Ypx}`): isso quebraria o container de rolagem.
Como o body E o container, `overflow:hidden` nele trava de verdade,
inclusive no iOS, e o scrollTop e preservado. */
html {
overscroll-behavior-x: none;
}
body {
max-width: 100%;
overscroll-behavior: contain;
}
/* Trava de rolagem enquanto um overlay esta aberto. */
body.scroll-locked {
overflow: hidden;
overscroll-behavior: none;
touch-action: none;
}
/* O conteudo do overlay continua rolando normalmente.
2026-08-11 (auditoria fluxos): SeuCenoura, command palette e uiConfirm/uiPrompt
faltavam aqui; com a trava ativa, a rolagem por toque deles morria. */
body.scroll-locked .modal-content,
body.scroll-locked .modal-body,
body.scroll-locked .mais-content,
body.scroll-locked .err-modal,
body.scroll-locked .pdf-drawer,
body.scroll-locked .chat-messages,
body.scroll-locked .sc-modal-inner,
body.scroll-locked .command-palette-list,
body.scroll-locked .uim-box {
touch-action: pan-y;
overscroll-behavior: contain;
}
/* Ancora temporaria de download: fora do fluxo, sem gerar linha no body. */
a[download],
a[data-download-temp] {
max-width: 100%;
}
/* Elementos injetados no fim do body para disparar download nunca podem
empurrar o layout nem criar area rolavel. */
body > a[href^="blob:"],
body > a[data-download-temp] {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
/* =====================================================================
2. CARD "PROXIMA CONSULTA"
---------------------------------------------------------------------
Problemas corrigidos:
- "Desmarcar" era branco a 20% sobre verde: praticamente ilegivel
- selo de status cor de creme brigando com o verde da marca
- linha do tipo de consulta e selo com alinhamento fora de base
- local ("Online") estilizado por style inline no JS
- a 320px os dois botoes quebravam com alturas diferentes
===================================================================== */
.next-appointment {
display: flex;
flex-direction: column;
gap: 2px;
padding: 13px 16px;
overflow: hidden;
}
.next-appointment .label {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.08em;
opacity: 0.82;
margin-bottom: 2px;
}
/* Linha principal: data e hora a esquerda, tipo/status/local a direita.
Antes eram tres linhas empilhadas e o card ficava alto demais. */
.na-slim .na-linha {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px 12px;
flex-wrap: wrap;
}
.next-appointment .date {
font-size: 19px;
line-height: 1.25;
margin: 0;
}
/* Sem margin-left:auto de proposito: quando a linha quebra no celular, a
meta desce alinhada a esquerda, embaixo da data, em vez de ficar solta
no canto direito. Em telas largas o space-between ja joga tudo a direita. */
.na-slim .na-meta {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
min-width: 0;
}
/* Tipo de consulta */
.next-appointment .time {
display: inline-flex;
align-items: center;
font-size: 12.5px;
opacity: 0.92;
}
.next-appointment .time .status-badge {
margin-left: 0;
}
/* Local (Online / presencial / domicilio) */
.next-appointment .local {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
opacity: 0.88;
margin-top: 0;
}
/* Separador discreto entre tipo e local, so quando os dois existem */
.na-slim .na-meta > .time + .status-badge::before {
content: none;
}
/* Selo de status: pastilha de vidro, mesma familia visual do card.
Substitui o creme #fdf6ec que destoava do verde. */
/* A regra antiga alcanca tambem os descendentes
(.next-appointment .status-badge *) e fixa -webkit-text-fill-color:#92400e
com !important, que vence o color na hora de pintar o texto. Por isso aqui
o seletor precisa cobrir os mesmos descendentes e zerar as duas propriedades. */
.next-appointment .status-badge {
background: rgba(255, 255, 255, 0.16) !important;
border: 1px solid rgba(255, 255, 255, 0.42) !important;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.06em;
padding: 3px 9px;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.next-appointment .status-badge,
.next-appointment .status-badge * {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
.next-appointment .status-badge.confirmado {
background: rgba(255, 255, 255, 0.92) !important;
border-color: rgba(255, 255, 255, 0.92) !important;
}
.next-appointment .status-badge.confirmado,
.next-appointment .status-badge.confirmado * {
color: var(--brand-primary-darker, #213423) !important;
-webkit-text-fill-color: var(--brand-primary-darker, #213423) !important;
}
.next-appointment .status-badge.cancelado {
background: rgba(220, 38, 38, 0.9) !important;
border-color: rgba(254, 202, 202, 0.6) !important;
}
.na-chip,
.na-chip * {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
/* Selos de proximidade (Hoje / Amanha / Online) que antes vinham com
style inline dentro do JS. */
.na-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.4;
white-space: nowrap;
}
.na-chip--hoje {
background: #c2410c;
}
.na-chip--amanha {
background: #b45309;
}
.na-chip--online {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.45);
}
/* Acoes */
.next-appointment .actions {
display: flex;
gap: 8px;
margin-top: 11px;
flex-wrap: wrap;
}
.next-appointment .btn-action {
flex: 1 1 132px;
min-width: 132px;
/* 44px e o minimo de alvo de toque das diretrizes de iOS e Android. */
min-height: 44px;
max-width: 320px;
padding: 10px 10px;
font-size: 12.5px;
font-weight: 700;
border-radius: 12px;
line-height: 1.2;
/* "Confirmar presenca" quebrava em duas linhas e engordava o card. */
white-space: nowrap;
gap: 5px;
}
/* Botao secundario legivel: borda solida + fundo mais denso.
Antes: rgba(255,255,255,.2) sem borda = contraste ~1,5:1. */
.next-appointment .btn-cancel {
background: rgba(255, 255, 255, 0.14);
border: 1.5px solid rgba(255, 255, 255, 0.66);
color: #fff;
}
.next-appointment .btn-cancel:hover,
.next-appointment .btn-cancel:focus-visible {
background: rgba(255, 255, 255, 0.24);
border-color: #fff;
}
.next-appointment .btn-confirm {
background: #fff;
border: 1.5px solid #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
}
.next-appointment .btn-video {
background: rgba(255, 255, 255, 0.14);
border: 1.5px solid rgba(255, 255, 255, 0.66);
color: #fff;
}
.next-appointment .btn-confirmed-state {
flex: 1 1 100%;
min-width: 100%;
justify-content: center;
background: rgba(255, 255, 255, 0.95);
border: 1.5px solid rgba(255, 255, 255, 0.95);
font-weight: 700;
cursor: default;
box-shadow: none;
}
/* Estado ja confirmado: card sem acao pendente, tom mais sereno */
.next-appointment.confirmed .actions {
margin-top: 12px;
}
/* Telas estreitas: botoes empilhados de largura cheia (nunca meio-quebrados) */
@media (max-width: 379px) {
.next-appointment {
padding: 14px 15px;
}
.next-appointment .date {
font-size: 17px;
}
.next-appointment .btn-action {
flex: 1 1 100%;
min-width: 100%;
}
}
/* Modo escuro: o card e um veu translucido. O botao secundario precisa de
borda ainda mais firme para nao sumir no fundo. */
/* A regra anterior de app.css usa !important nestes tres valores, entao aqui
e obrigatorio acompanhar para conseguir subir o contraste da borda. */
html.theme-dark .next-appointment .btn-cancel,
html.theme-dark .next-appointment .btn-video {
background: rgba(255, 255, 255, 0.12) !important;
color: #fff !important;
border: 1.5px solid rgba(255, 255, 255, 0.58) !important;
}
html.theme-dark .next-appointment .btn-cancel:hover,
html.theme-dark .next-appointment .btn-cancel:focus-visible,
html.theme-dark .next-appointment .btn-video:hover,
html.theme-dark .next-appointment .btn-video:focus-visible {
background: rgba(255, 255, 255, 0.22) !important;
border-color: rgba(255, 255, 255, 0.85) !important;
}
html.theme-dark .next-appointment .status-badge {
background: rgba(255, 255, 255, 0.14) !important;
border-color: rgba(255, 255, 255, 0.38) !important;
}
/* =====================================================================
3. GAVETA "MAIS"
---------------------------------------------------------------------
3a. 2026-08-30 (revisao dos tres dominios): a gaveta se declara
role="dialog" aria-modal="true" e era a camada MAIS BAIXA da tela.
.mais-drawer vinha com z-index 150 do app.css enquanto a barra
inferior estava forcada aqui em 170, o cabecalho vale 200 e o balao
do SeuCenoura (.sc-fab) vale 998. Medido em 320x568 com
elementFromPoint e a gaveta ABERTA: os CINCO itens da barra inferior
continuavam recebendo o clique por cima do dialogo e o mascote
cobria o item "Mentorias". Dialogo modal que deixa a camada de tras
receber o toque nao e modal.
A compensacao antiga (recuar a folha a altura da barra) custava 82px
de uma tela de 568px: 8 dos 18 itens ficavam sem nenhum ponto
alcancavel antes de rolar, entre eles "Servicos" e "Clube".
Agora a gaveta sobe para 999: acima da barra, do cabecalho e do
mascote, e ainda abaixo dos modais (.modal-overlay, 1000). O recuo
de 82px volta para a folha e o teto da folha passa a parar logo
abaixo do cabecalho (medido: 61px de altura em 320x568).
Medicao depois, mesmo metodo: 2 de 18 sem ponto alcancavel antes de
rolar (Perfil e Sair, a 122px de rolagem numa folha que rola), zero
item de barra e zero mascote recebendo clique.
Preco assumido: com a gaveta aberta a barra inferior fica sob o veu,
que e exatamente o que aria-modal promete. Manter a barra clicavel
exigiria tirar o aria-modal do dialogo, ou seja, trocar um defeito
que se ve por um defeito de leitor de tela.
3b. Modo escuro: .mais-item e .mais-item-icon ficavam com o MESMO
#1e293b, entao o quadrado do icone virava uma caixa fantasma com
borda (lido pelo dono como "sombra"). Agora o item e transparente
e so o icone tem superficie, com o verde pastel da marca.
===================================================================== */
/* 3a. a gaveta e um dialogo modal: fica acima da barra, do cabecalho e do
mascote. A barra volta ao z-index 100 que o app.css ja declara: o 170
daqui existia so para vencer a gaveta. */
.mais-drawer {
z-index: 999;
}
.mais-drawer .mais-backdrop {
z-index: 0;
}
.mais-sheet {
/* A folha cobre a barra inferior, entao nao precisa mais recuar por ela. */
padding-bottom: calc(var(--safe-bottom, 0px) + 10px);
max-height: min(92svh, calc(100svh - 64px));
}
.mais-content {
padding-bottom: 8px;
}
/* 3b. modo escuro sem caixa dupla */
html.theme-dark .mais-drawer .mais-item {
background: transparent;
border: 0;
box-shadow: none;
}
html.theme-dark .mais-drawer .mais-item-icon {
background: rgba(134, 201, 140, 0.14);
color: var(--brand-pastel, #86c98c);
border: 1px solid rgba(134, 201, 140, 0.3);
box-shadow: none;
}
html.theme-dark .mais-drawer .mais-item:hover .mais-item-icon,
html.theme-dark .mais-drawer .mais-item:focus-visible .mais-item-icon {
background: rgba(134, 201, 140, 0.26);
border-color: rgba(134, 201, 140, 0.55);
color: #fff;
}
html.theme-dark .mais-drawer .mais-item:hover,
html.theme-dark .mais-drawer .mais-item:focus-visible {
background: rgba(148, 163, 184, 0.1);
}
/* Mesma limpeza na secao #sec-mais (lista compacta, atalho legado):
o quadrado do icone ficava sem superficie propria e o icone saia cinza,
perdendo a identidade da marca no modo escuro. */
html.theme-dark #sec-mais .mais-item .mais-item-icon {
background: rgba(134, 201, 140, 0.14);
color: var(--brand-pastel, #86c98c);
border: 1px solid rgba(134, 201, 140, 0.3);
box-shadow: none;
}
html.theme-dark #sec-mais .mais-item .mais-item-icon--logout {
background: rgba(248, 113, 113, 0.14);
color: #fca5a5;
border-color: rgba(248, 113, 113, 0.32);
}
/* o botao de sair mantem o vermelho, sem virar caixa dupla */
html.theme-dark .mais-drawer .mais-item-icon--logout {
background: rgba(248, 113, 113, 0.14);
color: #fca5a5;
border-color: rgba(248, 113, 113, 0.32);
}
/* mesma limpeza no tema claro: o item e transparente, o icone e a superficie */
.mais-drawer .mais-item {
background: transparent;
border: 0;
box-shadow: none;
}
/* rotulos longos ("Avaliacao neurocognitiva", "Clube de descontos") nao
podem deixar as celulas da grade com alturas diferentes */
.mais-grid {
align-items: start;
}
.mais-drawer .mais-item {
min-height: 86px;
justify-content: flex-start;
}
.mais-item-label {
-webkit-line-clamp: 2;
}
/* =====================================================================
4. CHAT
---------------------------------------------------------------------
4a. Espaco vazio ACIMA de "Fale Conosco": body.has-back-btn reserva
50px fixos para o botao flutuante "Voltar". No chat, que e uma
tela de altura travada, esses 50px viravam uma faixa morta. Agora
o chat usa um botao de voltar DENTRO do cabecalho do card e o
botao flutuante fica oculto.
4b. Espaco vazio ABAIXO do campo de mensagem: .chat-input-area e
sticky com bottom:var(--kb-h). Quando --kb-h ficava preso em um
valor > 0 (barra do Safari confundida com teclado) o composer
subia e abria um vao. O js/chat-keyboard.js foi corrigido; aqui
fica a defesa em CSS.
4c. Conversa curta grudava no TOPO da lista: .chat-messages e flex-column
sem justify-content, entao o alinhamento padrao (flex-start) empurra
as bolhas para cima e sobra uma faixa vazia inteira entre a ultima
mensagem e o composer. Todo chat de referencia (WhatsApp, iMessage)
cresce a partir do rodape.
4d. Mensagens seguidas do MESMO remetente (nutricionista) repetiam o
cabecalho com avatar e nome em toda bolha, plantando espaco extra que
deveria estar junto em vez de separado.
===================================================================== */
/* 4a. no chat, sem faixa reservada para o botao flutuante */
body.has-back-btn:has(#sec-chat.active) .main-content {
padding-top: calc(var(--header-height, 60px) + var(--safe-top, 0px) + var(--hero-top-gap, 8px));
}
body:has(#sec-chat.active) .page-back-btn {
display: none;
}
body:has(#sec-chat.active) #sec-chat.app-section.active > .card {
margin-top: 8px;
}
/* botao de voltar embutido no cabecalho do chat */
.chat-header-back {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 44px;
min-height: 40px;
padding: 6px 12px 6px 9px;
margin-right: 4px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--bg);
color: var(--brand-primary-darker, #213423);
font-family: inherit;
font-size: 12.5px;
font-weight: 700;
line-height: 1;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease, border-color 0.15s ease;
}
.chat-header-back:hover,
.chat-header-back:focus-visible {
background: var(--brand-tint, #e8f7ee);
border-color: var(--brand-primary-dark, #2f4a32);
}
html.theme-dark .chat-header-back {
background: rgba(148, 163, 184, 0.1);
border-color: rgba(134, 201, 140, 0.32);
color: var(--brand-pastel, #86c98c);
}
#sec-chat .card-header {
display: flex;
align-items: center;
gap: 8px;
padding-top: 10px;
padding-bottom: 10px;
}
#sec-chat .card-header h3 {
flex: 1 1 auto;
min-width: 0;
justify-content: center;
}
/* compensa o botao a esquerda para o titulo continuar opticamente central */
#sec-chat .card-header:has(.chat-header-back) h3 {
margin-right: 56px;
}
/* 4b. composer colado no rodape do thread */
body:has(#sec-chat.active) .chat-thread .chat-input-area {
bottom: 0;
padding-bottom: max(12px, var(--safe-bottom, 0px));
}
/* CAUSA RAIZ do "nao consigo ver a parte superior do chat e sobra um vao
embaixo" (relato de 25/07):
`body.logged-in` recebe `padding-bottom: calc(--nav-height + --safe-bottom
+ 8px)` para o conteudo nao terminar atras da barra inferior. Isso e certo
nas telas que rolam. Mas o Chat trava a altura em 100svh e ja reserva a
barra no proprio .main-content, entao esses ~73px viram FOLGA ROLAVEL: o
body desliza e leva o cabecalho do chat para tras do header fixo, abrindo
exatamente o mesmo tanto de vazio embaixo do campo de mensagem.
Com o Chat ativo o body nao pode ter essa almofada. */
body.logged-in:has(#sec-chat.active) {
padding-bottom: 0;
}
/* Reserva no proprio .main-content, medida pela altura real da barra.
O !important acompanha a regra anterior do app.css, que tambem usa. */
body:has(#sec-chat.active) .main-content {
padding-bottom: calc(var(--nav-height, 65px) + var(--safe-bottom, 0px) + 16px) !important;
}
/* area de mensagens sempre com altura util, mesmo em telas baixas */
body:has(#sec-chat.active) .chat-thread .chat-messages {
min-height: 96px;
}
/* 4c. com poucas mensagens elas descem ate encostar no composer, igual a
qualquer chat de referencia; com muitas, o overflow-y:auto de sempre
continua rolando normalmente.
E `margin-top:auto` no primeiro filho, e NAO `justify-content:flex-end` no
container: num container rolavel, o flex-end empurra o inicio do conteudo
para FORA da area de rolagem quando a conversa passa da altura da tela, e o
trecho que vazou fica inalcancavel (a rolagem nao chega ate ele). E o modo de
falhar mais grave possivel aqui, porque so aparece em conversa LONGA, que e
justamente a de quem usa o app, e o Safari do iOS e onde mais morde.
Com a margem automatica o efeito visual e o mesmo na conversa curta e o
comportamento volta ao normal assim que o conteudo passa da altura. */
body:has(#sec-chat.active) .chat-thread .chat-messages > *:first-child {
margin-top: auto;
}
/* excecao: tela SEM nenhuma mensagem ainda nao deve colar no composer, fica
centralizada como qualquer estado vazio do app (empty-chat e o placeholder
estatico do HTML antes do JS responder; empty-mascote e o que renderMensagens
desenha quando a lista chega vazia). Margem automatica nos DOIS lados: o
mesmo mecanismo do item acima, sem misturar com justify-content. */
body:has(#sec-chat.active) .chat-thread .chat-messages > .empty-chat:first-child,
body:has(#sec-chat.active) .chat-thread .chat-messages > .empty-mascote:first-child {
margin-top: auto;
margin-bottom: auto;
}
/* 4d. o separador de data ja quebra a sequencia no DOM (o seletor "+" so casa
bolhas REALMENTE adjacentes), entao o cabecalho volta sozinho quando muda
o dia ou quando o paciente responde no meio da conversa. */
.chat-msg.recebida.from-nutri + .chat-msg.recebida.from-nutri .chat-msg-author {
display: none;
}
.chat-msg.recebida.from-nutri + .chat-msg.recebida.from-nutri {
margin-top: -8px; /* gap:12px do container vira 4px so entre bolhas do mesmo grupo */
}
/* em paisagem o composer nao pode ocupar metade da tela */
@media (orientation: landscape) and (max-height: 500px) {
.chat-tipo-label,
.chat-tipo-select {
display: none;
}
body:has(#sec-chat.active) .chat-thread .chat-input-area {
padding-top: 8px;
}
}
/* =====================================================================
5. RESPONSIVIDADE TRANSVERSAL
===================================================================== */
/* Nenhum bloco pode furar a largura da tela. */
.main-content img,
.main-content video,
.main-content iframe,
.main-content canvas,
.main-content table,
.main-content pre {
max-width: 100%;
}
/* Palavras longas (e-mails, URLs, nomes de arquivo) quebram em vez de
alargar o card. */
.card-body,
.mais-item-label,
.next-appointment .date,
.doc-item,
.agenda-item,
.chat-msg {
overflow-wrap: anywhere;
}
/* Faixas roláveis horizontais (abas de receitas, dias do plano) ficam
contidas: rolam por dentro, sem arrastar a pagina. */
.rec-tabs,
.dias-tabs,
.chat-sidebar-filtros,
.orientacao-chips {
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.rec-tabs::-webkit-scrollbar,
.dias-tabs::-webkit-scrollbar,
.chat-sidebar-filtros::-webkit-scrollbar {
display: none;
}
/* ---------------------------------------------------------------------
5a. Alvos de toque
Auditoria de 25/07 em 320/360/390/430px: varios controles abaixo do
minimo de 44px das diretrizes de iOS e Android. Os piores eram links
de 16px e 21px de altura, impossiveis de acertar com o polegar.
--------------------------------------------------------------------- */
.refeicao-foto-btn,
.registrar-foto-btn,
.plano-acao-btn,
.water-btn,
.theme-pill,
.profile-btn,
.orientacao-chip,
.forms-cta-btn {
min-height: 44px;
}
/* Alguns destes tinham `height` fixo (38px, 32px), que anula min-height.
Sem `height:auto` o min-height acima nao teria efeito nenhum. */
.plano-acao-btn,
.water-btn,
.theme-pill,
.refeicao-foto-btn {
height: auto;
}
/* Tres controles ficavam abaixo do minimo por regras mais especificas que a
de cima (38px, 32px e 36px). O reforco vale so em ponteiro grosso (dedo):
no mouse a densidade compacta original e mantida de proposito. */
@media (pointer: coarse) {
.plano-acoes.plano-acoes-rodape .plano-acao-btn {
min-height: 44px;
}
.water-card--compact .water-btn--inline {
min-height: 44px;
padding: 8px 14px;
}
.profile-btn.danger-link,
.profile-btn.website-link {
min-height: 44px;
}
}
/* Links de texto que funcionam como botao ganham area de toque sem
mudar o desenho: o padding entra por dentro da linha. */
.parceiro-insta,
.mentoria-link,
.servico-link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-top: 4px;
padding-bottom: 4px;
}
/* ---------------------------------------------------------------------
5b. Descricao do hero nao pode ser cortada
".home-hero-cta-desc" vinha com line-clamp e virava "Leva 2 minutos.
Ajuda seu nutricioni..." ja em 390px.
--------------------------------------------------------------------- */
.home-hero-cta-content {
min-width: 0;
}
.home-hero-cta-title,
.home-hero-cta-desc {
display: block;
overflow: visible;
text-overflow: clip;
white-space: normal;
-webkit-line-clamp: none;
}
/* Em celular o botao desce para a linha de baixo, em largura cheia. Enquanto
ele disputava espaco na mesma linha, ou o titulo ou a descricao acabava
cortado com reticencias. */
@media (max-width: 480px) {
.home-hero-cta {
flex-wrap: wrap;
row-gap: 10px;
align-items: center;
}
.home-hero-cta-icon {
flex: 0 0 auto;
}
/* base 0 + min-width 0: o texto encolhe e continua ao lado do icone em
vez de cair para a linha de baixo e deixar o icone orfao. */
.home-hero-cta-content {
flex: 1 1 0;
min-width: 0;
}
.home-hero-cta-btn {
flex: 1 1 100%;
margin-top: 0;
}
}
/* ---------------------------------------------------------------------
5c. Cabecalho em telas estreitas
A 320px os seis botoes do cabecalho estouravam o proprio container e
o primeiro deles passava por cima da logomarca (o selo "97" cobria o
texto). Agora a logomarca encolhe e as acoes nunca invadem a esquerda.
--------------------------------------------------------------------- */
.app-header .header-content {
gap: 8px;
}
.app-header .header-brand,
.app-header .header-user {
min-width: 0;
flex-shrink: 1;
overflow: hidden;
}
.app-header .header-actions {
flex-shrink: 0;
flex-wrap: nowrap;
}
@media (max-width: 400px) {
.app-header .header-actions {
gap: 3px;
}
.app-header .header-brand img,
.app-header .header-brand svg {
max-width: 100%;
height: auto;
}
}
@media (max-width: 340px) {
/* Ultimo recurso: a marca sai e as acoes ficam inteiras e tocaveis,
distribuidas na largura toda em vez de amontoadas no centro. */
.app-header .header-brand {
display: none;
}
.app-header .header-actions {
flex: 1 1 auto;
justify-content: space-between;
}
}
/* Telas muito estreitas (<=360px): respiro menor, alvos de toque mantidos */
@media (max-width: 360px) {
.home-hero-cta {
flex-wrap: wrap;
}
.home-hero-cta-btn {
flex: 1 1 100%;
margin-top: 8px;
}
.status-banner {
align-items: flex-start;
}
}
/* Paisagem em celular: cabecalho e barra encolhem para sobrar conteudo */
@media (orientation: landscape) and (max-height: 460px) {
:root {
--header-height: 52px;
--nav-height: 56px;
}
.app-header {
padding-top: calc(6px + var(--safe-top, 0px));
padding-bottom: 6px;
}
.nav-item span {
font-size: 9px;
}
}
/* Tablets e telas grandes: o app centraliza, mas o card de consulta e a
gaveta nao podem esticar demais. */
@media (min-width: 768px) {
.mais-sheet {
border-radius: 24px;
margin-bottom: calc(var(--nav-height, 65px) + var(--safe-bottom, 0px) + 12px);
max-height: min(80svh, calc(100svh - 140px));
}
.mais-sheet {
padding-bottom: 12px;
}
}
/* Preferencia de menos movimento: sem transform nas gavetas */
@media (prefers-reduced-motion: reduce) {
.mais-sheet,
.chat-input-area {
transition: none;
}
}
/* =====================================================================
9. GAVETA "MAIS": TOM POR GRUPO (2026-08-04)
---------------------------------------------------------------------
A marcacao ja prometia isto nos comentarios ("tons emerald", "tons
amber/sky", "violet/indigo"), mas nada disso existia no CSS: os 18
icones saiam todos do mesmo cinza-esverdeado. Com quatro grupos
identicos, o titulo do grupo era o UNICO sinal de separacao, e titulo
de 9,5px em caixa alta nao segura divisao nenhuma num celular.
Agora cada grupo tem superficie e tinta proprias, entao o olho acha o
bloco antes de ler o rotulo. Fica no app-fixes.css porque este arquivo
e o ultimo da cascata e ja e dono das outras regras .mais-* (as do
app.css perderiam para as daqui).
===================================================================== */
.mais-group-title {
display: flex;
align-items: center;
gap: 7px;
}
/* Marcador do tom antes do titulo: e o mesmo sinal do icone, em miniatura */
.mais-group-title::before {
content: '';
width: 14px;
height: 3px;
border-radius: 999px;
background: currentColor;
flex: none;
opacity: .85;
}
/* --- verde da marca: o nucleo do acompanhamento --- */
.mais-group[data-tom="acompanhamento"] .mais-group-title { color: var(--brand-primary-darker, #213423); }
/* --tenant-cor-tint direto, e NAO --brand-tint: o fallback de --brand-tint e
#f1f5f9, um cinza neutro (conferido no navegador). Usando aquele token o
grupo do acompanhamento saia cinza, sem tom nenhum, enquanto ambar e indigo
apareciam: o verde era o unico grupo sem identidade. Assim o tenant
white-label continua mandando na cor e o padrao e o verde da marca. */
.mais-drawer .mais-group[data-tom="acompanhamento"] .mais-item-icon {
background: var(--tenant-cor-tint, #e8f7ee);
color: var(--brand-primary-darker, #213423);
border-color: #cfe7d2;
}
/* --- ambar: o que se usa fora da consulta --- */
.mais-group[data-tom="diaadia"] .mais-group-title { color: #92400e; }
.mais-drawer .mais-group[data-tom="diaadia"] .mais-item-icon {
background: #fef3c7;
color: #92400e;
border-color: #fde68a;
}
/* --- indigo: conteudo e oferta da clinica --- */
.mais-group[data-tom="clinica"] .mais-group-title { color: #3730a3; }
.mais-drawer .mais-group[data-tom="clinica"] .mais-item-icon {
background: #e0e7ff;
color: #3730a3;
border-color: #c7d2fe;
}
/* --- neutro: conta --- */
.mais-group[data-tom="conta"] .mais-group-title { color: #475569; }
.mais-drawer .mais-group[data-tom="conta"] .mais-item-icon {
background: #f1f5f9;
color: #475569;
border-color: #e2e8f0;
}
/* Modo escuro: pelicula translucida em vez do pastel, que sobre #0f172a
viraria adesivo fluorescente. Precisa vencer a regra generica de
html.theme-dark .mais-drawer .mais-item-icon do bloco 3b, logo acima. */
html.theme-dark .mais-group[data-tom="acompanhamento"] .mais-group-title { color: var(--brand-pastel, #86c98c); }
html.theme-dark .mais-drawer .mais-group[data-tom="acompanhamento"] .mais-item-icon {
background: rgba(134, 201, 140, .14);
color: var(--brand-pastel, #86c98c);
border-color: rgba(134, 201, 140, .3);
}
html.theme-dark .mais-group[data-tom="diaadia"] .mais-group-title { color: #fcd34d; }
html.theme-dark .mais-drawer .mais-group[data-tom="diaadia"] .mais-item-icon {
background: rgba(252, 211, 77, .13);
color: #fcd34d;
border-color: rgba(252, 211, 77, .28);
}
html.theme-dark .mais-group[data-tom="clinica"] .mais-group-title { color: #a5b4fc; }
html.theme-dark .mais-drawer .mais-group[data-tom="clinica"] .mais-item-icon {
background: rgba(165, 180, 252, .13);
color: #a5b4fc;
border-color: rgba(165, 180, 252, .28);
}
html.theme-dark .mais-group[data-tom="conta"] .mais-group-title { color: #94a3b8; }
html.theme-dark .mais-drawer .mais-group[data-tom="conta"] .mais-item-icon {
background: rgba(148, 163, 184, .13);
color: #cbd5e1;
border-color: rgba(148, 163, 184, .28);
}
/* O "Sair" mantem o vermelho mesmo dentro do grupo neutro: e a unica acao
destrutiva da gaveta e nao pode se parecer com "Perfil", que fica ao lado. */
.mais-drawer .mais-group[data-tom="conta"] .mais-item-icon--logout {
background: #fef2f2;
color: #991b1b;
border-color: #fecaca;
}
html.theme-dark .mais-drawer .mais-group[data-tom="conta"] .mais-item-icon--logout {
background: rgba(248, 113, 113, .14);
color: #fca5a5;
border-color: rgba(248, 113, 113, .32);
}
/* Altura minima de 86px (bloco 3) foi calculada para rotulo de duas linhas.
Nenhum rotulo passa de uma linha desde a reorganizacao, entao a celula
sobrava ~18px de vazio em cada uma das seis linhas da grade. */
.mais-drawer .mais-item { min-height: 74px; }
@media (max-height: 720px) {
.mais-drawer .mais-item { min-height: 66px; }
/* 9,5px era pequeno demais para rotulo em tela pequena. O espaco veio da
altura morta da celula, nao de espremer mais o texto. */
.mais-item-label { font-size: 10px; }
}
/* A 5a coluna da gaveta estava declarada DUAS vezes: uma no trecho legivel do
app.css (removida, com a medicao no comentario de la) e outra dentro do
trecho minificado do mesmo arquivo, que sobreviveu. Como mexer no blob
minificado a mao e pedir para quebrar outra coisa, a correcao fica aqui, no
ultimo arquivo da cascata. Medido no iPhone SE (375x667): com os grupos de
7, 4, 6 e 2 itens, 4 e 5 colunas dao as MESMAS 6 linhas e a MESMA altura de
544px, entao a 5a coluna so encolhia icone e rotulo de graca. */
@media (max-height: 720px) {
.mais-drawer .mais-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ============================================================================
CORREÇÃO 2026-08-04: `--border` ERA UM CICLO NO TEMA CLARO E APAGAVA
TODA BORDA ESCRITA SEM FALLBACK.
Defeito: no trecho minificado do app.css o bloco `html.theme-light` declara
os tokens todos com valor literal, menos um:
html.theme-light { ... --border: var(--border, #e2e8f0) !important; ... }
Uma custom property que referencia a si mesma é um CICLO. A resolução do
ciclo acontece DEPOIS da cascata, então o `!important` fazia essa declaração
VENCER as outras três que davam `--border:#e2e8f0`, e aí o token virava
guaranteed-invalid. Consequência: `var(--border, #e2e8f0)` seguia funcionando
pelo fallback, mas `var(--border)` PURO, que aparece em 172 regras, ficava
inválido em tempo de valor computado e a propriedade caía no valor inicial.
Como o inicial de `border-style` é `none`, a borda inteira sumia.
Medido no navegador, mesmo elemento nos dois temas (tema claro é o PADRÃO):
.bottom-nav escuro: border-top solid 1px rgb(51,65,85) | claro: none 0px
.chat-input escuro: border solid 1px rgb(71,85,105) | claro: none 0px
.app-header escuro: border-bottom solid 1px | claro: none 0px
.modal-header escuro: border-bottom solid 1px rgb(51,65,85)| claro: none 0px
.mais-item escuro: none/none | claro: none 0px
Ou seja: divisor do cabeçalho, do rodapé de navegação, do cabeçalho de todos
os 9 modais e a moldura do campo do chat estavam invisíveis para quem usa o
app no claro, que é o padrão de instalação.
Correção: redeclarar o token com o literal. Mesma especificidade (0,1,1) do
bloco quebrado, e este arquivo é o ÚLTIMO da cascata, então vence por ordem.
O `!important` é obrigatório aqui, e só aqui: a declaração anterior é
`!important` e sem ele a quebrada continuaria vencendo.
============================================================================ */
html.theme-light { --border: #e2e8f0 !important; }
/* ============================================================================
CORREÇÃO 2026-08-04: CABEÇALHO DA GAVETA DE PDF NASCIA BRANCO NO ESCURO.
Mesmo defeito de `--bg-card` que já foi corrigido em Treinos e Comunidade,
ainda vivo no visualizador de documentos, dentro do trecho minificado:
.pdf-drawer-head { background: var(--bg-card, #fff) }
`--bg-card` NÃO existe (conferido com getComputedStyle: string vazia nos dois
temas), então o fallback branco valia sempre, enquanto o título usa
`color: var(--text)`, que no escuro é #f1f5f9.
Medido no navegador, tema escuro: fundo do cabeçalho rgb(255,255,255) e
título rgb(241,245,249), contraste 1,10:1. O nome do documento que a paciente
abre para ler a prescrição ficava ilegível.
O token de superfície deste app é `--card` (#ffffff no claro, #1e293b no
escuro). Sem `!important`: a regra anterior não usa, e este arquivo vem
depois na cascata.
============================================================================ */
.pdf-drawer-head { background: var(--card, #fff); }
/* ============================================================================
CORREÇÃO 2026-08-04: TEXTO DE MARCA VERDE-ESCURO SOBRE CARTÃO ESCURO.
`--brand-primary-dark` (#2f4a32) e `--brand-primary-darker` (#3d6041) são
tons pensados para fundo claro. Usados como COR DE TEXTO sem par no escuro,
caem sobre `--card` (#1e293b) e reprovam o AA com folga.
Medido no navegador, tema escuro, larguras de 320 a 1440 (o valor não muda
com a largura, é cor):
.servico-preco #3d6041 sobre #1e293b = 2,05:1 (mínimo 4,5)
.forms-cta-btn.ghost #2f4a32 sobre #1e293b = 2,89:1 (mínimo 4,5)
O par correto no escuro é o verde pastel da marca, que existe justamente
para isto. Aferido depois da troca: #86C98C sobre #1e293b = 8,04:1.
============================================================================ */
html.theme-dark .servico-preco { color: var(--brand-pastel, #86c98c); }
html.theme-dark .forms-cta-btn.ghost {
color: var(--brand-pastel, #86c98c);
border-color: var(--brand-pastel, #86c98c);
}
/* ============================================================================
CORREÇÃO 2026-08-04: BLOCO "ATENÇÃO ESPECIAL" DAS ORIENTAÇÕES NO ESCURO.
O bloco JÁ tinha regra de tema escuro, mas ela repetia o âmbar escuro do
tema claro (#b45309, que é o `--warning`, um tom para fundo branco):
html.theme-dark .orientacao-alerta strong { color:#b45309 }
html.theme-dark .orientacao-alerta p { color:#b45309 }
html.theme-dark .orientacao-alerta i { color:#b45309 }
Medido no navegador, tema escuro: #b45309 sobre a composição de
rgba(217,119,6,.1) sobre #1e293b = 2,91:1, mínimo 4,5. É o aviso de
interação medicamentosa, o texto que MENOS pode ficar apagado.
Trocado pelo âmbar claro, que é o que o escuro pede. Aferido depois:
#fcd34d sobre a mesma composição = 8,98:1. Sem `!important`: as regras
anteriores não usam e este arquivo vem depois.
============================================================================ */
html.theme-dark .orientacao-alerta strong,
html.theme-dark .orientacao-alerta p,
html.theme-dark .orientacao-alerta i,
html.theme-dark .orientacao-alerta [data-lucide] { color: #fcd34d; }
/* ============================================================================
CORREÇÃO 2026-08-04: RÓTULOS DA BARRA LATERAL (só aparece de 1024px acima).
Dois textos de apoio da barra lateral ficaram com cinza de fundo errado:
1) `.sidebar-group-title` tem `color:#64748b` LITERAL dentro do
`@media (min-width:1024px)` do trecho minificado, sem par no escuro.
Medido a 1440 no escuro: #64748b sobre #0f172a = 3,75:1, mínimo 4,5
(fonte de 10px, então não entra na tolerância de texto grande).
Com `--text-muted` (#94a3b8 no escuro) passa a 7,05:1, e no claro o
token continua #64748b, que é o valor de hoje: nada muda no claro.
2) `.sidebar-collapse-toggle` usa `var(--text-muted)` sobre `--bg-alt`.
Medido a 1440 no CLARO: #64748b sobre #f1f5f9 = 4,34:1, mínimo 4,5.
Reprova por pouco, mas reprova. `--text-secondary` (#475569) dá 6,88:1.
O rótulo "Recolher menu" é um `` sem cor própria: ele HERDA do botão.
Por isso a correção é no botão. Atenção à especificidade: quem vencia era
`html.theme-light .sidebar-collapse-toggle`, com (0,2,0). Um
`.sidebar-collapse-toggle` solto, (0,1,0), perde e não muda nada, como foi
medido na primeira tentativa. O seletor abaixo empata em (0,2,0) e vence
por vir depois na cascata.
============================================================================ */
@media (min-width: 1024px) {
.sidebar-group-title { color: var(--text-muted, #64748b); }
html.theme-light .sidebar-collapse-toggle,
.sidebar-collapse-toggle { color: var(--text-secondary, #475569); }
}
/* ============================================================================
CORREÇÃO 2026-08-04: iPAD AINDA DAVA ZOOM AO FOCAR CAMPO.
A trava que impede o auto-zoom do iOS existia, mas só até 768px:
@media (max-width:768px){ input,select,textarea{font-size:16px!important} }
Todo iPad acima disso ficava de fora. Medido no navegador a 820x1180
(iPad Air em retrato), 9 campos abaixo de 16px, entre eles os do LOGIN:
#loginIdentificador 15,5px | #loginSenha 15,5px | #chatInput 14,5px
#chatSearch 14,5px | #leitorInput 14,5px | #recBusca 14,5px
#tkTipo 14,5px | #tkDur 14,5px | #tkObs 14,5px
O `` não trava escala (não tem `maximum-scale` nem
`user-scalable=no`), então o Safari amplia ao focar e desloca a tela.
A largura não é o sinal certo: o sinal é o ponteiro. `pointer: coarse` pega
qualquer aparelho de toque, de 320px ao iPad Pro, e não mexe no desktop.
O `!important` acompanha a regra que já existia, senão ela venceria.
============================================================================ */
@media (pointer: coarse) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea { font-size: 16px !important; }
}
/* ============================================================================
CORREÇÃO 2026-08-04: ALVOS DE TOQUE ABAIXO DE 44px.
Medido com getBoundingClientRect em 320, 360, 375, 390, 414, 768 e 1440,
nos dois temas. Corrigido só onde há folga de layout comprovada:
.mais-close 36x36 em TODAS as larguras. O cabeçalho da gaveta tem
320px de largura para um título curto: sobra espaço.
.tipo-btn altura 40 (os três do chat: dúvida, agendamento,
urgente). Estão numa linha; altura é espaço livre.
.chat-header-back altura 40. É o "voltar" da conversa, o controle mais
usado da tela e o mais fácil de errar com o polegar.
.home-hero-cta-btn altura 40. É a chamada principal da Home.
Só altura onde a largura é disputada: nada aqui muda a largura, então
nenhuma linha passa a estourar.
============================================================================ */
.mais-close { min-width: 44px; min-height: 44px; }
.tipo-btn,
.chat-header-back,
.home-hero-cta-btn { min-height: 44px; }
/* ============================================================================
CORREÇÃO 2026-08-04: `--primary` NÃO É A COR DA MARCA, E SUMIA NO ESCURO.
O token está declarado com o MESMO valor nos dois temas, um azul-ardósia
quase preto, o que só faz sentido no claro:
:root, html.theme-light, html.theme-dark { --primary: #1e293b }
Quem escreveu o app supôs que fosse o verde da marca, tanto que os usos
trazem fallback verde (`var(--primary,#609165)`). Como o token EXISTE, o
fallback nunca entra e o que vale é o #1e293b.
Dois estragos medidos no navegador, tema escuro:
1) Prescrições: os dois títulos ("Prescrições:" e "Solicitações de Exames:")
saem do js/app.js com `style="color:var(--primary)"` e ficaram
rgb(30,41,59) sobre rgb(28,34,48): contraste 1,09:1. Pior: `--card` no
escuro é #1e293b, o MESMO valor, então o título é exatamente a cor do
cartão. Corrigido no js/app.js trocando por `var(--text)`, que no claro
vale #1e293b, idêntico ao de hoje, e no escuro vale #f1f5f9. O tema claro
não muda em nada.
2) Os três indicadores de carregamento traziam
`style="color:var(--primary,#609165)"`, ou seja, #1e293b sobre o fundo
#0f172a: 1,19:1. A paciente via uma área vazia enquanto a seção carregava,
sem sinal nenhum de que algo estava acontecendo. Trocado por uma classe,
abaixo, porque estilo em atributo não dá para tematizar.
Aferido depois: #2f4a32 sobre #f8fafc = 4,82:1 no claro, e
#86C98C sobre #0a0e1b = 9,85:1 no escuro. Um indicador de carregamento é
elemento gráfico, então o piso é 3:1 (WCAG 1.4.11); os dois passam com
folga. O token `--primary` foi deixado como está de propósito: ele também é
usado como FUNDO em sete regras, e mexer no token trocaria a cor desses
blocos.
Os três indicadores vivem dentro de `.empty-state`, e o app já tem
`body .empty-state i { color: var(--ds-brand-soft) }`, com especificidade
(0,1,2). Um `.spinner-marca` solto, (0,1,0), PERDE dessa regra: medido, o
claro saía #609165 em vez do #2f4a32 pretendido. Por isso o seletor do
claro carrega o contexto `.empty-state i`, para empatar em (0,2,1) e vencer
por ordem. Sem isto a cor do claro seria herdada por acidente, não por
decisão.
============================================================================ */
.spinner-marca,
.empty-state i.spinner-marca,
.empty-state [data-lucide].spinner-marca { color: var(--brand-primary-dark, #2f4a32); }
html.theme-dark .spinner-marca,
html.theme-dark .empty-state i.spinner-marca,
html.theme-dark .empty-state [data-lucide].spinner-marca { color: var(--brand-pastel, #86c98c); }
/* =====================================================================
10. DETALHE DA AVALIACAO FISICA (2026-08-05)
---------------------------------------------------------------------
Relato do dono: "abro uma avaliacao, e se eu descer ou subir a tela
toda se move, o menu inferior some e o x de fechar fica quase
invisivel".
Tres causas distintas, e as tres estao em estilo INLINE gerado pelo
app.js (arquivo minificado de 475 KB). Por isso a correcao vem daqui
com !important: nao ha como vencer inline sem ele, e mexer no
minificado para trocar tres valores e risco desproporcional.
a) `max-height: 92vh`. No celular, `vh` e o viewport de LAYOUT, que
nao encolhe quando a barra do navegador aparece. Entao a folha
nasce mais alta do que a area visivel e, a cada rolagem que mostra
ou esconde a barra, a altura util muda e tudo se desloca. `dvh` e
a unidade que acompanha o viewport dinamico, que e exatamente o
que falta aqui. O `vh` fica antes como reserva para navegador
antigo, e o `dvh` sobrescreve onde existe.
b) Rolagem encadeada. Ao chegar no fim do conteudo da folha, o gesto
continua e passa a rolar a PAGINA atras dela, que e o "a tela toda
se move". `overscroll-behavior: contain` para o encadeamento no
proprio elemento.
c) O botao de fechar era branco a 18% sobre um degrade verde claro:
quase invisivel, como o dono disse, e com area de toque menor que
o minimo. Vira superficie solida, com contraste real e 40px.
===================================================================== */
.aval-detail-overlay {
align-items: flex-end !important;
/* A folha nunca deve ficar sob a barra de gestos do sistema. */
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.aval-detail-modal {
max-height: 92vh !important;
max-height: 92dvh !important;
overscroll-behavior: contain !important;
/* Rolagem por toque suave e previsivel dentro da folha. */
-webkit-overflow-scrolling: touch;
}
/* O cabecalho da folha e sticky: o botao de fechar precisa continuar
legivel enquanto o conteudo passa por tras dele. */
.aval-detail-modal [aria-label="Fechar"] {
background: rgba(255, 255, 255, 0.95) !important;
color: #213423 !important;
border: 0 !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
border-radius: 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
box-shadow: 0 1px 3px rgba(15, 23, 42, .18) !important;
}
.aval-detail-modal [aria-label="Fechar"]:hover,
.aval-detail-modal [aria-label="Fechar"]:focus-visible {
background: #ffffff !important;
color: #2d3a2e !important;
}
.aval-detail-modal [aria-label="Fechar"]:focus-visible {
outline: 2px solid #ffffff !important;
outline-offset: 2px !important;
}
html.theme-dark .aval-detail-modal [aria-label="Fechar"] {
background: rgba(226, 232, 240, 0.92) !important;
color: #2d3a2e !important;
}
/* =====================================================================
Rodada do relatório do Marcos (06/08/2026): app.seucenoura.com
---------------------------------------------------------------------
Correções puramente visuais, todas com causa raiz medida no navegador.
Esta camada é a ÚLTIMA da cascata, por isso vence o design system.
1. Ícones do menu inferior e check da cognitiva (ponte Font Awesome
para Lucide): o icon-bridge.js troca o por