/* ===================================================================== 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 { color: var(--brand-primary, #609165); } /* ===================================================================== 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 { color: var(--brand-primary, #609165); 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, #609165); border-radius: 50%; animation: appSpin .8s linear infinite; display: inline-block; } @keyframes appSpin { to { transform: rotate(360deg); } } /* Skeleton padrao (caixa) : usado em listas/cards enquanto carrega. */ .lr-skeleton { background: linear-gradient(90deg, var(--border-light, #f1f5f9) 0%, var(--bg-alt, #e2e8f0) 50%, var(--border-light, #f1f5f9) 100%); background-size: 200% 100%; animation: lrSkelShine 1.4s ease-in-out infinite; border-radius: 8px; min-height: 14px; } .lr-skeleton.lr-skel-title { height: 18px; width: 60%; } .lr-skeleton.lr-skel-line { height: 12px; margin: 6px 0; } .lr-skeleton.lr-skel-line.long { width: 92%; } .lr-skeleton.lr-skel-line.med { width: 70%; } .lr-skeleton.lr-skel-line.short { width: 42%; } .lr-skeleton.lr-skel-card { height: 84px; margin-bottom: 12px; } @keyframes lrSkelShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ===================================================================== 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; min-height: 44px; } @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). */ .btn-primary, .btn-action, .agenda-btn, .leitor-btn-primary { min-height: 44px; padding: 11px 18px; font-size: 14.5px; } .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(96, 145, 101, 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, #609165); 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; } /* Secundario padronizado (borda + texto verde). */ .btn-secondary { font-family: var(--font-body); font-weight: 700; border-radius: 12px; background: transparent; color: var(--brand-primary-dark, #4f7855); border: 1.5px solid var(--brand-primary-dark, #4f7855); padding: 10px 16px; min-height: 44px; transition: background .18s ease, color .18s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; } .btn-secondary:hover:not(:disabled) { background: var(--brand-tint, #f1f5f9); color: var(--brand-primary-darker, #3d6041); } .btn-secondary:active:not(:disabled) { transform: scale(.96); } /* Destrutivo padronizado. */ .btn-danger { font-family: var(--font-body); font-weight: 700; border-radius: 12px; background: #ef4444; color: #fff; border: none; padding: 11px 18px; min-height: 44px; transition: background .18s ease, transform .15s ease, box-shadow .18s ease; -webkit-tap-highlight-color: transparent; } .btn-danger:hover:not(:disabled) { background: #dc2626; box-shadow: 0 6px 16px rgba(239, 68, 68, 0.22); transform: translateY(-1px); } .btn-danger:active:not(:disabled) { transform: scale(.96); } /* ===================================================================== 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); } .nav-item { min-height: 60px; padding: 5px 4px; color: #64748b; } .nav-item-icon { width: 52px; min-height: 44px; border-radius: 14px; transition: background .22s ease, transform .18s ease; } .nav-item-icon i { 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, #3d6041); } .nav-item.active .nav-item-icon { background: var(--brand-tint, #f1f5f9); } .nav-item.active .nav-item-icon i { color: var(--brand-primary-darker, #3d6041); transform: scale(1.04); } .nav-item.active .nav-item-label { font-weight: 800; color: var(--brand-primary-darker, #3d6041); } .nav-item::before { height: 3px; width: 28px; background: var(--brand-primary-dark, #4f7855); } .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(96, 145, 101, 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(77, 121, 81, 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, #3d6041); } /* ===================================================================== 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 { 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 { color: #86C98C; opacity: .5; } html.theme-dark .empty-state p { color: #94a3b8; } html.theme-dark .btn-secondary { color: #86C98C; border-color: #86C98C; } html.theme-dark .btn-secondary:hover:not(:disabled) { background: rgba(134, 201, 140, 0.12); color: #b6e3bb; } /* 2026-05-28 (auditoria): titulos e texto dentro de cards estavam em verde escuro hardcoded (#3d6041 / #4f7855) — 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. */ 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"]), html.theme-dark .main-content .card label, html.theme-dark .main-content .card div:not([class*="badge"]):not([class*="chip"]):not([class*="time"]) { 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 { 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, #4f7855); } .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, #609165); } /* ===================================================================== 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 { color: var(--brand-primary, #609165); } /* ===================================================================== 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, #3f6346 0%, #2c4733 100%) !important; box-shadow: 0 1px 2px rgba(15, 30, 18, 0.18), 0 18px 38px -18px rgba(63, 99, 70, 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, #3f6346) !important; margin: 22px 0 12px !important; padding-left: 12px !important; border-left: 3px solid var(--brand-primary, #609165) !important; } .aval-timeline { padding-left: 14px !important; border-left: 2px dashed rgba(96,145,101,.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, #609165) !important; box-shadow: 0 0 0 3px rgba(96,145,101,.12) !important; position: absolute !important; left: -22px !important; top: 16px !important; } .aval-timeline-item.latest .aval-timeline-dot { background: var(--brand-primary, #609165) !important; border-color: #ffffff !important; box-shadow: 0 0 0 3px rgba(96,145,101,.32), 0 0 0 6px rgba(96,145,101,.10) !important; } .aval-timeline-card { border-radius: 14px !important; border: 1px solid rgba(96, 145, 101, 0.16) !important; box-shadow: 0 1px 2px rgba(15, 30, 18, 0.04), 0 6px 14px -8px rgba(63, 99, 70, 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(96, 145, 101, 0.32) !important; box-shadow: 0 1px 2px rgba(15, 30, 18, 0.05), 0 12px 22px -10px rgba(63, 99, 70, 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; } .aval-badge-latest { background: linear-gradient(135deg, #609165, #4f7855) !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, #609165) !important; transition: transform 0.2s ease; } /* Botao comparativo PDF mais limpo */ .aval-compare-pdf-btn { width: 100%; background: rgba(96, 145, 101, 0.10) !important; color: var(--brand-primary-darker, #3f6346) !important; border: 1px dashed rgba(96, 145, 101, 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(96, 145, 101, 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 { animation: ptrSpin 0.9s linear infinite; } @keyframes ptrSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }