/* =============================================================
styles.css (app.css) — Seu Raio X Financeiro
Estilos globais + LGPD + responsividade + impressão
============================================================= */
/* =============================================================
ÍNDICE DE SEÇÕES (Fase 18 — 2026-05-30)
12.095 linhas | crescimento por append de versões
ATENÇÃO: cascade depende da ordem — não reordenar sem análise
─────────────────────────────────────────────────────────────
L1 – Cabeçalho
L6 – VARIÁVEIS (:root tokens base)
L21 – RESET (box-sizing, html, body)
L39 – LGPD banner de consentimento
L115 – LOGIN (#loginScreen)
L186 – APP shell + HEADER
L305 – LAYOUT colunas desktop
L329 – CARDS base
L342 – STATS (totais)
L356 – INPUTS base
L363 – RESERVA
L383 – SALDO
L390 – DÍVIDAS
L404 – STATUS pagamentos
L416 – SAÚDE FINANCEIRA
L427 – GRÁFICO
L446 – TABELA SAÍDAS
L525 – RESUMO ANUAL
L564 – PROJEÇÃO
L588 – CRONOGRAMA DE PARCELAS (timeline)
L910 – COMPAT classes antigas (não remover)
L933 – UTILITÁRIOS tabela
L940 – CHAT / assistente
L957 – UTILITÁRIOS gerais
L967 – MOBILE toque e comportamento (base)
L1155 – PRIVACIDADE & DADOS (modal LGPD)
L1590 – PRINT (@media print)
── versões appended ──────────────────────────────────────────
L1625 – HOTFIX Saídas do Mês
L2008 – HOTFIX Mobile App-like (header compacto)
L2255 – V12 Mobile Essencial
L2944 – V13 Desktop Premium (shell lateral)
L3464 – V13.1 Agenda integrada
L3554 – V13.2 Agenda Calendário Premium
L3982 – V13.3 Mobile Clean Pro
L4319 – V14 Importador PDF / cartões
L4667 – V14.2 Saídas grupos + drag-drop
L4817 – V15.2/15.3 Entradas dinâmicas
L5014 – V15.6.1 Desktop saídas + entrada mobile
L5537 – V1.7.3 Mobile Camada 1 (safe area, login)
L6114 – V2.2.19 Agenda Financeira V2 Premium
L6450 – V2.2.20 Insights V2 + Mais V2
L7114 – V2.2.23 Mobile revisão premium
L7403 – V2.2.25 Modal pagador / LGPD billing
L7661 – V2.2.30 Reserva + Dívidas + Dashboard
L7853 – V2.2.31 Polimento premium
L8097 – V2.2.32 Densidade Premium Global
L8483 – V2.2.33 Aba Mais compacta
L8698 – V2.2.35 Insights (sobreposição)
L8731 – V2.2.36 Checkout + agenda hotfix
L8825 – V2.2.37 Refinos checkout + agenda
L8879 – V2.2.43 Checkout CEP robusto
L8926 – V2.2.44 UX checkout + agenda escaneável
L9891 – v2.2.58 Mobile em cards (1.987 linhas)
L11878 – V2.2.67 CTA mobile / navegação
L12870 – v2.2.86 CTA cartão/fatura
============================================================= */
/* ── VARIÁVEIS ──────────────────────────────────────────────── */
:root {
--rx: #0a2a5e; --rxm: #0d3580; --rxl: #1a5276;
--rxc: #e8eef8; --rxb: #b8cce8;
--vd: #1a7a4a; --vdc: #e8f5ee; --vdb: #b2dfcc;
--vm: #c0392b; --vmc: #fdecea; --vmb: #f5c6c2;
--am: #c87f0a; --amc: #fef9ec; --amb: #f5d98a;
--cz: #5f6368; --czc: #f4f5f7; --bd: #dde1e7;
--br: #fff; --tx: #1a1a1a; --tx2: #555;
--hbg: #071b3e; --hacc:#0d2a5a;
--radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
--shadow-card: 0 1px 4px rgba(0,0,0,.05);
--transition: .15s ease;
/* Fase E (consolidação :root) — tokens antes em :root espalhados; valores idênticos. */
/* V13 Desktop Premium (era :root em 20-v12-v13-desktop) */
--rx-shell: #0b1220;
--rx-shell-2: #111827;
--rx-shell-3: #172033;
--rx-page-bg: #f6f8fb;
--rx-card-bg: #ffffff;
--rx-blue-premium: #1d4ed8;
--rx-blue-soft: #eaf1ff;
--rx-border-soft: #e5e7eb;
--rx-shadow-premium: 0 18px 45px rgba(15, 23, 42, .08);
--rx-shadow-soft: 0 8px 20px rgba(15, 23, 42, .05);
/* V2.2.23 mobile (era :root em 60-billing-insights) */
--rx-mobile-gap: 12px;
--rx-mobile-radius: 18px;
/* V2.2.31 premium (era :root em 70-polimento-densidade) */
--srx-premium-navy: #09265f;
--srx-premium-blue: #0b3d91;
--srx-premium-soft: #f5f8ff;
}
/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
font-size: 14px;
}
body {
font-family: 'Segoe UI', system-ui, Arial, sans-serif;
background: #eef0f5;
color: var(--tx);
line-height: 1.5;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* ── LGPD — BANNER DE CONSENTIMENTO ────────────────────────── */
.consent-banner {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(7,27,62,.85);
backdrop-filter: blur(4px);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 16px;
animation: fadeIn .25s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.consent-inner {
background: #fff;
border-radius: 20px 20px 16px 16px;
padding: 24px 26px 20px;
max-width: 540px;
width: 100%;
box-shadow: 0 -8px 40px rgba(0,0,0,.25);
}
.consent-icon { font-size: 28px; margin-bottom: 8px; }
.consent-title { font-size: 15px; font-weight: 800; color: var(--hbg); margin-bottom: 6px; }
.consent-text { font-size: 12px; color: var(--tx2); line-height: 1.6; margin-bottom: 14px; }
.consent-checks { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.consent-check-item {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 12px;
color: var(--tx);
line-height: 1.5;
cursor: pointer;
}
.consent-check-item input[type=checkbox] {
width: 16px; height: 16px; flex-shrink: 0;
margin-top: 1px; accent-color: var(--rx);
cursor: pointer;
}
.consent-check-item a {
color: var(--rx); text-decoration: underline; font-weight: 600;
}
.consent-check-item a:hover { color: var(--rxm); }
.consent-err {
font-size: 11px; color: var(--vm);
background: var(--vmc); border: 1px solid var(--vmb);
border-radius: 7px; padding: 7px 10px; margin-bottom: 10px;
}
.consent-btn {
width: 100%; background: var(--rx); color: #fff;
border: none; border-radius: 10px; padding: 13px;
font-size: 14px; font-weight: 700; cursor: pointer;
font-family: inherit; transition: var(--transition);
}
.consent-btn:hover { background: var(--rxm); }
/* Aceite inline no cadastro */
.cad-consent {
margin: 12px 0 10px;
padding: 10px 12px;
background: var(--rxc);
border: 1px solid var(--rxb);
border-radius: 9px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* ── LOGIN ──────────────────────────────────────────────────── */
#loginScreen {
position: fixed; inset: 0;
background: linear-gradient(135deg, #071b3e 0%, #0a2a5e 55%, #0d1f3c 100%);
display: flex; align-items: center; justify-content: center;
z-index: 9000; overflow-y: auto; overflow-x: hidden; padding: 24px 16px;
}
.lb-circle { position: absolute; border-radius: 50%; opacity: .08; pointer-events: none; }
.lb-circle.c1 { width: 520px; height: 520px; background: #1a6bc5; top: -130px; right: -130px; }
.lb-circle.c2 { width: 320px; height: 320px; background: #0a2a5e; bottom: -90px; left: -90px; }
.lb-circle.c3 { width: 180px; height: 180px; background: #1a6bc5; top: 40%; left: 10%; }
.login-wrap { position: relative; z-index: 2; width: 100%; max-width: 440px; }
.login-brand { text-align: center; margin-bottom: 26px; }
.login-logo {
width: 72px; height: 72px; background: var(--rx);
border: 3px solid rgba(255,255,255,.15); border-radius: 20px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 12px; font-size: 22px; font-weight: 900;
color: #fff; cursor: pointer; transition: .2s;
}
.login-logo:hover { transform: scale(1.04); }
.login-brand h1 { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: .4px; }
.login-brand p { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 4px; letter-spacing: .8px; text-transform: uppercase; }
.login-box {
background: #fff; border-radius: 20px; padding: 30px 32px;
box-shadow: 0 40px 100px rgba(0,0,0,.35); margin-bottom: 14px;
}
.login-box h2 { font-size: 16px; font-weight: 700; color: var(--hbg); margin-bottom: 4px; }
.login-box .login-sub { font-size: 12px; color: var(--cz); margin-bottom: 20px; line-height: 1.55; }
.login-plan-notice { background: #eef5ff; border: 1px solid #bcd4ff; color: var(--rx); border-radius: 10px; padding: 10px 12px; margin: -8px 0 16px; font-size: 12px; line-height: 1.5; }
.login-plan-notice strong { display:block; font-size: 13px; color: var(--rx); margin-bottom: 2px; }
.login-plan-notice span { color: var(--tx2); }
.lf { margin-bottom: 13px; }
.lf label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--cz); margin-bottom: 5px; }
.lf-hint { font-size: 10px; color: var(--cz); text-transform: none; font-weight: 400; letter-spacing: 0; }
.lf input { width: 100%; border: 1.5px solid var(--bd); border-radius: 9px; padding: 11px 13px; font-size: 14px; font-family: inherit; transition: var(--transition); background: #fafbfc; }
.lf input:focus { outline: none; border-color: var(--rx); background: #fff; box-shadow: 0 0 0 3px rgba(10,42,94,.08); }
/* Wrapper com botão reveal de senha */
.input-reveal { position: relative; }
.input-reveal input { padding-right: 40px; }
.reveal-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--cz); font-size: 15px; padding: 4px; min-height: unset; }
.reveal-btn:hover { color: var(--rx); }
/* Força da senha */
.pwd-strength { margin-top: 6px; }
#forcaSenha { height: 4px; border-radius: 4px; background: var(--bd); overflow: hidden; }
#forcaBarra { height: 100%; width: 0; border-radius: 4px; transition: .3s; }
#forcaLabel { font-size: 10px; color: var(--cz); margin-top: 3px; }
.login-btn { width: 100%; background: var(--rx); color: #fff; border: none; border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: var(--transition); margin-top: 4px; }
.login-btn:hover { background: var(--rxm); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(10,42,94,.25); }
.login-btn:active { transform: translateY(0); }
.login-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.login-err { border-radius: 8px; padding: 10px 12px; font-size: 12px; line-height: 1.6; margin-top: 10px; display: none; }
.login-footer { text-align: center; font-size: 11px; color: rgba(255,255,255,.3); margin-top: 16px; line-height: 1.8; }
.login-footer a { color: rgba(255,255,255,.5); text-decoration: underline; }
.login-footer a:hover { color: #fff; }
.login-links { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bd); }
.login-links a { font-size: 11px; color: var(--rx); cursor: pointer; text-decoration: none; font-weight: 600; }
.login-links a:hover { text-decoration: underline; }
/* ── APP ────────────────────────────────────────────────────── */
#app { display: none; }
/* ── HEADER ─────────────────────────────────────────────────── */
.header {
background: var(--hbg); color: #fff;
padding: 0 20px; display: flex; align-items: center;
justify-content: space-between; flex-wrap: wrap; gap: 8px;
position: sticky; top: 0; z-index: 100;
min-height: 58px;
}
.hbrand { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; transition: .14s; flex-shrink: 0; }
.hbrand:hover .hlogo{ transform: scale(1.07); }
.hlogo { width: 36px; height: 36px; background: var(--rx); border: 1.5px solid rgba(255,255,255,.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #fff; transition: .18s; flex-shrink: 0; }
.hbrand h1 { font-size: 13px; font-weight: 700; letter-spacing: .2px; }
.hbrand p { font-size: 10px; color: rgba(255,255,255,.38); margin-top: 1px; }
/* Grupo de controles à direita — altura uniforme de 46px por item */
.hright { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 0; }
/* ── Altura e geometria padronizadas para os 4 controles principais ── */
/* anosel, navmes, tabs: todos com min-height 46px, border-radius 9px */
/* Seletor de ANO */
.anosel {
background: var(--hacc);
border: 1px solid rgba(255,255,255,.1);
border-radius: 9px;
padding: 0 10px;
min-height: 46px;
display: flex;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
}
.anosel label { font-size: 9.5px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .5px; display: block; line-height: 1; margin-bottom: 3px; }
.anosel select { background: transparent; border: none; color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; outline: none; font-family: inherit; line-height: 1; padding: 0; }
.anosel select option { background: var(--hbg); }
/* Navegação de MÊS */
.navmes {
display: flex;
align-items: center;
gap: 3px;
background: var(--hacc);
border: 1px solid rgba(255,255,255,.1);
border-radius: 9px;
padding: 4px 5px;
min-height: 46px;
flex-shrink: 0;
}
.navmes button {
background: transparent; border: none;
color: rgba(255,255,255,.65); cursor: pointer;
font-size: 18px; width: 30px; height: 30px;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
transition: .1s; min-height: unset; flex-shrink: 0;
}
.navmes button:hover { color: #fff; background: rgba(255,255,255,.12); }
.navmes span {
font-size: 12px; font-weight: 600;
min-width: 118px; text-align: center;
color: #fff; cursor: pointer; user-select: none;
padding: 0 4px;
}
/* Abas — MENSAL / RESUMO ANUAL */
.tabs {
display: flex;
gap: 3px;
background: var(--hacc);
border: 1px solid rgba(255,255,255,.1);
border-radius: 9px;
padding: 4px;
min-height: 46px;
align-items: center;
flex-shrink: 0;
}
.tabbtn {
background: transparent; border: none;
color: rgba(255,255,255,.55);
border-radius: 6px;
padding: 6px 14px;
font-size: 12px; font-weight: 600;
cursor: pointer; transition: .15s;
white-space: nowrap; font-family: inherit;
min-height: 36px; min-width: 70px;
display: flex; align-items: center; justify-content: center;
}
.tabbtn:hover { color: #fff; background: rgba(255,255,255,.1); }
.tabbtn.ativo { background: #fff; color: var(--hbg); font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
/* Botões de ação secundários (Suporte, Privacidade, Imprimir, Sair) */
.hbtn {
background: transparent;
border: 1px solid rgba(255,255,255,.15);
color: rgba(255,255,255,.55);
border-radius: 9px;
padding: 6px 11px;
font-size: 11px; font-weight: 500;
cursor: pointer; transition: .15s;
font-family: inherit; min-height: unset;
white-space: nowrap; flex-shrink: 0;
}
.hbtn:hover { border-color: rgba(255,255,255,.35); color: #fff; }
.hbtn.wpp { border-color: rgba(37,211,102,.4); color: rgba(37,211,102,.85); }
.hbtn.wpp:hover{ border-color: #25d366; color: #25d366; }
.hbtn-sair { border-color: rgba(255,255,255,.1); }
.hbtn-sair:hover { border-color: var(--vmb); color: var(--vmb); }
/* Sync indicator */
#syncStatus { font-size: 11px; padding: 3px 9px; border-radius: 20px; display: none; align-items: center; gap: 4px; font-weight: 600; transition: .3s; }
#syncStatus.syncing { display: inline-flex; background: var(--amc); color: var(--am); }
#syncStatus.ok { display: inline-flex; background: var(--vdc); color: var(--vd); }
#syncStatus.error { display: inline-flex; background: var(--vmc); color: var(--vm); }
#syncStatus.offline { display: inline-flex; background: var(--czc); color: var(--cz); }
/* ── LAYOUT ─────────────────────────────────────────────────── */
/*
* .ctn — container padrão (aba Mensal) — centra o conteúdo com limite legível
* .ctn-wide — container largo (aba Resumo) — aproveita toda a largura disponível
*/
.ctn {
max-width: min(1200px, calc(100vw - 32px));
margin: 0 auto;
padding: 16px;
}
/* Aba Resumo usa container mais largo para tabelas e cronograma */
#tab-resumo .ctn,
.ctn-wide {
max-width: min(1600px, calc(100vw - 32px));
margin: 0 auto;
padding: 16px 20px;
}
.page { display: none; }
.page.ativo { display: block; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
/* ── CARDS ──────────────────────────────────────────────────── */
.card {
background: var(--br); border-radius: 13px; border: 1px solid var(--bd);
padding: 16px 18px; box-shadow: var(--shadow-card); margin-bottom: 14px;
}
.ctitle { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.ctitle::before { content: ''; display: inline-block; width: 3px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.ctitle.rx { color: var(--rx); } .ctitle.rx::before { background: var(--rx); }
.ctitle.vd { color: var(--vd); } .ctitle.vd::before { background: var(--vd); }
.ctitle.vm { color: var(--vm); } .ctitle.vm::before { background: var(--vm); }
.ctitle.az { color: #2471a3; } .ctitle.az::before { background: #2471a3; }
.ctitle.am { color: var(--am);} .ctitle.am::before { background: var(--am);}
/* ── STATS ──────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { border-radius: 11px; padding: 13px 14px; border: 1px solid var(--bd); min-height: 72px; }
/* Premium: card branco unificado (sem fundo pastel); cor SÓ no número. */
.stat.srx, .stat.svm, .stat.svd, .stat.sam { background: var(--br); border-color: var(--bd); }
.slabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px; }
.stat .slabel { color: var(--cz); }
.sval { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.srx .sval { color: var(--tx); } .stat.svm .sval { color: var(--vm); }
.stat.svd .sval { color: var(--vd); } .stat.sam .sval { color: var(--vd); }
/* ── INPUTS ─────────────────────────────────────────────────── */
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 10.5px; font-weight: 700; color: var(--cz); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.field input { width: 100%; border: 1px solid var(--bd); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-family: inherit; background: #fafbfc; transition: var(--transition); }
.field input:focus { outline: none; border-color: var(--rx); background: #fff; box-shadow: 0 0 0 3px rgba(10,42,94,.08); }
.divider { height: 1px; background: var(--bd); margin: 10px 0; }
.totrow { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; padding: 8px 0; border-top: 1px solid var(--bd); margin-top: 8px; }
/* ── RESERVA ────────────────────────────────────────────────── */
.recbox { background: #f0f5ff; border: 1px solid var(--rxb); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; }
.recbox label { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--rx); line-height: 1.4; }
.recbox input[type=checkbox]{ width: 16px; height: 16px; accent-color: var(--rx); flex-shrink: 0; }
.recrow { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx2); }
.recrow span:last-child{ font-weight: 700; color: var(--rx); }
.reserva-meta-box { background: var(--rxc); border: 1px solid var(--rxb); border-radius: 10px; padding: 13px 15px; margin-top: 10px; }
.rm-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.rm-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--rx); }
.rm-vals { text-align: right; }
.rm-atual { font-size: 16px; font-weight: 800; color: var(--rx); }
.rm-meta { font-size: 11px; color: var(--cz); margin-top: 2px; }
.rm-bar-bg { background: rgba(10,42,94,.12); border-radius: 99px; height: 10px; overflow: hidden; margin-bottom: 8px; }
.rm-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--rx), #1a6bc5); transition: width .6s ease; }
.rm-footer { display: flex; justify-content: space-between; font-size: 11px; color: var(--cz); }
.rm-footer strong { color: var(--rx); }
.rm-fonte { display: block; margin-top: 8px; font-size: 11px; line-height: 1.35; color: var(--cz); }
/* ── SALDO ──────────────────────────────────────────────────── */
.saldo-box { background: var(--rxc); border: 1px solid var(--rxb); border-radius: 10px; padding: 12px 15px; margin-bottom: 10px; }
.saldo-box .sb-label{ font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--rx); margin-bottom: 3px; }
.saldo-box .sb-val { font-size: 20px; font-weight: 700; color: var(--rx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saldo-box .sb-val.negativo { color: var(--vm); }
.saldo-box .sb-sub { font-size: 11px; color: var(--cz); margin-top: 5px; line-height: 1.5; }
/* Herói do saldo (topo do dashboard) — branco limpo + traço premium + número grande */
.saldo-box.rx-saldo-hero { background: var(--br); border: 1px solid var(--bd); border-left: 3px solid var(--rx); border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 14px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; justify-content: center; }
.saldo-box.rx-saldo-hero .sb-label { font-size: 11px; color: var(--cz); }
.saldo-box.rx-saldo-hero .sb-val { font-size: 34px; line-height: 1.05; }
.saldo-box.rx-saldo-hero .sb-sub { font-size: 12px; margin-top: 7px; }
/* Linha-herói: saldo + medidor de saúde lado a lado (preenche o vazio à direita) */
.rx-hero-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
.rx-hero-row .card { margin-bottom: 0; }
.rx-saude-hero { display: flex; flex-direction: column; position: relative; }
.rx-saude-hero .saude-header { margin: auto 0; align-items: center; gap: 16px; }
.rx-saude-side { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.rx-proximos-btn { background: none; border: 1px solid var(--bd); border-radius: 10px; padding: 7px 12px; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--rx); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition); }
.rx-proximos-btn:hover { background: var(--rxc); border-color: var(--rxb); }
.rx-proximos-pop { position: absolute; right: 16px; top: 100%; margin-top: 4px; z-index: 60; width: 290px; max-width: calc(100% - 24px); background: var(--br); border: 1px solid var(--bd); border-radius: var(--radius-lg); box-shadow: var(--rx-shadow-premium); padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.rx-proximos-pop[hidden] { display: none; }
.rx-proximos-pop button { text-align: left; background: none; border: 1px solid transparent; border-radius: 10px; padding: 9px 11px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 2px; }
.rx-proximos-pop button:hover { background: var(--rxc); border-color: var(--rxb); }
.rx-proximos-pop button strong { font-size: 12.5px; color: var(--tx); }
.rx-proximos-pop button span { font-size: 11px; color: var(--cz); }
/* ── DASHBOARD METÁLICO (v2) ─────────────────────────────────── */
.stats.rx-stats-met { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat.rx-met { border: none; color: #fff; box-shadow: var(--rx-shadow-soft); position: relative; overflow: hidden; }
.stat.rx-met .slabel { color: rgba(255,255,255,.82); }
.stat.rx-met .sval { color: #fff; }
.rx-met-saldo { background: linear-gradient(135deg, var(--rx), var(--rx-blue-premium)); }
.rx-met-ent { background: linear-gradient(135deg, #0f7a4a, #16a34a); }
.rx-met-sai { background: linear-gradient(135deg, #9a2a2a, #d4514a); }
.rx-met-res { background: linear-gradient(135deg, #0e6e6e, #1fa3a3); }
/* Próximos passos: popover ancorado no fim da barra de ações */
.rx-quick-actions-5 { position: relative; }
.rx-proximos-pop-action { right: 0; left: auto; top: 100%; margin-top: 6px; }
/* Rodapé 2 colunas: Saúde (estreita) | Raio X (larga), alturas iguais */
.rx-foot-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; margin-top: 14px; }
.rx-foot-grid > .card { margin-bottom: 0; height: 100%; }
/* ── DÍVIDAS ────────────────────────────────────────────────── */
.divrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.divrow .dlabel-inp { flex: 1; border: 1px solid var(--bd); border-radius: 7px; padding: 7px 9px; font-size: 12px; font-family: inherit; background: #fafbfc; }
.divrow .dlabel-inp:focus { outline: none; border-color: var(--rx); background: #fff; box-shadow: 0 0 0 2px rgba(10,42,94,.08); }
.divrow .dval-inp { width: 130px; min-width: 90px; border: 1px solid var(--bd); border-radius: 7px; padding: 7px 9px; font-size: 12px; font-family: inherit; text-align: right; background: #fafbfc; }
.divrow .dval-inp:focus { outline: none; border-color: var(--rx); background: #fff; box-shadow: 0 0 0 2px rgba(10,42,94,.08); }
.del-btn { background: none; border: none; cursor: pointer; color: #ccc; font-size: 13px; padding: 4px; border-radius: 4px; min-height: unset; }
.del-btn:hover { color: var(--vm); background: var(--vmc); }
.divtot { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--bd); }
.obsbox { background: #fff8f8; border: 1px solid var(--vmb); border-radius: 8px; padding: 9px 12px; margin-bottom: 10px; }
.obsbox strong { display: block; margin-bottom: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--vm); }
.add-row-btn { background: none; border: 1.5px dashed var(--bd); border-radius: 8px; width: 100%; padding: 8px; font-size: 12px; color: var(--cz); cursor: pointer; font-family: inherit; transition: var(--transition); }
.add-row-btn:hover { border-color: var(--rx); color: var(--rx); background: var(--rxc); }
/* ── STATUS PAGAMENTOS ──────────────────────────────────────── */
.pagstats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 13px; }
.pstat { border-radius: var(--radius-md); padding: 11px 15px; display: flex; flex-direction: column; gap: 2px; min-height: 0; box-shadow: var(--rx-shadow-soft); }
.pstat-icon { display: none; }
.pstat.tot, .pstat.pag, .pstat.apa { background: var(--br); border: none; }
.pstat-icon { font-size: 18px; line-height: 1; }
.pslabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--cz); }
.pstat.pag .pslabel { color: var(--vd); } .pstat.apa .pslabel { color: var(--vm); }
.psval { font-size: 16px; font-weight: 800; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstat.pag .psval { color: var(--vd); } .pstat.apa .psval { color: var(--vm); }
/* ── SAÚDE FINANCEIRA ───────────────────────────────────────── */
.saude-header { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.saude-gauge { flex: 0 0 auto; line-height: 0; }
.saude-gauge svg { display: block; }
.saude-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.sotimo { background: var(--vdc); color: var(--vd); }
.sok { background: var(--amc); color: var(--am); }
.salerta { background: var(--vmc); color: var(--vm); }
.saude-ia { font-size: 12px; color: var(--tx2); line-height: 1.75; border-top: 1px solid var(--bd); padding-top: 10px; margin-top: 9px; }
.saude-ia strong { color: var(--tx); font-weight: 700; }
.delta-pos { color: var(--vd); font-weight: 700; }
.delta-neg { color: var(--vm); font-weight: 700; }
/* ── GRÁFICO ────────────────────────────────────────────────── */
.rx-chart-topline { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin: -2px 0 12px; }
.rx-chart-summary { font-size: 13px; color: var(--tx2); }
.rx-chart-summary strong { color: var(--tx); font-weight: 800; }
.rx-chart-highlight { display:none; }
.chart-wrap { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.chart-canvas-wrap { width: 190px; height: 190px; flex-shrink:0; position:relative; margin: 0 auto; }
.chart-canvas-wrap canvas { width:100% !important; height:100% !important; }
.chart-legend { flex:1; min-width:220px; display:flex; flex-direction:column; gap:8px; }
.chart-legend-item { padding: 8px 10px; border:1px solid var(--bd); border-radius:12px; background:#fbfcfe; }
.chart-legend-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.chart-legend-label { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.chart-legend-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.chart-legend-name { color:var(--tx); font-size:12px; font-weight:700; line-height:1.3; }
.chart-legend-numbers { display:flex; align-items:baseline; gap:8px; flex-shrink:0; }
.chart-legend-val { font-weight:700; color:var(--tx); white-space:nowrap; font-size:12px; }
.chart-legend-pct { font-size:11px; color:var(--cz); white-space:nowrap; }
.chart-legend-bar { height:7px; border-radius:999px; background:#e9edf3; overflow:hidden; }
/* "Outras" expansível (revela as categorias agrupadas sem poluir o default) */
.chart-legend-outras > summary { list-style:none; cursor:pointer; }
.chart-legend-outras > summary::-webkit-details-marker { display:none; }
.chart-legend-caret { margin-left:5px; font-size:9px; color:var(--cz); display:inline-block; transition:transform .15s ease; }
.chart-legend-outras[open] .chart-legend-caret { transform:rotate(180deg); }
.chart-legend-sub { margin-top:8px; padding-top:8px; border-top:1px solid var(--bd); display:flex; flex-direction:column; gap:6px; }
.chart-legend-subitem { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11.5px; }
.chart-legend-subname { display:flex; align-items:center; gap:7px; min-width:0; color:var(--tx2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chart-legend-subname .chart-legend-dot { width:8px; height:8px; }
.chart-legend-subnums { flex-shrink:0; color:var(--tx2); }
.chart-legend-subnums em { color:var(--cz); font-style:normal; font-size:10.5px; }
.chart-legend-bar i { display:block; height:100%; border-radius:999px; }
/* "Outras" do Raio X desktop: item clicável + modal (sheet com X) */
.chart-legend-outras--btn { cursor: pointer; transition: var(--transition); }
.chart-legend-outras--btn:hover { background: var(--rxc); }
.chart-legend-outras--btn .chart-legend-caret { transform: none; font-size: 14px; }
.rx-outras-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,23,42,.45); }
.rx-outras-modal[hidden] { display: none; }
.rx-outras-card { width: min(440px, 100%); max-height: 80vh; display: flex; flex-direction: column; background: var(--br); border-radius: var(--radius-lg); box-shadow: var(--rx-shadow-premium); overflow: hidden; }
.rx-outras-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--bd); }
.rx-outras-kicker { display: block; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--rx); }
.rx-outras-head strong { font-size: 16px; color: var(--tx); }
.rx-outras-x { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bd); background: #fff; color: var(--cz); font-size: 18px; line-height: 1; cursor: pointer; transition: var(--transition); }
.rx-outras-x:hover { background: var(--rxc); color: var(--rx); border-color: var(--rxb); }
.rx-outras-body { padding: 12px 18px 18px; overflow-y: auto; margin-top: 0; border-top: 0; }
/* Dicas "Como o SRX interpreta": gatilho clicável ao lado do título + popover */
.rx-launch-head-title { display: inline-flex; align-items: center; gap: 10px; position: relative; }
.rx-launch-head-title h2 { margin: 0; }
.rx-launch-help-trigger { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--rxb); background: var(--rxc); color: var(--rx); font-weight: 800; font-size: 13px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition); font-family: Georgia, 'Times New Roman', serif; }
.rx-launch-help-trigger:hover, .rx-launch-help-trigger[aria-expanded="true"] { background: var(--rx); color: #fff; border-color: var(--rx); }
.rx-launch-help-pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; width: 300px; max-width: 80vw; background: var(--br); border: 1px solid var(--bd); border-radius: var(--radius-lg); box-shadow: var(--rx-shadow-premium); padding: 14px 16px; }
.rx-launch-help-pop[hidden] { display: none; }
.rx-launch-help-pop strong { display: block; font-size: 11px; color: var(--rx); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.rx-launch-help-pop p { margin: 0 0 10px; font-size: 12.5px; color: var(--cz); line-height: 1.5; }
/* Overlay de edição por grupo (saídas) — sheet sobreposto com X */
.rx-saida-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15,23,42,.45); }
.rx-saida-overlay[hidden] { display: none; }
.rx-saida-card { width: min(880px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--br); border-radius: var(--radius-lg); box-shadow: var(--rx-shadow-premium); overflow: hidden; }
.rx-saida-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 13px; border-bottom: 1px solid var(--bd); }
.rx-saida-kicker { display: block; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--rx); }
.rx-saida-head strong { font-size: 17px; color: var(--tx); }
.rx-saida-x { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--bd); background: #fff; color: var(--cz); font-size: 19px; line-height: 1; cursor: pointer; transition: var(--transition); }
.rx-saida-x:hover { background: var(--rxc); color: var(--rx); border-color: var(--rxb); }
.rx-saida-body { padding: 8px 16px 4px; overflow-y: auto; }
.rx-saida-tabela { width: 100%; border-collapse: collapse; }
/* No overlay o cabeçalho do grupo não precisa do caret nem do "+ item" (vai no rodapé). */
.rx-saida-tabela .saida-grupo-toggle .sg-caret,
.rx-saida-tabela .saida-grupo-add { display: none; }
.rx-saida-sub { display: block; font-size: 12px; font-weight: 700; color: var(--cz); margin-top: 2px; }
.rx-saida-sub strong { color: var(--vm); }
/* Polimento Fase C — linhas do overlay menos "planilha" */
.rx-saida-tabela .saida-grupo-row { display: none; } /* redundante com o título do overlay */
.rx-saida-tabela .saida-main-row > td { padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid #f1f4f8; }
.rx-saida-tabela .saida-main-row:hover > td { background: #fafcff; }
.rx-saida-tabela .saida-drag-handle { opacity: .25; transition: var(--transition); }
.rx-saida-tabela .saida-main-row:hover .saida-drag-handle { opacity: .6; }
.rx-saida-cartoes-grid { padding: 16px 6px 8px; gap: 14px; }
/* × de excluir cartão no card do grid */
.saida-cat-card--cartao { position: relative; cursor: pointer; }
.saida-cat-card--cartao .scc-del {
position: absolute; top: 7px; right: 7px;
width: 22px; height: 22px; border-radius: 50%;
border: 1px solid var(--bd); background: #fff; color: #b6bdc7;
font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: var(--transition);
}
.saida-cat-card--cartao:hover .scc-del { opacity: 1; }
.saida-cat-card--cartao .scc-del:hover { background: var(--vmc); color: var(--vm); border-color: var(--vm); }
/* Detalhe do cartão no overlay: botões maiores e com respiro */
.rx-saida-tabela .add-sub-btn {
font-size: 12.5px; padding: 8px 14px; border-radius: 9px; min-height: 36px;
margin-top: 6px; margin-right: 6px; font-weight: 800;
}
.rx-saida-tabela .rx-import-pdf-btn { background: var(--rx); color: #fff; border: 1px solid var(--rx); }
.rx-saida-tabela .rx-import-pdf-btn:hover { background: var(--srx-premium-navy, #0a2a5e); }
.rx-saida-tabela .saida-main-row > td { padding-top: 12px; padding-bottom: 12px; }
.rx-saida-cartoes-grid[hidden] { display: none; }
.rx-saida-back { margin: 8px 0 0 4px; background: none; border: none; color: var(--rx); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; padding: 4px 0; }
.rx-saida-back:hover { text-decoration: underline; }
.rx-saida-back[hidden] { display: none; }
.saida-cat-card--add { border: 1px dashed var(--rxb); background: var(--rxc); justify-content: center; }
.saida-cat-card--add .scc-ico { background: #fff; color: var(--rx); }
.rx-saida-foot[hidden] { display: none; }
.rx-saida-foot { padding: 12px 16px 16px; border-top: 1px solid var(--bd); display: flex; align-items: center; gap: 10px; }
.rx-saida-foot .rx-saida-add-foot { flex: 1 1 auto; width: auto; }
.rx-saida-save-foot { flex: 0 0 auto; padding: 11px 22px; border: none; border-radius: var(--radius-md); background: var(--rx); color: #fff; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: var(--transition); box-shadow: var(--rx-shadow-soft); }
.rx-saida-save-foot:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* Sheet de edição de ENTRADA (reusa .rx-saida-overlay) */
.rx-entrada-card { width: min(440px, 100%) !important; }
.rx-entrada-form { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.rxe-field { display: block; font-size: 12px; color: var(--cz); font-weight: 700; }
.rxe-field > span:first-child { display: block; margin-bottom: 4px; }
.rxe-field input { width: 100%; height: 40px; border: 1px solid var(--bd); border-radius: 9px; padding: 0 11px; font-size: 14px; font-family: inherit; background: #fff; }
.rxe-field input:focus { outline: none; border-color: var(--rx); }
.rxe-row { display: grid; grid-template-columns: 1fr 80px; gap: 10px; }
.rxe-valor .rx-input-money input { padding-left: 32px !important; text-align: right; font-weight: 800; }
.rxe-dia input { text-align: center; }
.rxe-seg { display: flex; gap: 6px; }
.rxe-seg-btn { flex: 1; padding: 9px; border: 1px solid var(--bd); border-radius: 8px; background: #fff; color: var(--cz); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: var(--transition); }
.rxe-seg-btn.ativo { background: var(--rx); color: #fff; border-color: var(--rx); }
.rxe-parc-inputs { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.rxe-parc-inputs input { width: 60px; height: 38px; border: 1px solid var(--bd); border-radius: 8px; text-align: center; font-family: inherit; font-size: 14px; }
.rxe-field.rxe-parc small { font-weight: 500; color: var(--cz); }
.rxe-toggle { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--tx); font-weight: 700; cursor: pointer; }
.rxe-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rxe-switch { position: relative; width: 46px; height: 26px; border-radius: 99px; background: #cbd5e1; transition: var(--transition); flex-shrink: 0; }
.rxe-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.22); transition: transform .2s; }
.rxe-toggle input:checked + .rxe-switch { background: #16a34a; }
.rxe-toggle input:checked + .rxe-switch::after { transform: translateX(20px); }
.rx-entrada-foot { display: flex; align-items: center; gap: 10px; padding: 6px 18px 18px; }
.rxe-del { font-size: 12px; color: var(--vm); background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 700; }
.rxe-save { margin-left: auto; font-size: 13px; font-weight: 800; color: #fff; background: var(--rx); border: none; border-radius: 9px; padding: 10px 20px; cursor: pointer; font-family: inherit; }
.rxe-save:hover { background: var(--srx-premium-navy, #0a2a5e); }
.rx-saida-add-foot { width: 100%; padding: 11px; border: 1px dashed var(--rxb); border-radius: var(--radius-md); background: var(--rxc); color: var(--rx); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: var(--transition); }
.rx-saida-add-foot:hover { background: var(--rx); color: #fff; border-style: solid; border-color: var(--rx); }
/* Fase B — grid de cards de categoria (saídas) */
.saidas-cards-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 6px 0 12px; }
.saida-cat-card {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 2px; padding: 14px 11px;
border: none; border-radius: var(--radius-md);
background: var(--br); box-shadow: var(--rx-shadow-soft);
cursor: pointer; font-family: inherit; transition: var(--transition);
}
.saida-cat-card:hover { box-shadow: var(--rx-shadow-premium); transform: translateY(-1px); }
.saida-cat-card .scc-ico { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--rxc); font-size: 17px; margin-bottom: 5px; }
.saida-cat-card .scc-nome { font-size: 12.5px; font-weight: 800; color: var(--tx); }
.saida-cat-card .scc-desc { font-size: 10.5px; color: var(--cz); line-height: 1.3; min-height: 26px; }
.saida-cat-card .scc-val { font-size: 15px; font-weight: 950; color: var(--tx); margin-top: 4px; }
.saida-cat-card:not(.tem-valor) .scc-val { color: #cbd5e1; }
.saida-cat-card .scc-qtd { font-size: 10px; color: #b6bdc7; }
.saida-cat-card .scc-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; cursor: pointer; }
.saida-cat-card .scc-toggle-inp { position: absolute; opacity: 0; width: 1px; height: 1px; }
.saida-cat-card .scc-toggle-sw { position: relative; width: 30px; height: 17px; border-radius: 99px; background: #cbd5e1; transition: var(--transition); flex-shrink: 0; }
.saida-cat-card .scc-toggle-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.25); transition: transform .2s; }
.saida-cat-card .scc-toggle-inp:checked + .scc-toggle-sw { background: var(--vd, #16a34a); }
.saida-cat-card .scc-toggle-inp:checked + .scc-toggle-sw::after { transform: translateX(13px); }
.saida-cat-card .scc-toggle-inp:focus-visible + .scc-toggle-sw { outline: 2px solid var(--rx); outline-offset: 2px; }
.saida-cat-card .scc-toggle-txt { font-size: 10.5px; font-weight: 700; color: var(--cz); }
.saida-cat-card.pago .scc-toggle-txt { color: #0f7a4a; }
.saida-cat-card--cartao.pago { box-shadow: inset 0 0 0 1.5px rgba(22,163,74,.45); }
.saidas-cards-total { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 2px; border-top: 1px solid var(--bd); font-size: 13px; font-weight: 700; color: var(--cz); }
.saidas-cards-total strong { color: var(--vm); font-size: 15px; }
@media (max-width: 720px) {
.saidas-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── TABELA SAÍDAS ──────────────────────────────────────────── */
.saidas-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stbl { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 360px; }
.stbl thead th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--cz); background: var(--czc); padding: 8px 7px; }
.stbl thead th:first-child { border-radius: 7px 0 0 0; text-align: left; }
.stbl thead th:last-child { border-radius: 0 7px 0 0; text-align: center; }
.stbl tbody tr { transition: background .1s; }
.stbl tbody tr:hover td { background: #f5f7fb; }
.stbl tbody tr.pago td { background: #f0faf5; }
.stbl td { padding: 3px 7px; border-bottom: 1px solid #f0f1f3; vertical-align: middle; }
.ninput {
width: 100%;
max-width: 240px;
border: 1px solid transparent;
background: transparent;
padding: 6px 7px;
font-size: 13px;
font-family: inherit;
border-radius: 5px;
transition: .1s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ninput:hover { border-color: var(--bd); background: #fafbfc; }
.ninput:focus { border-color: var(--rx); background: #fff; outline: none; box-shadow: 0 0 0 2px rgba(10,42,94,.07); text-overflow: clip; }
.vinput {
display: block;
width: 128px;
min-width: 120px;
max-width: 135px;
border: 1px solid transparent;
background: transparent;
padding: 6px 9px;
font-size: 13px;
text-align: right;
font-family: inherit;
border-radius: 5px;
transition: .1s;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vinput:hover { border-color: var(--bd); background: #fafbfc; }
.vinput:focus { border-color: var(--rx); background: #fff; outline: none; box-shadow: 0 0 0 2px rgba(10,42,94,.07); width: 135px; max-width: 150px; }
.stbl input[type=checkbox] {
appearance: none; -webkit-appearance: none;
width: 22px; height: 22px; cursor: pointer; display: block; margin: auto;
border: 1px solid var(--bd); border-radius: 6px; background: #fafbfc;
transition: var(--transition);
}
.stbl input[type=checkbox]:hover { border-color: var(--vd); }
.stbl input[type=checkbox]:checked {
background-color: var(--vd); border-color: var(--vd);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center; background-size: 15px;
}
.stbl input[type=checkbox]:focus-visible { outline: 2px solid var(--rx); outline-offset: 2px; }
.stbl .del-s { background: none; border: none; cursor: pointer; color: #ccc; font-size: 13px; padding: 3px 5px; border-radius: 4px; min-height: unset; }
.stbl .del-s:hover { color: var(--vm); background: var(--vmc); }
.stbl tfoot td { padding: 9px; font-weight: 700; font-size: 13px; background: var(--czc); border-top: 2px solid var(--bd); text-align: left; }
.stbl tfoot td:nth-child(2){ text-align: right; color: var(--vm); }
/* Parcelas */
.parc-wrap { display: flex; align-items: center; gap: 3px; justify-content: center; white-space: nowrap; }
.parc-inp {
width: 44px;
min-width: 40px;
border: 1px solid var(--bd);
border-radius: 5px;
padding: 4px 5px;
font-size: 12px;
text-align: center;
font-family: inherit;
background: #fafbfc;
font-variant-numeric: tabular-nums;
}
.parc-inp:focus { outline: none; border-color: var(--rx); background: #fff; }
/* Vencimento com o MESMO acabamento das parcelas (arredondado, fundo suave). */
.venc-inp {
width: 50px;
border: 1px solid var(--bd);
border-radius: 5px;
padding: 4px 5px;
font-size: 12px;
text-align: center;
font-family: inherit;
background: #fafbfc;
font-variant-numeric: tabular-nums;
}
.venc-inp:focus { outline: none; border-color: var(--rx); background: #fff; }
.venc-inp.venc-alerta { border-color: var(--am); color: var(--am); font-weight: 700; }
.parc-sep { font-size: 12px; color: var(--cz); flex-shrink: 0; }
.parc-info { font-size: 10px; color: var(--cz); margin-top: 2px; text-align: center; }
/* Subitens de cartão */
.cartao-sub { background: #f8f5ff; border-left: 3px solid #8e44ad; }
.cartao-sub td { padding: 3px 7px !important; border-bottom: 1px solid #ede8f8 !important; }
.add-sub-btn { background: none; border: 1px dashed #c8b8f0; border-radius: 5px; color: #8e44ad; font-size: 11px; padding: 2px 8px; cursor: pointer; margin-top: 3px; font-family: inherit; min-height: unset; }
.add-sub-btn:hover { background: #f0ebff; }
/* ── RESUMO ANUAL — tabela premium ──────────────────────────── */
.resumo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.resumo-table th { background: var(--hbg); color: #fff; padding: 12px 16px; font-weight: 700; text-align: right; font-size: 11px; letter-spacing: .3px; white-space: nowrap; }
.resumo-table th:first-child{ text-align: left; min-width: 120px; }
.resumo-table th:not(:first-child) { min-width: 120px; }
.resumo-table tbody tr { border-bottom: 1px solid #f0f1f5; transition: background .1s; }
.resumo-table tbody tr:hover{ background: #f7f9fd; }
.resumo-table tbody tr:last-child { border-bottom: none; }
/* Mês atual — destaque elegante sem fundo invasivo */
.resumo-mes-atual { background: var(--rxc) !important; }
.resumo-mes-atual td { font-weight: 600; }
.resumo-mes-nome { padding: 11px 16px; text-align: left; font-size: 13px; color: var(--tx); white-space: nowrap; }
.resumo-atual-badge {
display: inline-block; margin-left: 8px;
background: var(--rx); color: #fff;
font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
padding: 1px 6px; border-radius: 99px; vertical-align: middle;
}
/* Células monetárias — sempre numa linha, alinhadas à direita */
.money-cell {
padding: 10px 16px; text-align: right;
white-space: nowrap; font-variant-numeric: tabular-nums;
font-size: 13px;
}
.money-positive { color: var(--vd); font-weight: 700; }
.money-negative { color: var(--vm); font-weight: 700; }
.money-positive-soft { color: #1a6b4a; }
.money-negative-soft { color: #c0392b; opacity: .8; }
.money-reservado { color: var(--rx); opacity: .85; }
/* Linha de total anual */
.resumo-total-row { background: #f0f3f8; border-top: 2px solid var(--rxb); }
.resumo-total-row td { padding: 12px 16px; font-size: 12px; }
.resumo-total-label { text-align: left; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--rx); }
/* ── PROJEÇÃO — tabela limpa ────────────────────────────────── */
.projecao-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.projecao-table th { background: var(--hbg); color: #fff; padding: 12px 16px; font-weight: 700; font-size: 11px; letter-spacing: .3px; white-space: nowrap; }
.projecao-table th:first-child { text-align: left; }
.projecao-table th:not(:first-child):not(:last-child) { text-align: right; }
.projecao-table th:last-child { text-align: center; }
.projecao-table td { padding: 10px 16px; border-bottom: 1px solid #f0f1f5; vertical-align: middle; }
.projecao-table tr:hover td { background: #f7f9fd; }
.projecao-table tr:last-child td { border-bottom: none; }
.projecao-melhora { background: #f0faf5 !important; }
.projecao-melhora td { font-weight: 500; }
.projecao-mes { white-space: nowrap; font-size: 13px; }
.projecao-venc { font-size: 11.5px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.projecao-alivio { color: var(--vd); font-weight: 700; }
.projecao-sit { text-align: center; white-space: nowrap; }
/* Badges de situação na projeção */
.projecao-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.projecao-badge-melhora { background: var(--vdc); color: var(--vd); }
.projecao-badge-deficit { background: var(--vmc); color: var(--vm); }
.projecao-badge-estavel { background: var(--czc); color: var(--cz); font-weight: 500; }
/* ── CRONOGRAMA DE PARCELAS — timeline premium ──────────────── */
/* Card-resumo superior */
.ct-resumo {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.ct-pill {
display: flex;
flex-direction: column;
gap: 3px;
background: var(--czc);
border: 1px solid var(--bd);
border-radius: 10px;
padding: 10px 16px;
min-width: 160px;
flex: 1;
}
.ct-pill-alert {
background: #fff5f5;
border-color: var(--vmb);
}
.ct-pill-ok {
background: var(--vdc);
border-color: var(--vdb);
}
.ct-pill-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--cz);
}
.ct-pill-alert .ct-pill-label { color: var(--vm); }
.ct-pill-ok .ct-pill-label { color: var(--vd); }
.ct-pill-val {
font-size: 15px;
font-weight: 800;
color: var(--tx);
white-space: nowrap;
}
.ct-pill-alert .ct-pill-val { color: var(--vm); }
.ct-pill-ok .ct-pill-val { color: var(--vd); }
/* Wrapper com scroll horizontal elegante */
.parcelas-timeline-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--rxb) transparent;
border-radius: 10px;
border: 1px solid var(--bd);
}
.parcelas-timeline-wrap::-webkit-scrollbar { height: 5px; }
.parcelas-timeline-wrap::-webkit-scrollbar-track { background: transparent; }
.parcelas-timeline-wrap::-webkit-scrollbar-thumb { background: var(--rxb); border-radius: 99px; }
/* Tabela principal */
.parcelas-timeline {
width: max-content;
min-width: 100%;
border-collapse: collapse;
font-size: 12px;
background: #fff;
}
/* ── CABEÇALHO ── */
.parcelas-timeline thead tr { background: var(--hbg); }
/* Coluna descrição */
.ptl-th-desc {
text-align: left;
padding: 11px 16px;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
white-space: nowrap;
min-width: 240px;
position: sticky;
left: 0;
background: var(--hbg);
z-index: 2;
}
/* Colunas de meses */
.ptl-th-mes {
text-align: center;
padding: 0;
color: rgba(255,255,255,.7);
font-size: 10px;
font-weight: 600;
white-space: nowrap;
min-width: 52px;
width: 52px;
vertical-align: middle;
}
.ptl-th-mes-alivo {
color: #fff;
background: rgba(255,255,255,.06);
}
.ptl-mes-label {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: .3px;
padding-top: 9px;
}
.ptl-mes-ano {
display: block;
font-size: 9px;
opacity: .5;
padding-bottom: 9px;
}
/* Coluna valor */
.ptl-th-val {
text-align: right;
padding: 11px 16px;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
white-space: nowrap;
min-width: 100px;
}
/* Coluna status */
.ptl-th-status {
text-align: center;
padding: 11px 12px;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
white-space: nowrap;
min-width: 110px;
}
/* ── LINHAS ── */
.ptl-row {
border-bottom: 1px solid #f0f1f5;
transition: background .1s;
}
.ptl-row:hover { background: #f7f9fd; }
.ptl-row:last-child { border-bottom: none; }
/* Célula descrição */
.ptl-td-desc {
padding: 12px 16px;
vertical-align: middle;
position: sticky;
left: 0;
background: #fff;
z-index: 1;
border-right: 1px solid #eef0f5;
min-width: 240px;
}
.ptl-row:hover .ptl-td-desc { background: #f7f9fd; }
.ptl-nome {
font-weight: 700;
color: var(--tx);
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 210px;
}
.ptl-cartao {
font-size: 10px;
color: var(--cz);
margin-top: 2px;
white-space: nowrap;
}
.ptl-meta {
font-size: 10.5px;
color: var(--cz);
margin-top: 3px;
white-space: nowrap;
}
/* Barra de progresso */
.ptl-bar-bg {
height: 3px;
background: var(--bd);
border-radius: 99px;
margin-top: 6px;
overflow: hidden;
width: 100%;
}
.ptl-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--rx), #4a90e2);
border-radius: 99px;
transition: width .4s ease;
}
/* Células de meses */
.ptl-td-mes {
text-align: center;
padding: 4px 2px;
vertical-align: middle;
width: 52px;
}
.ptl-td-ativo {
background: rgba(10,42,94,.03);
}
.ptl-td-fim {
background: rgba(26,122,74,.05);
}
/* Dot de mês ativo */
.ptl-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
.ptl-dot-ativo {
background: var(--rx);
opacity: .55;
}
.ptl-dot-vazio {
background: #e2e5ea;
opacity: .35;
}
/* Badge de encerramento */
.ptl-fim {
display: inline-block;
background: var(--vdc);
color: var(--vd);
border: 1px solid var(--vdb);
font-size: 9px;
font-weight: 800;
letter-spacing: .3px;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 99px;
white-space: nowrap;
}
/* Coluna valor/mês */
.ptl-td-val {
text-align: right;
padding: 12px 16px;
font-weight: 700;
font-size: 13px;
color: var(--tx);
white-space: nowrap;
vertical-align: middle;
}
/* Coluna status */
.ptl-td-status {
text-align: center;
padding: 12px 12px;
vertical-align: middle;
white-space: nowrap;
}
/* Badges de status */
.ptl-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 99px;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
.ptl-badge-fim { background: var(--vdc); color: var(--vd); }
.ptl-badge-curto { background: var(--amc); color: var(--am); }
.ptl-badge-longo { background: var(--czc); color: var(--cz); font-weight: 500; }
/* ── RODAPÉ PREMIUM ── */
.ptl-footer-row {
background: #f0f4fb;
border-top: 2px solid var(--rxb);
}
.ptl-footer-label {
padding: 11px 16px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--rx);
white-space: nowrap;
position: sticky;
left: 0;
background: #f0f4fb;
border-right: 1px solid #d8e4f5;
}
.ptl-footer-mes {
text-align: center;
padding: 11px 2px;
width: 52px;
}
.ptl-footer-val-mes {
font-size: 10.5px;
font-weight: 700;
color: var(--tx2);
white-space: nowrap;
}
.ptl-footer-empty {
color: #c8cdd6;
font-size: 12px;
}
.ptl-footer-total {
text-align: right;
padding: 11px 16px;
font-size: 14px;
font-weight: 800;
color: var(--rx);
white-space: nowrap;
}
/* ── Compatibilidade com classes antigas (não remover) ── */
.parcela-chip { display: inline-block; padding: 3px 7px; border-radius: 99px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.parcela-chip-ativo { background: var(--rxc); color: var(--rx); border: 1px solid var(--rxb); }
.parcela-fim { background: var(--vdc); color: var(--vd); border: 1px solid var(--vdb); }
.parcela-status { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.parcela-status-ultima { background: var(--vdc); color: var(--vd); }
.parcela-status-curto { background: var(--amc); color: var(--am); }
.parcela-status-longo { background: var(--czc); color: var(--cz); }
.parcela-desc-cell { text-align: left !important; min-width: 200px; padding-left: 14px !important; }
.parcela-mes-th { min-width: 52px; width: 52px; }
.parcela-valor-th { min-width: 100px; text-align: right !important; }
.parcela-status-th { min-width: 110px; text-align: center !important; }
.parcela-nome { font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.parcela-cartao { font-size: 10px; color: var(--cz); margin-top: 2px; white-space: nowrap; }
.parcela-mes-td { text-align: center; padding: 7px 3px; vertical-align: middle; }
.parcela-vazio { color: #d8dce3; font-size: 14px; }
.parcela-valor-td { text-align: right; padding: 7px 14px; font-weight: 700; color: var(--vm); white-space: nowrap; }
.parcela-status-td { text-align: center; padding: 7px 10px; white-space: nowrap; }
.parcela-total-row { background: #f0f3f8 !important; border-top: 2px solid var(--rxb) !important; }
.parcela-total-label { font-weight: 800 !important; font-size: 11px; color: var(--rx); }
.parcela-total-mes { font-size: 10.5px; font-weight: 700; text-align: center; }
.parcela-total-valor { font-weight: 800; color: var(--vm); }
/* ── UTILITÁRIOS DE TABELA (compatibilidade) ────────────────── */
.tip { font-size: 11px; color: var(--cz); line-height: 1.6; font-style: italic; }
.pos { color: var(--vd); font-weight: 700; }
.neg { color: var(--vm); font-weight: 700; }
.delta-pos { color: var(--vd); font-weight: 700; }
.delta-neg { color: var(--vm); font-weight: 700; }
/* ── CHAT / ASSISTENTE ──────────────────────────────────────── */
.chat-msgs { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; scroll-behavior: smooth; }
.chat-msg { border-radius: 12px; padding: 10px 13px; font-size: 12px; line-height: 1.7; max-width: 92%; }
.chat-msg.user { background: var(--rxc); border: 1px solid var(--rxb); align-self: flex-end; color: var(--rx); }
.chat-msg.ai { background: var(--czc); border: 1px solid var(--bd); align-self: flex-start; color: var(--tx2); }
.chat-msg.ai strong { color: var(--tx); }
.chat-msg.loading { color: var(--cz); font-style: italic; animation: puls 1.2s infinite; }
@keyframes puls { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.chat-input-row { display: flex; gap: 8px; }
.chat-inp { flex: 1; border: 1px solid var(--bd); border-radius: 9px; padding: 10px 13px; font-size: 13px; font-family: inherit; background: #fafbfc; transition: var(--transition); }
.chat-inp:focus { outline: none; border-color: var(--rx); background: #fff; box-shadow: 0 0 0 3px rgba(10,42,94,.07); }
.chat-send { background: var(--rx); color: #fff; border: none; border-radius: 9px; padding: 10px 16px; cursor: pointer; font-size: 15px; transition: var(--transition); }
.chat-send:hover { background: var(--rxm); }
.chat-sugest-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.chat-sugest { background: none; border: 1px solid var(--rxb); border-radius: 20px; padding: 5px 11px; font-size: 11px; color: var(--rx); cursor: pointer; font-family: inherit; transition: var(--transition); white-space: nowrap; }
.chat-sugest:hover { background: var(--rxc); }
/* ── UTILITÁRIOS ────────────────────────────────────────────── */
.row-flex { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.txt-sm { font-size: 11px; } .txt-xs { font-size: 10px; } .txt-ms { font-size: 12px; }
.fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; }
.c-rx { color: var(--rx); } .c-vd { color: var(--vd); } .c-vm { color: var(--vm); } .c-am { color: var(--am); } .c-cz { color: var(--cz); }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.w-100 { width: 100%; }
/* ── MOBILE — toque e comportamento ─────────────────────────── */
*, *::before, *::after {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
input, select, textarea { -webkit-appearance: none; appearance: none; }
input[type=number] { -moz-appearance: textfield; }
input[type=checkbox] { -webkit-appearance: checkbox; appearance: checkbox; }
/* Área mínima de toque (WCAG 2.5.5) */
button, .btn, .hbtn, .login-btn, .add-row-btn, .chat-send { min-height: 44px; cursor: pointer; }
.del-s, .del-btn, .reveal-btn, .chat-sugest { min-height: 36px; }
.ninput, .vinput, .chat-inp, .lf input, .field input { min-height: 44px; font-size: 16px !important; }
.parc-inp { min-height: 36px; font-size: 14px !important; }
.consent-btn { min-height: 50px; }
@media (max-width: 768px) {
.header { padding: 0 10px; flex-wrap: wrap; gap: 6px; min-height: auto; }
.hbrand h1 { font-size: 13px; }
.hbrand p { display: none; }
.hlogo { width: 30px; height: 30px; font-size: 10px; }
.hbtn { padding: 5px 9px; font-size: 10.5px; }
.tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; min-height: 40px; }
.tabs::-webkit-scrollbar { display: none; }
.tabbtn { font-size: 11px; padding: 5px 12px; flex-shrink: 0; min-height: 30px; min-width: 60px; }
.anosel { min-height: 40px; padding: 0 8px; }
.anosel label { display: none; }
.anosel select { font-size: 12px; }
.navmes { min-height: 40px; padding: 3px 4px; }
.navmes span { min-width: 95px; font-size: 12px; }
.navmes button { width: 30px; height: 30px; }
.card { padding: 12px 14px; border-radius: 10px; }
.g2, .g3 { grid-template-columns: 1fr !important; }
.stats { grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { padding: 10px 12px; min-height: 64px; }
.sval { font-size: 14px; }
.stbl { font-size: 12px; }
.stbl thead th { font-size: 10px; padding: 6px 5px; }
.stbl td { padding: 4px 5px; }
.ninput { font-size: 16px !important; min-height: 44px; }
.vinput { font-size: 16px !important; min-height: 44px; width: 120px; min-width: 110px; }
.parc-wrap { gap: 2px; }
.parc-inp { width: 44px; min-width: 40px; font-size: 14px !important; padding: 4px; min-height: 40px; }
.pagstats { grid-template-columns: 1fr; gap: 8px; }
.chat-msgs { max-height: 220px; }
.chat-inp { font-size: 16px !important; }
.chat-sugest { font-size: 10px; padding: 5px 9px; }
.login-wrap { padding: 12px; }
.login-box { padding: 20px 16px; border-radius: 14px; }
.login-brand h1 { font-size: 22px; }
.login-btn { font-size: 15px; padding: 14px; }
#saldoDisp { font-size: 22px; }
.consent-inner { padding: 20px 18px 16px; }
/* Header mobile — scroll lateral nas ações */
.hbrand { padding: 6px 0; gap: 8px; }
.hright { width: 100%; justify-content: flex-start; gap: 4px; padding: 4px 0 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hright::-webkit-scrollbar { display: none; }
.hbtn { min-height: 36px; padding: 5px 8px; font-size: 10px; flex-shrink: 0; }
.navmes { flex-shrink: 0; }
.anosel { flex-shrink: 0; }
.tabs { flex-shrink: 0; }
/* Tabelas — min-width + overflow no mobile */
.resumo-table { min-width: 480px; }
.projecao-table { min-width: 500px; }
#tab-resumo .card > div[style] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ct-pills — scroll horizontal, sem crescer */
.ct-resumo { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; padding-bottom: 4px; scrollbar-width: none; }
.ct-resumo::-webkit-scrollbar { display: none; }
.ct-pill { flex-shrink: 0; min-width: 140px; max-width: 200px; padding: 9px 12px; }
.ct-pill-val { font-size: 13px; }
/* Botões — área de toque */
.add-row-btn { min-height: 44px; font-size: 13px; }
.del-btn, .del-s { min-height: 40px; min-width: 36px; }
/* Cards */
.ctn { padding: 10px; }
.saude-ia { font-size: 12.5px; line-height: 1.75; }
.saldo-box .sb-val { font-size: 22px; }
.rm-atual { font-size: 15px; }
/* Chat sugestões — scroll horizontal */
.chat-sugest-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
.chat-sugest-row::-webkit-scrollbar { display: none; }
.chat-sugest { flex-shrink: 0; font-size: 11px; padding: 6px 11px; }
/* Resumo em mobile — padding compacto */
#tab-resumo .ctn,
.ctn-wide { padding: 12px; }
.money-cell { padding: 9px 10px; font-size: 12px; }
.resumo-mes-nome{ padding: 9px 10px; font-size: 12px; }
.resumo-table th,
.projecao-table th { padding: 9px 10px; }
.resumo-total-row td { padding: 10px; }
.projecao-table td { padding: 9px 10px; }
/* Dívidas inputs */
.dlabel-inp, .dval-inp { min-height: 44px; font-size: 16px !important; }
/* Cronograma mobile */
.ct-resumo { gap: 8px; }
.ct-pill { min-width: 120px; padding: 9px 12px; }
.ct-pill-val { font-size: 13px; }
.ptl-th-desc,
.ptl-td-desc { min-width: 180px; }
.ptl-nome { max-width: 155px; font-size: 12px; }
.ptl-th-mes,
.ptl-td-mes { min-width: 44px; width: 44px; }
.ptl-th-val,
.ptl-td-val { padding: 9px 10px; font-size: 12px; }
.ptl-th-status,
.ptl-td-status { padding: 9px 8px; }
}
@media (max-width: 700px) {
.g2 { grid-template-columns: 1fr; }
.hright { gap: 4px; }
.navmes { gap: 2px; }
}
@media (max-width: 480px) {
.stats { grid-template-columns: 1fr 1fr; }
.chart-wrap { gap: 14px; }
.chart-canvas-wrap { width: 165px; height: 165px; }
.chart-legend { min-width: 100%; }
.rx-chart-topline { align-items:flex-start; }
.vinput { width: 72px; }
.tabbtn { font-size: 10px; padding: 4px 8px; }
#saldoDisp { font-size: 18px; }
.login-brand h1 { font-size: 20px; }
.stats { grid-template-columns: 1fr 1fr; gap: 6px; }
.sval { font-size: 13px; }
}
@media (max-width: 430px) {
.header { flex-direction: column; align-items: stretch; padding: 8px 10px 6px; gap: 6px; }
.hbrand { justify-content: flex-start; }
.hright { justify-content: flex-start; padding-bottom: 4px; }
.tabbtn { font-size: 11px; padding: 5px 11px; }
.navmes span { min-width: 100px; }
.stats { grid-template-columns: 1fr 1fr; gap: 7px; }
.stat { padding: 9px 10px; min-height: 58px; }
.sval { font-size: 13px; }
.slabel { font-size: 9.5px; }
.pagstats { gap: 7px; }
.pstat { padding: 10px 12px; }
.psval { font-size: 14px; }
.card { padding: 11px 12px; }
.ctn { padding: 8px; }
.ct-pill-val { font-size: 12px; }
.ptl-th-desc,
.ptl-td-desc { min-width: 160px; }
.ptl-nome { font-size: 11.5px; max-width: 140px; }
.ptl-meta { font-size: 10px; }
}
@media (max-width: 380px) {
.card { padding: 10px 11px; }
.vinput { width: 110px; min-width: 100px; }
.tabbtn { font-size: 10px; padding: 4px 8px; }
#saldoDisp { font-size: 18px; }
.login-brand h1 { font-size: 20px; }
.stats { grid-template-columns: 1fr 1fr; gap: 6px; }
.sval { font-size: 12px; }
.hbrand h1 { font-size: 12px; }
.navmes span { min-width: 80px; font-size: 11px; }
.tabbtn { font-size: 10px; padding: 4px 9px; }
}
/* Safe area — iPhone notch / Dynamic Island */
@supports (padding: max(0px)) {
.header {
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
}
body {
padding-bottom: max(0px, env(safe-area-inset-bottom));
}
#loginScreen {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-top: max(24px, env(safe-area-inset-top));
}
}
/* ── PRIVACIDADE & DADOS — Modal LGPD ──────────────────────── */
/* Overlay */
.priv-overlay {
position: fixed;
inset: 0;
z-index: 9400;
background: rgba(7,27,62,.72);
backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
animation: fadeIn .2s ease;
}
/* Container do modal */
.priv-modal {
background: #fff;
border-radius: 18px;
width: 100%;
max-width: 560px;
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
box-shadow: 0 24px 80px rgba(0,0,0,.3);
overflow: hidden;
}
/* Header */
.priv-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px 16px;
border-bottom: 1px solid var(--bd);
background: var(--hbg);
flex-shrink: 0;
}
.priv-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.priv-icon {
font-size: 22px;
line-height: 1;
}
.priv-title {
font-size: 16px;
font-weight: 800;
color: #fff;
margin-bottom: 2px;
}
.priv-sub {
font-size: 11px;
color: rgba(255,255,255,.5);
}
.priv-close {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.15);
color: rgba(255,255,255,.7);
border-radius: 8px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
transition: .14s;
flex-shrink: 0;
min-height: unset;
}
.priv-close:hover {
background: rgba(255,255,255,.2);
color: #fff;
}
/* Body com scroll */
.priv-body {
overflow-y: auto;
padding: 6px 0 8px;
flex: 1;
-webkit-overflow-scrolling: touch;
}
/* Seções */
.priv-section {
padding: 18px 22px;
border-bottom: 1px solid #f0f1f5;
}
.priv-section:last-child { border-bottom: none; }
.priv-section-danger {
background: #fff9f9;
}
.priv-section-links {
background: var(--czc);
}
.priv-section-title {
font-size: 13px;
font-weight: 800;
color: var(--tx);
margin-bottom: 6px;
}
.priv-section-title-danger {
color: var(--vm);
}
.priv-section-desc {
font-size: 12.5px;
color: var(--cz);
line-height: 1.6;
margin-bottom: 12px;
}
/* Campo de nome */
.priv-nome-row {
display: flex;
gap: 8px;
align-items: center;
}
.priv-input {
flex: 1;
border: 1.5px solid var(--bd);
border-radius: 9px;
padding: 9px 13px;
font-size: 14px;
font-family: inherit;
background: #fafbfc;
min-height: 42px;
transition: .14s;
}
.priv-input:focus {
outline: none;
border-color: var(--rx);
background: #fff;
box-shadow: 0 0 0 3px rgba(10,42,94,.08);
}
/* Feedback inline */
.priv-feedback {
display: block;
font-size: 12px;
margin-top: 7px;
min-height: 16px;
line-height: 1.5;
}
.priv-feedback-ok { color: var(--vd); font-weight: 600; }
.priv-feedback-err { color: var(--vm); font-weight: 600; }
.priv-feedback-warn { color: var(--am); font-weight: 600; }
/* Botões do painel */
.priv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 16px;
border-radius: 9px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
border: none;
transition: .14s;
white-space: nowrap;
min-height: 40px;
text-decoration: none;
}
.priv-btn-primary {
background: var(--rx);
color: #fff;
}
.priv-btn-primary:hover { background: var(--rxm); }
.priv-btn-secondary {
background: var(--rxc);
color: var(--rx);
border: 1px solid var(--rxb);
}
.priv-btn-secondary:hover { background: var(--rxb); }
.priv-btn-danger {
background: none;
color: var(--vm);
border: 1.5px solid var(--vmb);
}
.priv-btn-danger:hover {
background: var(--vmc);
}
.priv-btn-danger-confirm {
background: var(--vm);
color: #fff;
border: 1.5px solid var(--vm);
animation: pulse-danger .6s ease infinite alternate;
}
@keyframes pulse-danger {
from { opacity: .85; }
to { opacity: 1; }
}
.priv-btn-danger:disabled {
opacity: .5;
cursor: not-allowed;
}
.priv-btn-wpp {
background: #25d366;
color: #fff;
}
.priv-btn-wpp:hover { background: #1db954; }
.priv-btn-email {
background: var(--rxc);
color: var(--rx);
border: 1px solid var(--rxb);
}
.priv-btn-email:hover { background: var(--rxb); }
/* Aviso de exclusão */
.priv-aviso {
background: #fff3f3;
border: 1px solid var(--vmb);
border-radius: 9px;
padding: 11px 14px;
font-size: 12.5px;
color: #8b0000;
line-height: 1.6;
margin-bottom: 12px;
}
.priv-aviso strong { color: var(--vm); }
/* Feedback de exclusão concluída */
.priv-exclusao-ok {
text-align: center;
padding: 16px 0 8px;
}
.priv-exclusao-icon { font-size: 32px; margin-bottom: 10px; }
.priv-exclusao-ok h3 {
font-size: 15px;
font-weight: 800;
color: var(--vd);
margin-bottom: 8px;
}
.priv-exclusao-ok p {
font-size: 13px;
color: var(--tx2);
line-height: 1.65;
margin-bottom: 8px;
}
.priv-exclusao-sub {
font-size: 11px;
color: var(--cz);
}
/* Suporte mini */
.priv-suporte-mini {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--bd);
}
.priv-suporte-mini > span {
font-size: 12px;
color: var(--cz);
flex-shrink: 0;
}
/* ── Seção 1 — Pills de proteção ── */
.priv-resumo { background: var(--rxc) !important; }
.priv-pills {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
}
.priv-pill {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--rxb);
border-radius: 9px;
padding: 9px 12px;
}
.priv-pill-icon { font-size: 16px; flex-shrink: 0; }
.priv-pill-txt { font-size: 12px; font-weight: 600; color: var(--tx); line-height: 1.4; }
/* ── Seção 2 — Links jurídicos ── */
.priv-juridico-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
}
.priv-juridico-item {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--bd);
border-radius: 10px;
padding: 12px 14px;
text-decoration: none;
color: var(--tx);
font-size: 13px;
font-weight: 600;
transition: .14s;
}
.priv-juridico-item:hover {
border-color: var(--rxb);
background: var(--rxc);
color: var(--rx);
}
/* ── Seção 3 — Exportação ── */
.priv-export-section { background: #f7f9fd !important; }
/* ── Seção 4 — Exclusão ── */
.priv-exclusao-warn {
background: #fff3f3;
border: 1px solid var(--vmb);
border-radius: 9px;
padding: 11px 14px;
font-size: 12.5px;
color: #8b0000;
line-height: 1.6;
margin-bottom: 12px;
}
/* ── Seção 5 — Contato ── */
.priv-contato-box { background: var(--czc) !important; }
.priv-contato-sub {
display: block;
font-size: 10.5px;
color: var(--cz);
margin-top: 2px;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Seção 6 — Consentimento ── */
.priv-consent-box {
background: #fafbfc;
border: 1px solid var(--bd);
border-radius: 10px;
overflow: hidden;
margin-top: 10px;
}
.priv-consent-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 14px;
border-bottom: 1px solid #f0f1f5;
font-size: 12.5px;
}
.priv-consent-row:last-child { border-bottom: none; }
.priv-consent-label { color: var(--cz); flex: 1; }
.priv-consent-value { font-weight: 700; color: var(--tx); white-space: nowrap; }
.priv-consent-nota {
font-size: 11px;
color: var(--cz);
margin-top: 8px;
line-height: 1.55;
}
.priv-consent-vazio {
background: var(--czc);
border: 1px dashed var(--bd);
border-radius: 9px;
padding: 14px;
font-size: 13px;
color: var(--cz);
text-align: center;
margin-top: 8px;
}
/* Mobile — ajustes dos grids ≤500px */
@media (max-width: 500px) {
.priv-pills { grid-template-columns: 1fr; }
.priv-juridico-grid { grid-template-columns: 1fr; }
.priv-consent-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.priv-consent-value { font-size: 12px; }
}
/* Grid de links legais */
.priv-links-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
}
.priv-link-item {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--bd);
border-radius: 9px;
padding: 10px 12px;
text-decoration: none;
color: var(--tx);
font-size: 12.5px;
font-weight: 600;
transition: .14s;
}
.priv-link-item:hover {
border-color: var(--rxb);
background: var(--rxc);
color: var(--rx);
}
.priv-link-icon { font-size: 16px; flex-shrink: 0; }
.priv-lgpd-note {
font-size: 11.5px;
color: var(--cz);
line-height: 1.6;
}
.priv-lgpd-note strong { color: var(--tx); }
/* Mobile */
@media (max-width: 600px) {
.priv-modal { border-radius: 14px 14px 0 0; align-self: flex-end; max-height: min(92vh, calc(100dvh - 12px)); overscroll-behavior: contain; }
.priv-overlay { align-items: flex-end; padding: 0; }
.priv-links-grid { grid-template-columns: 1fr; }
.priv-nome-row { flex-direction: column; align-items: stretch; }
.priv-input { width: 100%; }
}
/* ── PRINT ──────────────────────────────────────────────────── */
@media print {
/* Ocultar: navegação, botões interativos, chat, banner, tabela detalhada */
.header, #loginScreen, #consentBanner,
.priv-overlay, #privacidadeModal,
.add-row-btn, .add-sub-btn, .del-s, .del-btn,
#chartSection,
.chat-msgs, .chat-input-row, .chat-sugest-row,
.saida-tabela-wrap, .saidas-wrap,
.parc-wrap,
#cardFluxo, #cardProjecao,
.hbtn, button,
.recbox label > input[type=checkbox] { display: none !important; }
/* Mantém checkmark textual nos recbox */
.recbox label::before { content: '☑ '; }
/* Todas as páginas visíveis */
.page { display: block !important; }
/* Layout A4 limpo */
body { background: #fff !important; font-size: 11pt; color: #1a1a1a; }
.card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; margin-bottom: 10px; }
.ctn, #tab-resumo .ctn, .ctn-wide { padding: 0; max-width: 100%; }
.g2 { grid-template-columns: 1fr 1fr !important; gap: 10px; }
.stats { grid-template-columns: repeat(4, 1fr) !important; }
.sval, .psval { font-size: 12pt !important; }
.resumo-table td, .resumo-table th,
.projecao-table td, .projecao-table th { padding: 6px 8px; font-size: 10pt; }
.resumo-atual-badge { display: none !important; }
.parcelas-timeline-wrap { overflow: visible; }
@page { size: A4 portrait; margin: 15mm 18mm; }
}
/* =============================================================
HOTFIX PRÉ-LANÇAMENTO — Saídas do Mês
Padroniza composição, larguras e alinhamentos da tabela.
============================================================= */
#tab-mensal .tbl-wrap,
#tab-mensal .table-wrap,
#tab-mensal .stbl-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#tab-mensal table.stbl,
#tab-mensal .stbl {
width: 100%;
min-width: 760px;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
}
#tab-mensal .stbl th,
#tab-mensal .stbl td {
vertical-align: middle;
padding: 7px 6px;
}
#tab-mensal .stbl th {
white-space: nowrap;
font-size: 11px;
letter-spacing: .02em;
}
#tab-mensal .stbl .col-desc { width: auto; text-align: left; }
#tab-mensal .stbl .col-valor { width: 146px; text-align: right; }
#tab-mensal .stbl .col-parcelas { width: 158px; text-align: center; }
#tab-mensal .stbl .col-venc { width: 76px; text-align: center; }
#tab-mensal .stbl .col-pago { width: 58px; text-align: center; }
#tab-mensal .stbl .col-acoes { width: 46px; text-align: center; }
#tab-mensal .stbl td:nth-child(1) { text-align: left; min-width: 0; }
#tab-mensal .stbl td:nth-child(2) { text-align: right; }
#tab-mensal .stbl td:nth-child(3),
#tab-mensal .stbl td:nth-child(4),
#tab-mensal .stbl td:nth-child(5),
#tab-mensal .stbl td:nth-child(6) { text-align: center; }
#tab-mensal .ninput,
#tab-mensal .vinput,
#tab-mensal .parc-inp,
#tab-mensal .venc-inp {
height: 34px;
border: 1px solid var(--bd);
border-radius: 7px;
font-family: inherit;
}
#tab-mensal .ninput {
width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#tab-mensal .vinput {
width: 132px;
min-width: 128px;
max-width: 140px;
text-align: right;
padding: 6px 10px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#tab-mensal .parc-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
white-space: nowrap;
}
#tab-mensal .parc-inp,
#tab-mensal .venc-inp {
width: 60px;
min-width: 58px;
max-width: 64px;
text-align: center;
padding: 6px 5px;
font-variant-numeric: tabular-nums;
}
#tab-mensal .parc-sep {
min-width: 8px;
text-align: center;
color: var(--cz);
font-weight: 700;
}
#tab-mensal .parc-info,
#tab-mensal .grupo-badge,
#tab-mensal .venc-cell > div {
text-align: center;
line-height: 1.2;
}
#tab-mensal .venc-cell {
text-align: center;
min-width: 76px;
}
#tab-mensal .venc-inp.venc-alerta {
border-color: var(--am);
background: var(--amc);
color: var(--am);
font-weight: 700;
}
#tab-mensal .del-s {
min-width: 30px;
min-height: 30px;
}
#tab-mensal tfoot td,
#tab-mensal #totSai {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@media (max-width: 768px) {
#tab-mensal table.stbl,
#tab-mensal .stbl {
min-width: 820px;
}
#tab-mensal .ninput,
#tab-mensal .vinput,
#tab-mensal .parc-inp,
#tab-mensal .venc-inp {
min-height: 44px;
height: 44px;
font-size: 16px;
}
}
/* ── V1 Final: Agenda de vencimentos e impressão do resumo ───────── */
.venc-card {
border-color: #f5d98a;
background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
}
.venc-resumo {
font-size: 12px;
color: var(--tx2);
margin: 4px 0 10px;
line-height: 1.45;
}
.venc-list {
display: flex;
flex-direction: column;
gap: 7px;
}
.venc-item {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
padding: 9px 10px;
border: 1px solid var(--bd);
border-radius: 10px;
background: #fff;
}
.venc-item-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.venc-item-main strong {
font-size: 12.5px;
color: var(--tx);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.venc-item-main span {
font-size: 12px;
font-weight: 800;
color: var(--rx);
font-variant-numeric: tabular-nums;
}
.venc-item-status {
font-size: 10.5px;
font-weight: 800;
border-radius: 999px;
padding: 4px 8px;
white-space: nowrap;
background: var(--czc);
color: var(--cz);
}
.venc-vencido { border-color: var(--vmb); background: var(--vmc); }
.venc-vencido .venc-item-status { background: #fff; color: var(--vm); }
.venc-hoje { border-color: var(--amb); background: var(--amc); }
.venc-hoje .venc-item-status { background: #fff; color: var(--am); }
.venc-proximo { border-color: var(--rxb); background: var(--rxc); }
.venc-proximo .venc-item-status { background: #fff; color: var(--rx); }
.venc-pago { opacity: .72; }
.venc-pago .venc-item-status { background: var(--vdc); color: var(--vd); }
.venc-more {
font-size: 11px;
color: var(--cz);
text-align: center;
padding: 4px 0 0;
}
.resumo-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.print-resumo-btn {
border: 1px solid var(--rxb);
background: var(--rxc);
color: var(--rx);
border-radius: 10px;
padding: 8px 12px;
font-size: 12px;
font-weight: 800;
font-family: inherit;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.print-resumo-btn:hover {
background: var(--rx);
color: #fff;
}
@media (max-width: 720px) {
.resumo-head { align-items: flex-start; flex-direction: column; }
.print-resumo-btn { width: 100%; min-height: 44px; }
.venc-item { grid-template-columns: 1fr; align-items: flex-start; }
.venc-item-status { width: fit-content; }
}
.linha-destaque-venc {
animation: rxLinhaVencimento 2.2s ease;
}
@keyframes rxLinhaVencimento {
0%, 100% { box-shadow: inset 0 0 0 0 rgba(200,127,10,0); background: inherit; }
15%, 75% { box-shadow: inset 4px 0 0 var(--am); background: var(--amc); }
}
/* =============================================================
HOTFIX MOBILE APP-LIKE — Header compacto e navegação horizontal
Objetivo: impedir quebra de layout no celular, manter controles
acessíveis e conter o overflow dentro do header.
============================================================= */
@media (max-width: 768px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
#app,
.page,
.ctn,
.ctn-wide {
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
.header {
width: 100%;
max-width: 100vw;
min-height: unset;
position: sticky;
top: 0;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 10px;
padding: 10px 12px 9px;
background: rgba(7, 27, 62, .98);
box-shadow: 0 10px 28px rgba(7, 27, 62, .18);
overflow: hidden;
}
.hbrand {
width: 100%;
display: flex;
align-items: center;
gap: 9px;
padding: 0;
flex: 0 0 auto;
}
.hlogo {
width: 34px;
height: 34px;
border-radius: 10px;
}
.hbrand h1 {
font-size: 13px;
line-height: 1.15;
}
.hbrand p {
display: block;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
opacity: .9;
}
.hright {
width: 100%;
max-width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 8px;
padding: 0 0 4px;
margin: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.28) transparent;
scroll-snap-type: x proximity;
}
.hright::-webkit-scrollbar {
height: 4px;
}
.hright::-webkit-scrollbar-track {
background: transparent;
}
.hright::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.25);
border-radius: 99px;
}
.hright > * {
flex: 0 0 auto;
scroll-snap-align: start;
}
#syncStatus {
flex: 0 0 auto;
white-space: nowrap;
}
.anosel,
.navmes,
.tabs,
.hbtn {
height: 44px;
min-height: 44px;
border-radius: 12px;
border-color: rgba(255,255,255,.13);
background: rgba(13, 53, 128, .72);
}
.anosel {
min-width: 64px;
padding: 0 10px;
}
.anosel label {
display: block;
font-size: 9px;
margin-bottom: 3px;
}
.anosel select {
font-size: 13px;
font-weight: 800;
}
.navmes {
min-width: 188px;
padding: 4px 6px;
}
.navmes button {
width: 34px;
height: 34px;
min-height: 34px;
border-radius: 9px;
}
.navmes span {
min-width: 92px;
font-size: 13px;
font-weight: 800;
}
.tabs {
display: inline-flex;
overflow: visible;
padding: 4px;
gap: 4px;
}
.tabbtn {
height: 34px;
min-height: 34px;
min-width: 76px;
padding: 0 12px;
border-radius: 9px;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hbtn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: max-content;
padding: 0 13px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
color: rgba(255,255,255,.78);
}
.hbtn.wpp {
color: #21d07a;
border-color: rgba(33,208,122,.45);
background: rgba(0, 78, 65, .35);
}
.hbtn-sair {
padding-inline: 14px;
}
.ctn,
.ctn-wide {
padding-left: 10px;
padding-right: 10px;
}
.card {
width: 100%;
max-width: 100%;
}
/* Tabelas largas devem rolar dentro do card, não no body. */
#tab-mensal .tbl-wrap,
#tab-mensal .table-wrap,
#tab-mensal .stbl-wrap,
#tab-resumo .card > div[style] {
max-width: 100%;
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 430px) {
.header {
padding: 9px 10px 8px;
gap: 9px;
}
.hbrand p {
max-width: 180px;
}
.hright {
gap: 7px;
}
.navmes {
min-width: 178px;
}
.navmes span {
min-width: 86px;
}
.hbtn {
padding: 0 12px;
}
}
/* =============================================================
V12 — MOBILE ESSENCIAL RX FINANCEIRO
Celular foca em: status, lançamento rápido e pagamentos.
Desktop continua completo e preservado.
============================================================= */
.rx-mobile-shell,
.rxm-sheet-overlay,
.rxm-full-return,
.rxm-toast { display: none; }
@media (max-width: 820px) {
body:not(.rxm-full) #app > .header,
body:not(.rxm-full) #app > .page {
display: none !important;
}
body.rxm-full #rxMobileShell { display: none !important; }
body.rxm-full .rxm-full-return {
position: fixed;
left: 14px;
right: 14px;
bottom: calc(14px + env(safe-area-inset-bottom));
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
border: none;
border-radius: 999px;
background: var(--hbg);
color: #fff;
font: 800 13px/1 'Segoe UI', system-ui, sans-serif;
box-shadow: 0 18px 45px rgba(7,27,62,.28);
}
body:not(.rxm-full) #rxMobileShell {
display: flex !important;
}
#rxMobileShell {
min-height: 100dvh;
flex-direction: column;
background:
radial-gradient(circle at 18% -10%, rgba(26,107,197,.28), transparent 34%),
radial-gradient(circle at 88% 8%, rgba(26,122,74,.18), transparent 32%),
linear-gradient(180deg, #071b3e 0%, #0a2a5e 35%, #eef0f5 35.1%, #eef0f5 100%);
color: var(--tx);
padding: calc(12px + env(safe-area-inset-top)) 14px calc(92px + env(safe-area-inset-bottom));
overflow-x: hidden;
}
.rxm-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
.rxm-brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
border: none;
background: transparent;
color: #fff;
text-align: left;
font-family: inherit;
}
.rxm-brand-logo {
width: 42px;
height: 42px;
border-radius: 15px;
display: grid;
place-items: center;
background: rgba(255,255,255,.13);
border: 1px solid rgba(255,255,255,.16);
color: #fff;
font-size: 13px;
font-weight: 950;
letter-spacing: -.2px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.rxm-brand strong {
display: block;
color: #fff;
font-size: 15px;
font-weight: 850;
line-height: 1.1;
}
.rxm-brand small {
display: block;
margin-top: 2px;
color: rgba(255,255,255,.62);
font-size: 11px;
max-width: 190px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rxm-top-action,
.rxm-close {
width: 42px;
height: 42px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 15px;
background: rgba(255,255,255,.12);
color: #fff;
font-size: 18px;
font-weight: 800;
font-family: inherit;
}
.rxm-content {
flex: 1;
min-height: 0;
}
.rxm-panel { display: none; animation: rxmIn .22s ease; }
.rxm-panel.ativo { display: block; }
@keyframes rxmIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.rxm-hero-card {
position: relative;
overflow: hidden;
border-radius: 28px;
padding: 20px;
background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(242,246,255,.94));
border: 1px solid rgba(255,255,255,.7);
box-shadow: 0 22px 60px rgba(7,27,62,.22);
}
.rxm-hero-card::after {
content: '';
position: absolute;
width: 160px;
height: 160px;
right: -64px;
top: -64px;
border-radius: 50%;
background: radial-gradient(circle, rgba(10,42,94,.16), transparent 68%);
pointer-events: none;
}
.rxm-hero-head {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
/* BUG-003 (v2.3.1): permite o bloco de texto encolher para o badge caber dentro do card. */
.rxm-hero-head > div:first-child {
min-width: 0;
}
.rxm-kicker {
display: block;
color: var(--rx);
font-size: 10px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .75px;
margin-bottom: 4px;
}
.rxm-hero-card h2 {
color: var(--hbg);
font-size: clamp(28px, 9vw, 40px);
line-height: .95;
letter-spacing: -1.4px;
margin: 0 0 8px;
font-weight: 950;
font-variant-numeric: tabular-nums;
}
.rxm-hero-card h2.negativo { color: var(--vm); }
.rxm-hero-card h2.positivo { color: var(--vd); }
.rxm-hero-card p {
color: var(--tx2);
font-size: 12px;
line-height: 1.45;
max-width: 235px;
}
.rxm-health-pill {
position: relative;
z-index: 1;
flex-shrink: 0;
white-space: nowrap;
min-width: 54px;
text-align: center;
border-radius: 999px;
padding: 8px 12px;
background: var(--rxc);
color: var(--rx);
font-size: 11px;
font-weight: 900;
box-shadow: inset 0 0 0 1px var(--rxb);
}
.rxm-health-pill.ok { background: var(--vdc); color: var(--vd); box-shadow: inset 0 0 0 1px var(--vdb); }
.rxm-health-pill.warn { background: var(--amc); color: var(--am); box-shadow: inset 0 0 0 1px var(--amb); }
.rxm-health-pill.danger { background: var(--vmc); color: var(--vm); box-shadow: inset 0 0 0 1px var(--vmb); }
/* PATCH 04A — tela mobile "Detalhes do Cartão" (reaproveita .rxm-sheet) */
.rxm-card-resumo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.rxm-card-resumo-grid > div { background: var(--czc); border: 1px solid var(--bd); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.rxm-card-resumo-grid span { font-size: 11px; color: var(--tx2); }
.rxm-card-resumo-grid strong { font-size: 14px; color: var(--tx); }
.rxm-card-bloco { margin-top: 8px; }
.rxm-card-bloco-titulo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--rx); margin: 6px 0 8px; }
.rxm-card-compra-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font-family: inherit; cursor: pointer; background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.rxm-card-compra-item:active { background: var(--czc); }
.rxm-card-compra-item > div { min-width: 0; flex: 1; }
.rxm-card-compra-item strong { display: block; font-size: 13px; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rxm-card-compra-item span { font-size: 11px; color: var(--tx2); }
.rxm-card-compra-item b { font-size: 14px; color: var(--tx); white-space: nowrap; }
.rxm-compra-chevron { color: var(--tx2); font-size: 18px; font-style: normal; flex-shrink: 0; }
.rxm-card-detalhe-erro { font-size: 12px; color: var(--vm); background: var(--vmc); border: 1px solid var(--vmb); border-radius: 8px; padding: 8px 10px; margin: 4px 0 10px; }
.rxm-card-add-secondary { width: 100%; margin-top: 6px; padding: 12px; background: var(--rxc); color: var(--rx); border: 1px solid var(--rxb); border-radius: 12px; font-weight: 700; font-family: inherit; cursor: pointer; }
/* MELHORIA-005 — botões do card de cartão padronizados (mesma largura/altura/alinhamento) */
.rxm-mobile-card-cartao .rxm-mobile-card-side { flex-direction: column; align-items: stretch; gap: 7px; min-width: 136px; }
.rxm-mobile-card-cartao .rxm-mobile-actions { flex-direction: column; align-items: stretch; gap: 7px; width: 100%; }
.rxm-mobile-card-cartao .rxm-mobile-actions button { width: 100%; min-height: 38px; }
.rxm-mobile-card-cartao .rxm-mobile-card-side > b { text-align: right; }
/* PATCH 50 — hierarquia dos botões do cartão mobile:
Importar PDF é a ação principal em linha inteira; + Compra e Detalhes ficam como ações secundárias. */
body.rxm-mobile-viewport .rxm-mobile-card-cartao .rxm-mobile-actions button[data-rxm-action="importar-pdf"] {
grid-column: 1 / -1 !important;
min-height: 56px !important;
font-size: 13px !important;
background: var(--rx) !important;
color: #fff !important;
}
body.rxm-mobile-viewport .rxm-mobile-card-cartao .rxm-mobile-actions button[data-rxm-action="mobile-add-card-item"],
body.rxm-mobile-viewport .rxm-mobile-card-cartao .rxm-mobile-actions button[data-rxm-action="mobile-card-detail"] {
grid-column: auto !important;
min-height: 52px !important;
font-size: 12px !important;
background: var(--rxc) !important;
color: var(--rx) !important;
}
/* PATCH 06 ITEM B — botão "Salvar alterações" (telas de detalhe): ação positiva (verde) */
.rxm-sheet .rxm-card-add-primary {
width: 100%;
min-height: 48px;
margin-top: 8px;
border: 1px solid var(--vdb);
border-radius: 12px;
background: var(--vd);
color: #fff;
font-family: inherit;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.rxm-sheet .rxm-card-add-primary:active { background: var(--vdc); color: var(--vd); }
.rxm-progress-wrap {
position: relative;
z-index: 1;
margin-top: 18px;
}
.rxm-progress-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 7px;
color: var(--cz);
font-size: 11px;
font-weight: 700;
}
.rxm-progress-meta strong { color: var(--rx); }
.rxm-progress {
height: 11px;
border-radius: 999px;
background: rgba(10,42,94,.1);
overflow: hidden;
}
.rxm-progress span {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, var(--rx), #1a6bc5, var(--vd));
transition: width .35s ease;
}
.rxm-month-card {
margin: 14px 0;
display: grid;
grid-template-columns: 48px 1fr 48px;
align-items: center;
gap: 10px;
border-radius: 20px;
padding: 10px;
background: rgba(255,255,255,.95);
border: 1px solid rgba(184,204,232,.7);
box-shadow: 0 10px 30px rgba(7,27,62,.08);
}
.rxm-month-card button {
height: 44px;
border: none;
border-radius: 15px;
background: var(--rxc);
color: var(--rx);
font-size: 26px;
font-weight: 800;
font-family: inherit;
}
.rxm-month-card div { text-align: center; min-width: 0; }
.rxm-month-card span { display:block; color: var(--cz); font-size:10px; text-transform:uppercase; letter-spacing:.6px; font-weight:800; }
.rxm-month-card strong { display:block; color: var(--hbg); font-size:14px; font-weight:900; margin-top:2px; }
.rxm-status-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.rxm-stat {
min-height: 92px;
padding: 15px 14px;
border-radius: 20px;
background: #fff;
border: 1px solid var(--bd);
box-shadow: 0 10px 28px rgba(7,27,62,.06);
}
.rxm-stat span {
display: block;
color: var(--cz);
font-size: 10px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .55px;
margin-bottom: 8px;
}
.rxm-stat strong {
display: block;
color: var(--tx);
font-size: 18px;
line-height: 1.05;
font-weight: 950;
letter-spacing: -.5px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rxm-stat-ent { background: var(--vdc); border-color: var(--vdb); }
.rxm-stat-ent span, .rxm-stat-ent strong { color: var(--vd); }
.rxm-stat-sai { background: var(--vmc); border-color: var(--vmb); }
.rxm-stat-sai span, .rxm-stat-sai strong { color: var(--vm); }
.rxm-stat-pagar { background: #fff7ef; border-color: var(--amb); }
.rxm-stat-pagar span, .rxm-stat-pagar strong { color: var(--am); }
.rxm-stat-pago { background: var(--rxc); border-color: var(--rxb); }
.rxm-stat-pago span, .rxm-stat-pago strong { color: var(--rx); }
.rxm-primary-cta {
width: 100%;
border: none;
border-radius: 24px;
padding: 16px 18px;
margin-bottom: 14px;
min-height: 78px;
display: grid;
grid-template-columns: 46px 1fr;
grid-template-rows: auto auto;
column-gap: 12px;
align-items: center;
text-align: left;
background: linear-gradient(135deg, var(--vd), #21a365);
color: #fff;
font-family: inherit;
box-shadow: 0 18px 42px rgba(26,122,74,.28);
}
.rxm-primary-cta > span {
grid-row: 1 / span 2;
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 16px;
background: rgba(255,255,255,.18);
font-size: 28px;
font-weight: 700;
}
.rxm-primary-cta strong { font-size: 16px; font-weight: 950; line-height: 1.1; }
.rxm-primary-cta small { color: rgba(255,255,255,.78); font-size: 11px; margin-top: 2px; }
.rxm-section-card,
.rxm-page-title {
background: rgba(255,255,255,.97);
border: 1px solid rgba(221,225,231,.95);
border-radius: 24px;
padding: 16px;
box-shadow: 0 10px 30px rgba(7,27,62,.07);
}
.rxm-section-head {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
margin-bottom: 10px;
}
.rxm-section-head h3,
.rxm-page-title h2 {
color: var(--hbg);
font-size: 18px;
line-height: 1.1;
letter-spacing: -.4px;
margin: 0;
font-weight: 950;
}
.rxm-section-head button {
border: none;
background: var(--rxc);
color: var(--rx);
padding: 8px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 850;
font-family: inherit;
white-space: nowrap;
}
.rxm-page-title { margin-bottom: 14px; }
.rxm-page-title p { margin-top: 7px; color: var(--tx2); font-size: 12px; line-height: 1.55; }
.rxm-list { display: flex; flex-direction: column; gap: 9px; }
.rxm-list-spaced { padding-bottom: 10px; }
.rxm-empty {
border: 1px dashed var(--bd);
background: #fafbfc;
border-radius: 18px;
padding: 18px 14px;
text-align: center;
color: var(--cz);
font-size: 12px;
line-height: 1.5;
}
.rxm-empty strong { display: block; color: var(--rx); font-size: 14px; margin-bottom: 3px; }
.rxm-pay-card {
display: grid;
grid-template-columns: 12px 1fr auto;
gap: 10px;
align-items: center;
padding: 12px;
border-radius: 18px;
background: #fff;
border: 1px solid var(--bd);
box-shadow: 0 6px 18px rgba(7,27,62,.045);
}
.rxm-pay-card.is-paid { background: #f3fbf7; border-color: var(--vdb); opacity: .88; }
.rxm-pay-dot { width: 10px; height: 42px; border-radius: 999px; background: var(--dot, var(--rx)); }
.rxm-pay-main { min-width: 0; }
.rxm-pay-main strong { display:block; color:var(--tx); font-size:13px; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rxm-pay-main span { display:block; color:var(--tx2); font-size:11px; margin-top:3px; line-height:1.35; }
.rxm-pay-main em { font-style:normal; color:var(--cz); font-size:10px; display:inline-block; margin-top:2px; }
.rxm-pay-btn {
border: none;
border-radius: 999px;
padding: 9px 11px;
min-width: 68px;
background: var(--rxc);
color: var(--rx);
font-size: 11px;
font-weight: 900;
font-family: inherit;
}
.rxm-pay-btn.is-paid { background: var(--vdc); color: var(--vd); }
.rxm-filter-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.rxm-filter-row button {
border: 1px solid var(--bd);
border-radius: 999px;
background: #fff;
color: var(--cz);
padding: 10px 8px;
font-size: 12px;
font-weight: 850;
font-family: inherit;
}
.rxm-filter-row button.ativo { background: var(--rx); border-color: var(--rx); color: #fff; }
.rxm-more-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.rxm-more-grid button {
display: grid;
grid-template-columns: 44px 1fr;
grid-template-rows: auto auto;
align-items: center;
column-gap: 12px;
text-align: left;
border: 1px solid var(--bd);
border-radius: 20px;
background: #fff;
padding: 13px;
font-family: inherit;
box-shadow: 0 8px 20px rgba(7,27,62,.045);
}
.rxm-more-grid button > span {
grid-row: 1 / span 2;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 16px;
background: var(--rxc);
color: var(--rx);
font-size: 19px;
}
.rxm-more-grid strong { color:var(--hbg); font-size:13px; font-weight:950; }
.rxm-more-grid small { color:var(--cz); font-size:11px; margin-top:2px; }
.rxm-more-danger { border-color: var(--vmb) !important; background: var(--vmc) !important; }
.rxm-more-danger > span { background: #fff !important; color: var(--vm) !important; }
.rxm-more-danger strong { color: var(--vm) !important; }
.rxm-bottom-nav {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(10px + env(safe-area-inset-bottom));
z-index: 920;
height: 68px;
display: grid;
grid-template-columns: 1fr 74px 1fr 1fr;
align-items: center;
gap: 8px;
padding: 9px;
border-radius: 26px;
background: rgba(255,255,255,.92);
border: 1px solid rgba(221,225,231,.85);
box-shadow: 0 18px 60px rgba(7,27,62,.24);
backdrop-filter: blur(14px);
}
.rxm-bottom-nav button {
min-width: 0;
height: 50px;
border: none;
border-radius: 18px;
background: transparent;
color: var(--cz);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
font-family: inherit;
font-size: 10px;
font-weight: 850;
}
.rxm-bottom-nav button span { font-size: 18px; line-height: 1; }
.rxm-bottom-nav button.ativo:not(.rxm-nav-plus) { background: var(--rxc); color: var(--rx); }
.rxm-bottom-nav .rxm-nav-plus {
height: 58px;
border-radius: 22px;
margin-top: -22px;
background: linear-gradient(135deg, var(--vd), #21a365);
color: #fff;
box-shadow: 0 16px 34px rgba(26,122,74,.33);
}
.rxm-bottom-nav .rxm-nav-plus span { font-size: 34px; font-weight: 600; }
.rxm-bottom-nav strong { font-size: 10px; line-height: 1; }
.rxm-sheet-overlay:not([hidden]) {
position: fixed;
inset: 0;
z-index: 1500;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 12px;
background: rgba(7,27,62,.58);
backdrop-filter: blur(5px);
}
.rxm-sheet {
width: min(100%, 520px);
max-height: calc(100dvh - 32px);
overflow-y: auto;
border-radius: 30px 30px 24px 24px;
background: #fff;
box-shadow: 0 -20px 80px rgba(0,0,0,.32);
padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
animation: rxmSheetUp .22s ease;
}
@keyframes rxmSheetUp { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.rxm-sheet-handle {
width: 46px;
height: 5px;
border-radius: 999px;
background: #d9dde5;
margin: 0 auto 12px;
}
.rxm-sheet-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.rxm-sheet-head h2 { color: var(--hbg); font-size: 22px; font-weight: 950; letter-spacing: -.6px; margin: 0; }
.rxm-sheet-head .rxm-close { background: var(--czc); border-color: var(--bd); color: var(--cz); }
.rxm-form { display: flex; flex-direction: column; gap: 12px; }
.rxm-form label span {
display: block;
color: var(--cz);
font-size: 10px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .55px;
margin-bottom: 5px;
}
.rxm-form input[type="text"] {
width: 100%;
min-height: 50px;
border: 1.5px solid var(--bd);
border-radius: 16px;
background: #fafbfc;
padding: 12px 14px;
font-size: 16px;
font-family: inherit;
outline: none;
}
.rxm-form input[type="text"]:focus { border-color: var(--rx); background: #fff; box-shadow: 0 0 0 4px rgba(10,42,94,.08); }
.rxm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.rxm-check-card,
.rxm-toggle-card {
min-height: 50px;
display: flex !important;
align-items: center;
gap: 10px;
border: 1.5px solid var(--bd);
border-radius: 16px;
background: #fafbfc;
padding: 12px;
}
.rxm-check-card input,
.rxm-toggle-card input { width: 20px; height: 20px; accent-color: var(--rx); flex-shrink: 0; }
.rxm-check-card span { margin: 0 !important; color: var(--tx) !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 850 !important; }
.rxm-toggle-card span { margin: 0 !important; }
.rxm-toggle-card strong { display:block; color:var(--tx); font-size:13px; font-weight:900; }
.rxm-toggle-card small { display:block; color:var(--cz); font-size:11px; margin-top:2px; }
.rxm-parcelas-box {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 12px;
border-radius: 18px;
background: var(--rxc);
border: 1px solid var(--rxb);
}
.rxm-parcelas-box[hidden] { display: none !important; }
.rxm-form-erro {
border-radius: 14px;
padding: 10px 12px;
background: var(--vmc);
color: var(--vm);
border: 1px solid var(--vmb);
font-size: 12px;
line-height: 1.4;
font-weight: 700;
}
.rxm-form-actions {
display: grid;
grid-template-columns: .82fr 1.18fr;
gap: 10px;
margin-top: 2px;
}
.rxm-btn-ghost,
.rxm-btn-save {
min-height: 50px;
border: none;
border-radius: 16px;
font-family: inherit;
font-size: 14px;
font-weight: 900;
}
.rxm-btn-ghost { background: var(--czc); color: var(--cz); }
.rxm-btn-save { background: var(--rx); color: #fff; box-shadow: 0 12px 28px rgba(10,42,94,.24); }
.rxm-toast {
position: fixed;
left: 16px;
right: 16px;
bottom: calc(92px + env(safe-area-inset-bottom));
z-index: 1600;
display: block;
transform: translateY(18px);
opacity: 0;
pointer-events: none;
border-radius: 18px;
padding: 13px 15px;
background: var(--hbg);
color: #fff;
font-size: 13px;
font-weight: 800;
text-align: center;
box-shadow: 0 20px 50px rgba(7,27,62,.32);
transition: opacity .2s ease, transform .2s ease;
}
.rxm-toast.show { opacity: 1; transform: translateY(0); }
.rxm-toast.success { background: var(--vd); }
}
/* =============================================================
V13 — DESKTOP PREMIUM ESTRUTURADO
Shell lateral chumbo/azul + conteúdo claro, preservando a lógica.
============================================================= */
/* Fase E: :root desta seção consolidado no :root base (00-base-core.css). */
.rx-sidebar { display: none; }
@media (min-width: 821px) {
body {
background: var(--rx-page-bg);
}
#app[style*="display: block"],
#app[style*="display:block"] {
display: block !important;
padding-left: 292px;
min-height: 100vh;
background:
radial-gradient(circle at 28% 0%, rgba(29, 78, 216, .08), transparent 34%),
linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}
#app > .rx-sidebar {
display: flex;
position: fixed;
inset: 0 auto 0 0;
width: 292px;
height: 100vh;
overflow-y: auto;
overscroll-behavior: contain;
flex-direction: column;
gap: 18px;
padding: 22px 18px;
background:
radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .32), transparent 30%),
linear-gradient(180deg, var(--rx-shell) 0%, #070b14 100%);
border-right: 1px solid rgba(255,255,255,.08);
box-shadow: 18px 0 60px rgba(15, 23, 42, .14);
z-index: 950;
}
.rx-side-brand {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 8px 16px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.rx-side-logo {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 15px;
color: #fff;
font-size: 14px;
font-weight: 950;
letter-spacing: -.04em;
background: linear-gradient(135deg, #1d4ed8, #0a2a5e);
box-shadow: 0 14px 30px rgba(29, 78, 216, .28);
border: 1px solid rgba(255,255,255,.16);
}
.rx-side-brand strong {
display: block;
color: #fff;
font-size: 15px;
font-weight: 850;
letter-spacing: -.2px;
}
.rx-side-brand small {
display: block;
color: rgba(226,232,240,.56);
font-size: 11px;
margin-top: 2px;
}
.rx-side-section-label {
padding: 0 8px;
color: rgba(226,232,240,.42);
font-size: 10px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .9px;
}
.rx-side-nav {
display: flex;
flex-direction: column;
gap: 6px;
min-height: 0;
flex: 1 1 auto;
}
.rx-side-nav-btn {
width: 100%;
min-height: 54px;
border: 1px solid transparent;
border-radius: 16px;
padding: 10px 11px;
background: transparent;
color: rgba(226,232,240,.66);
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
text-align: left;
cursor: pointer;
font-family: inherit;
transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.rx-side-nav-btn:hover {
transform: translateX(2px);
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.08);
color: #fff;
}
.rx-side-nav-btn.ativo {
background: linear-gradient(135deg, rgba(29,78,216,.95), rgba(10,42,94,.86));
color: #fff;
border-color: rgba(255,255,255,.14);
box-shadow: 0 14px 34px rgba(29,78,216,.24);
}
.rx-nav-ico {
width: 34px;
height: 34px;
border-radius: 12px;
display: grid;
place-items: center;
flex: 0 0 auto;
background: rgba(255,255,255,.08);
font-size: 15px;
}
.rx-side-nav-btn.ativo .rx-nav-ico {
background: rgba(255,255,255,.18);
}
.rx-nav-text {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.rx-nav-text strong {
font-size: 13px;
font-weight: 850;
line-height: 1.15;
}
.rx-nav-text small {
font-size: 10.5px;
color: rgba(226,232,240,.52);
line-height: 1.15;
}
.rx-side-nav-btn.ativo .rx-nav-text small { color: rgba(255,255,255,.72); }
.rx-side-note {
margin-top: 8px;
flex: 0 0 auto;
border-radius: 18px;
padding: 14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.08);
color: rgba(226,232,240,.72);
font-size: 11px;
line-height: 1.45;
}
.rx-side-note span {
display: block;
margin-bottom: 5px;
color: rgba(226,232,240,.45);
text-transform: uppercase;
letter-spacing: .65px;
font-size: 9.5px;
font-weight: 850;
}
.rx-side-note strong { color: #fff; font-weight: 800; }
#app > .header {
position: sticky;
top: 0;
z-index: 900;
min-height: 72px;
padding: 12px 24px;
background: rgba(255,255,255,.82);
color: var(--tx);
border-bottom: 1px solid rgba(226,232,240,.94);
backdrop-filter: blur(16px);
box-shadow: 0 10px 30px rgba(15,23,42,.04);
}
#app > .header .hbrand { color: var(--tx); }
#app > .header .hbrand h1 { color: var(--rx-shell); font-size: 14px; }
#app > .header .hbrand p { color: #64748b; }
#app > .header .hlogo {
background: linear-gradient(135deg, var(--rx), var(--rx-blue-premium));
box-shadow: 0 12px 28px rgba(10,42,94,.18);
}
#app > .header .hright { margin-left: auto; }
#app > .header .tabs { display: none; }
#app > .header .anosel,
#app > .header .navmes {
background: #f8fafc;
border-color: #e2e8f0;
color: var(--tx);
}
#app > .header .anosel label { color: #64748b; }
#app > .header .anosel select { color: var(--rx-shell); }
#app > .header .anosel select option { background: #fff; color: var(--tx); }
#app > .header .navmes span { color: var(--rx-shell); }
#app > .header .navmes button { color: #64748b; }
#app > .header .navmes button:hover { color: var(--rx); background: var(--rx-blue-soft); }
#app > .header .hbtn {
min-height: 40px;
border-color: #e2e8f0;
background: #fff;
color: #475569;
box-shadow: 0 6px 14px rgba(15,23,42,.035);
}
#app > .header .hbtn:hover { color: var(--rx); border-color: #bfdbfe; background: #f8fbff; }
#app > .header .hbtn.wpp { color: var(--vd); border-color: rgba(26,122,74,.24); }
#app > .header .hbtn-sair:hover { color: var(--vm); border-color: var(--vmb); }
#app > .page {
min-width: 0;
padding: 24px 24px 34px;
}
#app > .page:not(.ativo) { display: none !important; }
#app > .page.ativo { display: block !important; }
#app > .page .ctn,
#app > .page .ctn-wide {
max-width: 1480px;
width: 100%;
margin: 0 auto;
padding: 0;
}
.rx-page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin: 0 0 18px;
padding: 4px 2px 0;
}
.rx-page-kicker {
display: inline-flex;
margin-bottom: 5px;
color: var(--rx-blue-premium);
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .9px;
}
.rx-page-head h2 {
margin: 0;
color: #0f172a;
font-size: 25px;
line-height: 1.1;
font-weight: 950;
letter-spacing: -.65px;
}
.rx-page-head p {
margin: 7px 0 0;
max-width: 720px;
color: #64748b;
font-size: 13px;
line-height: 1.55;
}
.card {
border: 1px solid var(--rx-border-soft);
border-radius: 20px;
background: var(--rx-card-bg);
box-shadow: var(--rx-shadow-soft);
padding: 18px 20px;
margin-bottom: 16px;
}
.card:hover { box-shadow: var(--rx-shadow-premium); }
.ctitle {
font-size: 10.5px;
letter-spacing: .9px;
margin-bottom: 14px;
}
.stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-bottom: 16px;
}
.stat {
border: none;
border-radius: 20px;
min-height: 100px;
padding: 18px 18px;
box-shadow: var(--rx-shadow-soft);
position: relative;
overflow: hidden;
}
.stat::after { display: none; }
.slabel { font-size: 10.5px; margin-bottom: 9px; }
.sval { font-size: 20px; font-weight: 900; letter-spacing: -.4px; }
.rx-hero-row {
grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
gap: 16px;
}
.stats.rx-stats-met { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rx-foot-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 16px; }
/* Raio X: donut centralizado no topo + categorias em 2 colunas compactas */
.rx-raiox-card .chart-wrap { flex-direction: column; align-items: center; flex-wrap: nowrap; gap: 16px; }
.rx-raiox-card .chart-canvas-wrap { width: 200px; height: 200px; margin: 2px auto 0; }
.rx-raiox-card .chart-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; width: 100%; min-width: 0; }
.rx-raiox-card .chart-legend-item { padding: 8px 11px; }
.rx-raiox-card .chart-legend-name { font-size: 11.5px; }
.rx-raiox-card .chart-legend-val { font-size: 11.5px; }
.rx-raiox-card .chart-legend-pct { font-size: 10.5px; }
.rx-raiox-card .chart-legend-outras { grid-column: 1 / -1; }
.rx-raiox-card .chart-legend-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rx-quick-actions {
display: flex;
gap: 12px;
flex-wrap: nowrap;
margin: -2px 0 16px;
}
.rx-quick-actions > button,
.rx-quick-actions > .rx-reserve-mini-progress { flex: 1 1 0; }
.rx-quick-actions > .rx-reserve-mini-progress { flex: 1.5 1 0; }
.rx-quick-actions button,
.rx-more-actions button,
.rx-guidance-list button {
border: 1px solid var(--rx-border-soft);
background: #fff;
color: var(--rx-shell);
border-radius: 14px;
padding: 12px 14px;
font-family: inherit;
font-size: 12px;
font-weight: 850;
cursor: pointer;
transition: .15s ease;
box-shadow: var(--shadow-card);
}
.rx-quick-actions button:first-child {
background: linear-gradient(135deg, var(--rx), var(--rx-blue-premium));
color: #fff;
border-color: transparent;
box-shadow: 0 12px 28px rgba(29,78,216,.18);
}
.rx-quick-actions button:hover,
.rx-more-actions button:hover,
.rx-guidance-list button:hover { transform: translateY(-1px); border-color: #bfdbfe; box-shadow: var(--rx-shadow-soft); }
.rx-dashboard-grid,
.rx-insights-grid,
.rx-more-desktop-grid {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr);
gap: 16px;
align-items: start;
}
.rx-dashboard-main,
.rx-dashboard-side { min-width: 0; }
.rx-entry-grid,
.rx-two-col {
display: grid;
grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
gap: 16px;
align-items: start;
}
.rx-entry-grid {
/* Box "Como o SRX interpreta" removido → entradas em largura cheia. */
grid-template-columns: 1fr;
gap: 18px;
}
.rx-guidance-card {
background:
radial-gradient(circle at top right, rgba(29,78,216,.12), transparent 32%),
#fff;
}
.rx-guidance-list { display: grid; gap: 9px; }
.rx-guidance-list button {
display: block;
width: 100%;
text-align: left;
padding: 12px 13px;
}
.rx-guidance-list strong { display:block; font-size:13px; margin-bottom:2px; color:#0f172a; }
.rx-guidance-list span { display:block; color:#64748b; font-size:11px; line-height:1.35; }
.rx-entradas-card {
min-width: 0;
}
.rx-mini-help-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}
.rx-mini-help-card--compact {
max-width: 420px;
width: 100%;
justify-self: end;
padding: 18px;
}
.rx-mini-help-card--compact .tip {
margin-bottom: 10px;
font-size: 12px;
line-height: 1.55;
}
.rx-mini-help-card--compact .rx-mini-help-pills {
margin-top: 10px;
gap: 7px;
}
.rx-mini-help-card--compact .rx-mini-help-pills span {
padding: 6px 12px;
}
.rx-mini-help-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rx-mini-help-pills span,
.rx-premium-list span {
border-radius: 999px;
background: var(--rx-blue-soft);
color: var(--rx);
border: 1px solid #dbeafe;
font-size: 11px;
font-weight: 800;
padding: 6px 10px;
}
.rx-empty-guide,
.rx-premium-card {
background:
radial-gradient(circle at 100% 0%, rgba(10,42,94,.08), transparent 35%),
#fff;
}
.rx-premium-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rx-more-actions { display: grid; gap: 10px; }
.rx-more-actions button { width: 100%; min-height: 46px; text-align: left; }
.rx-more-actions button.danger { color: var(--vm); border-color: var(--vmb); background: var(--vmc); }
.g2, .g3 { gap: 16px; }
.field input,
.divrow .dlabel-inp,
.divrow .dval-inp,
.ninput,
.vinput,
.parc-inp,
.chat-inp {
border-radius: 12px;
}
.saidas-wrap,
.fluxo-wrap,
.parcelas-timeline-wrap,
.card > div[style*="overflow-x:auto"] {
border-radius: 16px;
}
.stbl thead th,
.resumo-table th,
.projecao-table th {
background: #0f172a;
}
.resumo-head {
align-items: center;
}
.rx-mobile-shell,
.rxm-full-return { display: none !important; }
}
@media (min-width: 821px) and (max-height: 760px) {
.rx-side-note { display: none !important; }
#app > .rx-sidebar { gap: 12px; padding-top: 16px; padding-bottom: 16px; }
.rx-side-brand { padding-bottom: 12px; }
.rx-side-nav-btn { min-height: 48px; }
}
@media (max-width: 1180px) and (min-width: 821px) {
#app[style*="display: block"],
#app[style*="display:block"] { padding-left: 246px; }
#app > .rx-sidebar { width: 246px; }
.rx-side-nav-btn { min-height: 50px; padding: 9px 10px; }
.rx-nav-text small { display: none; }
.rx-dashboard-grid,
.rx-insights-grid,
.rx-more-desktop-grid,
.rx-entry-grid,
.rx-two-col { grid-template-columns: 1fr; }
.stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 820px) {
#app[style*="display: block"],
#app[style*="display:block"] { padding-left: 0; }
#app > .rx-sidebar { display: none !important; }
}
/* =============================================================
V13.1 — Correções de integração visual/funcional
Agenda conectada aos vencimentos e tabela de lançamentos no novo módulo.
============================================================= */
.venc-empty {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
border: 1px dashed rgba(200,127,10,.35);
border-radius: 14px;
background: rgba(254,249,236,.72);
color: var(--tx2);
}
.venc-empty strong { color: var(--am); font-size: 13px; }
.venc-empty span { font-size: 12px; line-height: 1.45; }
.venc-item {
grid-template-columns: 12px minmax(0, 1fr) auto;
border-radius: 14px;
padding: 11px 12px;
box-shadow: 0 10px 24px rgba(15,23,42,.04);
}
.venc-dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--cz);
align-self: center;
box-shadow: 0 0 0 4px rgba(95,99,104,.08);
}
.venc-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.venc-main strong {
font-size: 13px;
color: var(--tx);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.venc-main span {
font-size: 11.5px;
color: var(--tx2);
}
.venc-value {
text-align: right;
display: flex;
flex-direction: column;
gap: 2px;
white-space: nowrap;
}
.venc-value strong {
font-size: 12.5px;
color: var(--tx);
font-variant-numeric: tabular-nums;
}
.venc-value span {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--cz);
}
.venc-item.vencido { border-color: var(--vmb); background: linear-gradient(180deg,#fff 0%,var(--vmc) 100%); }
.venc-item.vencido .venc-dot { background: var(--vm); box-shadow: 0 0 0 4px rgba(192,57,43,.1); }
.venc-item.hoje { border-color: var(--amb); background: linear-gradient(180deg,#fff 0%,var(--amc) 100%); }
.venc-item.hoje .venc-dot { background: var(--am); box-shadow: 0 0 0 4px rgba(200,127,10,.12); }
.venc-item.proximo { border-color: var(--rxb); background: linear-gradient(180deg,#fff 0%,var(--rxc) 100%); }
.venc-item.proximo .venc-dot { background: var(--rx); box-shadow: 0 0 0 4px rgba(10,42,94,.1); }
.venc-item.pago { opacity: .72; }
.venc-item.pago .venc-dot { background: var(--vd); box-shadow: 0 0 0 4px rgba(26,122,74,.1); }
.venc-item.pago .venc-value span { color: var(--vd); }
@media (max-width: 720px) {
#tab-lancamentos .ninput,
#tab-lancamentos .vinput,
#tab-lancamentos .parc-inp,
#tab-lancamentos .venc-inp {
min-height: 44px;
height: 44px;
font-size: 16px;
}
.venc-item { grid-template-columns: 10px minmax(0, 1fr); }
.venc-value { grid-column: 2; text-align: left; flex-direction: row; align-items: center; }
}
/* =============================================================
V13.2 — Agenda Calendário Premium
Visualização mensal conectada às Saídas do Mês.
============================================================= */
.rx-soft-action,
.rx-primary-action {
border: 0;
border-radius: 999px;
font-family: inherit;
font-weight: 850;
cursor: pointer;
transition: .16s ease;
white-space: nowrap;
}
.rx-soft-action {
background: rgba(10,42,94,.08);
color: var(--rx);
padding: 10px 14px;
border: 1px solid rgba(10,42,94,.12);
}
.rx-soft-action:hover { background: rgba(10,42,94,.13); transform: translateY(-1px); }
.rx-primary-action {
background: linear-gradient(135deg, var(--rx), var(--rxm));
color: #fff;
padding: 11px 16px;
box-shadow: 0 12px 24px rgba(10,42,94,.18);
}
.rx-primary-action:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(10,42,94,.24); }
.rx-agenda-page-head {
align-items: flex-end;
}
.rx-agenda-card {
border-color: rgba(200,127,10,.26);
background:
radial-gradient(circle at 12% 0%, rgba(10,42,94,.055), transparent 34%),
radial-gradient(circle at 90% 0%, rgba(200,127,10,.10), transparent 26%),
linear-gradient(180deg, #fff 0%, #fffaf1 100%);
}
.rx-agenda-topline {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
margin-bottom: 14px;
}
.rx-agenda-topline .ctitle { margin-bottom: 4px; }
.rx-agenda-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 12px 0 16px;
}
.rx-agenda-stat {
border: 1px solid rgba(15,23,42,.08);
border-radius: 18px;
padding: 13px 14px;
background: rgba(255,255,255,.78);
box-shadow: 0 14px 32px rgba(15,23,42,.05);
position: relative;
overflow: hidden;
}
.rx-agenda-stat::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--cz);
}
.rx-agenda-stat span {
display: block;
color: var(--tx2);
font-size: 10.5px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 4px;
}
.rx-agenda-stat strong {
display: block;
color: var(--tx);
font-size: clamp(14px, 1.35vw, 18px);
font-weight: 900;
font-variant-numeric: tabular-nums;
}
.rx-agenda-stat.danger::before { background: var(--vm); }
.rx-agenda-stat.today::before { background: var(--am); }
.rx-agenda-stat.next::before { background: var(--rx); }
.rx-agenda-stat.ok::before { background: var(--vd); }
.rx-agenda-layout {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
gap: 16px;
align-items: start;
}
.rx-calendar-panel,
.rx-agenda-day-panel,
.rx-agenda-list-block {
border: 1px solid rgba(15,23,42,.08);
border-radius: 22px;
background: rgba(255,255,255,.86);
box-shadow: 0 18px 44px rgba(15,23,42,.055);
}
.rx-calendar-panel { padding: 16px; }
.rx-agenda-day-panel { padding: 15px; position: sticky; top: 86px; }
.rx-calendar-title,
.rx-agenda-day-head,
.rx-section-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.rx-calendar-title strong,
.rx-agenda-day-head strong,
.rx-section-line strong {
color: var(--hbg);
font-size: 14px;
font-weight: 950;
}
.rx-calendar-title span,
.rx-agenda-day-head span,
.rx-section-line span {
color: var(--tx2);
font-size: 11.5px;
line-height: 1.35;
}
.rx-calendar-title > div,
.rx-agenda-day-head > div {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.rx-calendar-pill {
border: 1px solid rgba(10,42,94,.12);
background: rgba(10,42,94,.075);
color: var(--rx) !important;
border-radius: 999px;
padding: 6px 10px;
font-weight: 900;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.rx-calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 6px;
margin-bottom: 6px;
}
.rx-calendar-weekdays span {
text-align: center;
color: var(--cz);
font-size: 10px;
font-weight: 950;
text-transform: uppercase;
letter-spacing: .08em;
}
.rx-agenda-calendar {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 7px;
}
.rx-cal-day {
min-height: 88px;
border: 1px solid rgba(15,23,42,.08);
border-radius: 18px;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
color: var(--tx);
padding: 10px 8px;
font-family: inherit;
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
cursor: pointer;
transition: .16s ease;
position: relative;
overflow: hidden;
}
.rx-cal-day::after {
content: '';
position: absolute;
left: 9px;
right: 9px;
bottom: 7px;
height: 3px;
border-radius: 999px;
background: transparent;
}
.rx-cal-day.vazio {
min-height: 88px;
border: 0;
background: transparent;
box-shadow: none;
pointer-events: none;
}
.rx-cal-day:hover {
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(15,23,42,.10);
border-color: rgba(10,42,94,.18);
}
.rx-cal-day.is-selected {
border-color: rgba(10,42,94,.50);
box-shadow: 0 0 0 3px rgba(10,42,94,.09), 0 18px 34px rgba(10,42,94,.12);
}
.rx-cal-day.dia-hoje .rx-cal-num {
background: var(--rx);
color: #fff;
}
.rx-cal-day.tem-venc { background: #fff; }
.rx-cal-day.sem-venc { opacity: .64; }
.rx-cal-num {
width: 28px;
height: 28px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--hbg);
font-size: 12px;
font-weight: 950;
line-height: 1;
}
.rx-cal-meta {
display: block;
max-width: 100%;
color: var(--rx);
font-size: 11px;
font-weight: 950;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
}
.rx-cal-count {
color: var(--tx2);
font-size: 9.5px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .04em;
}
.rx-cal-day.venc-vencido {
background: linear-gradient(180deg, #fff 0%, var(--vmc) 100%);
border-color: rgba(192,57,43,.26);
}
.rx-cal-day.venc-vencido::after { background: var(--vm); }
.rx-cal-day.venc-vencido .rx-cal-meta { color: var(--vm); }
.rx-cal-day.venc-hoje {
background: linear-gradient(180deg, #fff 0%, var(--amc) 100%);
border-color: rgba(200,127,10,.32);
}
.rx-cal-day.venc-hoje::after { background: var(--am); }
.rx-cal-day.venc-hoje .rx-cal-meta { color: var(--am); }
.rx-cal-day.venc-proximo {
background: linear-gradient(180deg, #fff 0%, var(--rxc) 100%);
border-color: rgba(10,42,94,.22);
}
.rx-cal-day.venc-proximo::after,
.rx-cal-day.venc-pendente::after { background: var(--rx); }
.rx-cal-day.venc-pago {
background: linear-gradient(180deg, #fff 0%, var(--vdc) 100%);
border-color: rgba(26,122,74,.24);
}
.rx-cal-day.venc-pago::after { background: var(--vd); }
.rx-cal-day.venc-pago .rx-cal-meta { color: var(--vd); }
.rx-agenda-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
color: var(--tx2);
font-size: 11px;
margin-top: 12px;
}
.rx-agenda-legend span { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; }
.rx-agenda-legend .lg { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.rx-agenda-legend .vencido { background: var(--vm); }
.rx-agenda-legend .hoje { background: var(--am); }
.rx-agenda-legend .proximo { background: var(--rx); }
.rx-agenda-legend .pago { background: var(--vd); }
.rx-agenda-day-head {
align-items: flex-start;
padding-bottom: 12px;
border-bottom: 1px solid rgba(15,23,42,.08);
}
.rx-agenda-day-head b {
color: var(--rx);
font-size: 14px;
font-weight: 950;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.rx-agenda-day-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.rx-agenda-detail {
border: 1px solid rgba(15,23,42,.08);
border-radius: 18px;
padding: 12px;
background: #fff;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
box-shadow: 0 12px 28px rgba(15,23,42,.045);
}
.rx-agenda-detail-main {
min-width: 0;
display: flex;
gap: 10px;
align-items: flex-start;
}
.rx-agenda-status-dot {
width: 10px;
height: 10px;
margin-top: 5px;
border-radius: 999px;
background: var(--cz);
box-shadow: 0 0 0 4px rgba(95,99,104,.08);
flex-shrink: 0;
}
.rx-agenda-detail-main strong {
display: block;
max-width: 210px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--tx);
font-size: 13px;
font-weight: 900;
}
.rx-agenda-detail-main small {
display: block;
color: var(--tx2);
font-size: 11px;
line-height: 1.35;
margin-top: 2px;
}
.rx-agenda-detail-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.rx-agenda-detail-side b {
color: var(--hbg);
font-size: 13px;
font-weight: 950;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.rx-agenda-pay,
.rx-agenda-link {
border: 0;
border-radius: 999px;
font-family: inherit;
cursor: pointer;
font-weight: 900;
transition: .14s ease;
}
.rx-agenda-pay {
min-width: 72px;
padding: 7px 10px;
background: var(--rx);
color: #fff;
}
.rx-agenda-pay.is-paid {
background: var(--vdc);
color: var(--vd);
}
.rx-agenda-link {
background: transparent;
color: var(--rx);
padding: 2px 6px;
font-size: 11px;
}
.rx-agenda-pay:hover,
.rx-agenda-link:hover { transform: translateY(-1px); }
.rx-agenda-detail.vencido { border-color: rgba(192,57,43,.22); background: linear-gradient(180deg, #fff 0%, var(--vmc) 100%); }
.rx-agenda-detail.vencido .rx-agenda-status-dot { background: var(--vm); box-shadow: 0 0 0 4px rgba(192,57,43,.10); }
.rx-agenda-detail.hoje { border-color: rgba(200,127,10,.28); background: linear-gradient(180deg, #fff 0%, var(--amc) 100%); }
.rx-agenda-detail.hoje .rx-agenda-status-dot { background: var(--am); box-shadow: 0 0 0 4px rgba(200,127,10,.12); }
.rx-agenda-detail.proximo,
.rx-agenda-detail.futuro { border-color: rgba(10,42,94,.14); }
.rx-agenda-detail.proximo .rx-agenda-status-dot,
.rx-agenda-detail.futuro .rx-agenda-status-dot { background: var(--rx); box-shadow: 0 0 0 4px rgba(10,42,94,.10); }
.rx-agenda-detail.pago { opacity: .78; }
.rx-agenda-detail.pago .rx-agenda-status-dot { background: var(--vd); box-shadow: 0 0 0 4px rgba(26,122,74,.10); }
.rx-agenda-list-block {
padding: 14px;
margin-top: 16px;
}
.rx-section-line { margin-bottom: 10px; }
@media (max-width: 1120px) {
.rx-agenda-layout { grid-template-columns: 1fr; }
.rx-agenda-day-panel { position: static; }
.rx-cal-day { min-height: 76px; }
}
@media (max-width: 720px) {
.rx-agenda-page-head,
.rx-agenda-topline,
.rx-calendar-title,
.rx-agenda-day-head,
.rx-section-line { align-items: flex-start; flex-direction: column; }
.rx-soft-action,
.rx-primary-action { width: 100%; min-height: 44px; }
.rx-agenda-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rx-calendar-panel,
.rx-agenda-day-panel,
.rx-agenda-list-block { border-radius: 18px; padding: 12px; }
.rx-agenda-calendar,
.rx-calendar-weekdays { gap: 4px; }
.rx-cal-day { min-height: 58px; border-radius: 12px; padding: 7px 5px; }
.rx-cal-num { width: 24px; height: 24px; border-radius: 8px; font-size: 11px; }
.rx-cal-meta { font-size: 9px; }
.rx-cal-count { display: none; }
.rx-agenda-detail { grid-template-columns: 1fr; }
.rx-agenda-detail-side { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
.rx-agenda-detail-main strong { max-width: 100%; }
}
/* =============================================================
V13.3 — MOBILE CLEAN PRO
Otimização mobile para preenchimento guiado sem alterar o motor.
============================================================= */
@media (max-width: 820px) {
#rxMobileShell {
background:
radial-gradient(circle at 18% -12%, rgba(45,111,219,.32), transparent 34%),
radial-gradient(circle at 90% 4%, rgba(22,163,107,.20), transparent 30%),
linear-gradient(180deg, #08111f 0%, #0a2a5e 33%, #f3f6fb 33.1%, #f3f6fb 100%);
}
.rxm-complete-card {
margin: 0 0 14px;
padding: 14px;
border-radius: 22px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(221,225,231,.9);
box-shadow: 0 12px 34px rgba(7,27,62,.08);
}
.rxm-complete-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 11px;
}
.rxm-complete-head strong {
display: block;
color: var(--hbg);
font-size: 15px;
font-weight: 950;
letter-spacing: -.2px;
}
.rxm-complete-head > span {
min-width: 44px;
text-align: center;
border-radius: 999px;
padding: 6px 9px;
background: var(--rxc);
color: var(--rx);
font-size: 11px;
font-weight: 950;
box-shadow: inset 0 0 0 1px var(--rxb);
}
.rxm-complete-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.rxm-complete-grid button {
min-width: 0;
min-height: 72px;
border: 1px solid var(--bd);
border-radius: 18px;
background: #fff;
text-align: left;
padding: 10px;
font-family: inherit;
position: relative;
overflow: hidden;
}
.rxm-complete-grid button span {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 9px;
background: var(--czc);
color: var(--cz);
font-size: 10px;
font-weight: 950;
margin-bottom: 7px;
}
.rxm-complete-grid button strong {
display: block;
color: var(--hbg);
font-size: 12px;
font-weight: 950;
}
.rxm-complete-grid button small {
display: block;
color: var(--cz);
font-size: 10px;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rxm-complete-grid button.done {
background: #f1fbf6;
border-color: var(--vdb);
}
.rxm-complete-grid button.done span {
background: var(--vd);
color: #fff;
}
.rxm-complete-grid button.done::after {
content: '✓';
position: absolute;
right: 10px;
top: 9px;
color: var(--vd);
font-size: 12px;
font-weight: 950;
}
.rxm-smart-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: -3px 0 14px;
}
.rxm-smart-strip button {
min-width: 0;
border: 1px solid rgba(221,225,231,.9);
border-radius: 18px;
background: rgba(255,255,255,.96);
padding: 11px 8px;
text-align: center;
font-family: inherit;
box-shadow: 0 8px 22px rgba(7,27,62,.055);
}
.rxm-smart-strip span {
display: block;
color: var(--cz);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: .45px;
font-weight: 900;
margin-bottom: 4px;
}
.rxm-smart-strip strong {
display: block;
color: var(--hbg);
font-size: 12px;
font-weight: 950;
font-variant-numeric: tabular-nums;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rxm-launch-title {
background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,247,255,.96));
}
.rxm-launch-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 14px;
}
.rxm-launch-card {
display: grid;
grid-template-columns: 48px 1fr auto;
grid-template-rows: auto auto;
column-gap: 12px;
align-items: center;
min-height: 82px;
border: 1px solid var(--bd);
border-radius: 24px;
background: #fff;
padding: 14px;
text-align: left;
font-family: inherit;
box-shadow: 0 10px 28px rgba(7,27,62,.06);
}
.rxm-launch-card > span {
grid-row: 1 / span 2;
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 18px;
background: var(--rxc);
color: var(--rx);
font-size: 20px;
}
.rxm-launch-card strong {
color: var(--hbg);
font-size: 14px;
font-weight: 950;
line-height: 1.1;
}
.rxm-launch-card small {
color: var(--cz);
font-size: 11px;
margin-top: 3px;
}
.rxm-launch-card b {
grid-row: 1 / span 2;
color: var(--rx);
font-size: 12px;
font-weight: 950;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.rxm-launch-card.receita > span { background: var(--vdc); color: var(--vd); }
.rxm-launch-card.despesa > span { background: var(--vmc); color: var(--vm); }
.rxm-launch-card.reserva > span { background: var(--rxc); color: var(--rx); }
.rxm-launch-card.divida > span { background: #fff7ef; color: var(--am); }
.rxm-habit-card p {
color: var(--tx2);
font-size: 12px;
line-height: 1.55;
}
.rxm-bottom-nav {
grid-template-columns: 1fr 78px 1fr 1fr;
}
.rxm-bottom-nav .rxm-nav-plus {
gap: 0;
padding-top: 4px;
}
.rxm-bottom-nav .rxm-nav-plus span {
font-size: 28px;
line-height: .9;
}
.rxm-bottom-nav .rxm-nav-plus strong {
color: #fff;
font-size: 9.5px;
margin-top: 1px;
}
.rxm-entry-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
padding: 5px;
border-radius: 18px;
background: var(--czc);
margin-bottom: 12px;
}
.rxm-entry-tabs button {
min-height: 40px;
border: none;
border-radius: 14px;
background: transparent;
color: var(--cz);
font-family: inherit;
font-size: 11px;
font-weight: 900;
}
.rxm-entry-tabs button.ativo {
background: #fff;
color: var(--rx);
box-shadow: 0 5px 18px rgba(7,27,62,.08);
}
.rxm-form-section { display: none; }
.rxm-form-section.ativo {
display: flex;
flex-direction: column;
gap: 12px;
animation: rxmIn .18s ease;
}
.rxm-form-info {
border-radius: 18px;
padding: 12px;
background: linear-gradient(135deg, var(--rxc), #fff);
border: 1px solid var(--rxb);
}
.rxm-form-info strong {
display: block;
color: var(--rx);
font-size: 13px;
font-weight: 950;
margin-bottom: 3px;
}
.rxm-form-info span {
display: block !important;
color: var(--tx2) !important;
font-size: 11px !important;
line-height: 1.45;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 0 !important;
}
.rxm-quick-chips {
display: flex;
gap: 7px;
overflow-x: auto;
padding-bottom: 2px;
-webkit-overflow-scrolling: touch;
}
.rxm-quick-chips::-webkit-scrollbar { display: none; }
.rxm-quick-chips button {
flex: 0 0 auto;
border: 1px solid var(--bd);
border-radius: 999px;
background: #fff;
color: var(--rx);
padding: 9px 11px;
font-family: inherit;
font-size: 11px;
font-weight: 900;
}
.rxm-sheet {
border-radius: 32px 32px 24px 24px;
padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
}
}
/* =============================================================
V14 — Importador de fatura PDF dentro dos cartões
PDF lido localmente, sem armazenar arquivo.
============================================================= */
body.rx-modal-open { overflow: hidden; }
.rx-import-pdf-btn {
background: linear-gradient(135deg, var(--rx), #1d4ed8) !important;
color: #fff !important;
border-color: rgba(255,255,255,.12) !important;
box-shadow: 0 6px 16px rgba(10,42,94,.18);
}
.rx-detail-pdf-btn {
background: #eef6ff !important;
color: var(--rx) !important;
border-color: rgba(37,99,235,.18) !important;
}
.cartao-fatura-resumo td {
padding: 0 7px 8px 38px !important;
background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.92));
}
.rx-card-invoice-summary {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border: 1px solid rgba(10,42,94,.10);
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.rx-card-invoice-summary strong {
display: block;
color: #0f172a;
font-size: 12px;
font-weight: 900;
}
.rx-card-invoice-summary span {
display: block;
margin-top: 2px;
color: #64748b;
font-size: 11px;
line-height: 1.35;
}
.rx-card-invoice-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
flex-shrink: 0;
}
.rx-fat-mini-btn {
border: 1px solid rgba(10,42,94,.14);
background: var(--rx);
color: #fff;
border-radius: 999px;
padding: 7px 11px;
font-size: 11px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
}
.rx-fat-mini-btn.ghost {
background: #fff;
color: var(--rx);
}
.rx-fatura-overlay {
position: fixed;
inset: 0;
z-index: 9800;
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
background: rgba(2, 6, 23, .72);
backdrop-filter: blur(8px);
}
.rx-fatura-overlay[hidden] { display: none !important; }
.rx-fatura-modal {
width: min(1040px, 100%);
max-height: min(88vh, 820px);
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 24px;
background: #f8fafc;
border: 1px solid rgba(255,255,255,.20);
box-shadow: 0 32px 90px rgba(0,0,0,.38);
}
.rx-fatura-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 22px 24px;
background: linear-gradient(135deg, #0b1220 0%, #0a2a5e 62%, #1e3a8a 100%);
color: #fff;
}
.rx-fatura-kicker {
display: inline-block;
margin-bottom: 5px;
color: rgba(255,255,255,.68);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .12em;
font-weight: 900;
}
.rx-fatura-head h2 {
margin: 0;
font-size: 22px;
line-height: 1.15;
font-weight: 900;
color: #fff;
}
.rx-fatura-head p {
margin: 6px 0 0;
color: rgba(255,255,255,.72);
font-size: 13px;
line-height: 1.45;
}
.rx-fatura-close {
width: 38px;
height: 38px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.10);
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: 900;
}
.rx-fatura-body {
padding: 18px 20px;
overflow: auto;
}
.rx-fatura-upload {
display: grid;
place-items: center;
text-align: center;
gap: 8px;
padding: 24px;
border: 1.5px dashed rgba(10,42,94,.22);
border-radius: 18px;
background: linear-gradient(180deg, #fff, #f8fbff);
}
.rx-fatura-upload input {
width: min(420px, 100%);
border: 1px solid var(--bd);
border-radius: 12px;
padding: 12px;
background: #fff;
font-size: 13px;
}
.rx-fatura-upload strong { color: #0f172a; font-size: 15px; }
.rx-fatura-upload span { color: #64748b; font-size: 12px; }
.rx-fatura-status {
display: none;
margin: 12px 0;
padding: 10px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
border: 1px solid transparent;
}
.rx-fatura-status.loading { display:block; color:#0a2a5e; background:#e8eef8; border-color:#b8cce8; }
.rx-fatura-status.ok { display:block; color:#166534; background:#dcfce7; border-color:#bbf7d0; }
.rx-fatura-status.erro { display:block; color:#991b1b; background:#fee2e2; border-color:#fecaca; }
.rx-fat-summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 12px 0;
}
.rx-fat-summary-grid > div,
.rx-fat-cat-grid > div {
background: #fff;
border: 1px solid rgba(15,23,42,.08);
border-radius: 14px;
padding: 12px;
box-shadow: 0 6px 18px rgba(15,23,42,.04);
}
.rx-fat-summary-grid span,
.rx-fat-cat-grid span {
display: block;
color: #64748b;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 3px;
}
.rx-fat-summary-grid strong,
.rx-fat-cat-grid strong {
color: #0f172a;
font-size: 14px;
font-weight: 900;
}
.rx-fat-conferencia {
margin: 8px 0 12px;
padding: 10px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 800;
}
.rx-fat-conferencia.ok { background:#ecfdf5; color:#166534; border:1px solid #bbf7d0; }
.rx-fat-conferencia.alerta { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
.rx-fat-table-wrap {
overflow: auto;
border: 1px solid rgba(15,23,42,.08);
border-radius: 16px;
background: #fff;
max-height: 390px;
}
.rx-fat-table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
font-size: 12px;
}
.rx-fat-table th {
position: sticky;
top: 0;
z-index: 1;
padding: 10px;
background: #f1f5f9;
color: #334155;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
text-align: left;
}
.rx-fat-table td {
padding: 9px 10px;
border-top: 1px solid #edf2f7;
color: #334155;
vertical-align: middle;
}
.rx-fat-table .money-cell { text-align: right; font-weight: 900; color: #0f172a; white-space: nowrap; }
.rx-fat-table th:nth-child(4),
.rx-fat-table td:nth-child(4) {
min-width: 142px;
width: 142px;
text-align: center;
}
.rx-fat-cat {
display: inline-block;
border-radius: 999px;
background: #eef2ff;
color: #3730a3;
padding: 3px 8px;
font-size: 10px;
font-weight: 800;
white-space: nowrap;
}
.rx-fat-cat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 12px 0;
}
.rx-fatura-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 20px;
background: #fff;
border-top: 1px solid rgba(15,23,42,.08);
}
.rx-fat-btn {
min-height: 42px;
border-radius: 13px;
padding: 0 16px;
border: 1px solid rgba(15,23,42,.10);
font-family: inherit;
font-weight: 900;
cursor: pointer;
}
.rx-fat-btn.primary { background: var(--rx); color:#fff; border-color: var(--rx); }
.rx-fat-btn.ghost { background:#fff; color:#334155; }
.rx-fat-btn.danger { background:#fee2e2; color:#991b1b; border-color:#fecaca; margin-right:auto; }
.rx-fat-btn:disabled { opacity:.55; cursor:not-allowed; }
@media (max-width: 760px) {
.rx-fatura-overlay { padding: 0; align-items: flex-end; }
.rx-fatura-modal { width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; }
.rx-fat-summary-grid, .rx-fat-cat-grid { grid-template-columns: 1fr 1fr; }
.rx-card-invoice-summary { align-items: flex-start; flex-direction: column; }
.rx-card-invoice-actions { justify-content: flex-start; }
.rx-fatura-actions { flex-wrap: wrap; }
.rx-fat-btn { flex: 1 1 auto; }
}
/* ── V14.1: importação PDF revisável, cartões recolhíveis e ações de linha ── */
.rx-fat-alerta-revisao {
margin: 10px 0 12px;
padding: 10px 12px;
border: 1px solid var(--amb);
background: var(--amc);
color: #8a5a00;
border-radius: 10px;
font-size: 12px;
line-height: 1.55;
}
.rx-fat-table-editavel .rx-fat-desc-inp,
.rx-fat-table-editavel .rx-fat-cat-select,
.rx-fat-table-editavel .rx-fat-cat-btn,
.rx-fat-table-editavel .rx-fat-detail-desc,
.rx-fat-table-editavel .rx-fat-detail-cat {
width: 100%;
min-width: 150px;
border: 1px solid var(--bd);
border-radius: 8px;
padding: 7px 9px;
font: inherit;
font-size: 12px;
background: #fff;
}
.rx-fat-table-editavel .rx-fat-valor-inp {
width: 110px;
border: 1px solid var(--bd);
border-radius: 8px;
padding: 7px 9px;
font: inherit;
font-size: 12px;
font-weight: 800;
text-align: right;
background: #fff;
}
.rx-fat-table-editavel .rx-fat-valor-inp:focus { outline: none; border-color: var(--rx); }
.rx-fat-add-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.rx-fat-add-wrap small { color: var(--cz); font-size: 11px; }
.rx-fat-add-item {
padding: 9px 16px; border: 1px dashed var(--rxb); border-radius: var(--radius-md);
background: var(--rxc); color: var(--rx); font-family: inherit; font-size: 13px;
font-weight: 800; cursor: pointer; transition: var(--transition);
}
.rx-fat-add-item:hover { background: var(--rx); color: #fff; border-style: solid; border-color: var(--rx); }
.rx-fat-table-editavel .rx-fat-cat-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
text-align: left;
cursor: pointer;
color: var(--tx);
}
.rx-fat-table-editavel .rx-fat-cat-btn .rx-fat-cat-val {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rx-fat-table-editavel .rx-fat-cat-btn .rx-fat-cat-caret {
flex: 0 0 auto;
font-size: 10px;
color: var(--cz);
}
.rx-fat-table-editavel .rx-fat-desc-inp:focus,
.rx-fat-table-editavel .rx-fat-cat-select:focus,
.rx-fat-table-editavel .rx-fat-cat-btn:focus,
.rx-fat-table-editavel .rx-fat-cat-btn[aria-expanded="true"],
.rx-fat-table-editavel .rx-fat-detail-desc:focus,
.rx-fat-table-editavel .rx-fat-detail-cat:focus {
outline: none;
border-color: var(--rx);
box-shadow: 0 0 0 3px rgba(10,42,94,.08);
}
/* Popover do picker de categoria buscável (fixo no body — sem clipping da tabela) */
.rx-cat-pop {
z-index: 99999;
background: #fff;
border: 1px solid var(--bd);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(10,42,94,.18);
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
max-height: 264px;
}
.rx-cat-pop .rx-cat-search {
border: 1px solid var(--bd);
border-radius: 8px;
padding: 8px 10px;
font: inherit;
font-size: 13px;
outline: none;
}
.rx-cat-pop .rx-cat-search:focus {
border-color: var(--rx);
box-shadow: 0 0 0 3px rgba(10,42,94,.08);
}
.rx-cat-pop .rx-cat-list {
list-style: none;
margin: 0;
padding: 0;
overflow-y: auto;
}
.rx-cat-pop .rx-cat-opt {
padding: 8px 10px;
border-radius: 7px;
font-size: 13px;
color: var(--tx);
cursor: pointer;
}
.rx-cat-pop .rx-cat-opt:hover {
background: rgba(10,42,94,.06);
}
.rx-cat-pop .rx-cat-opt-ativo {
background: var(--rx);
color: #fff;
font-weight: 600;
}
.rx-cat-pop .rx-cat-opt-ativo:hover {
background: var(--rx);
}
.rx-cat-pop .rx-cat-empty {
padding: 10px;
font-size: 12px;
color: var(--cz);
text-align: center;
}
.rx-toggle-sub-btn {
border-color: var(--rxb) !important;
color: var(--rx) !important;
background: #f8fbff !important;
}
.saida-acoes-cell { min-width: 84px; }
.saida-actions-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
white-space: nowrap;
}
.rx-move-btn:disabled {
opacity: .25;
cursor: not-allowed;
}
@media (max-width: 760px) {
.rx-fat-table-editavel .rx-fat-desc-inp,
.rx-fat-table-editavel .rx-fat-cat-select,
.rx-fat-table-editavel .rx-fat-cat-btn { min-width: 130px; }
.saida-acoes-cell { min-width: 74px; }
}
/* =============================================================
V14.2 — Saídas por grupos, ícones e drag-and-drop
============================================================= */
.saida-grupo-row td {
padding: 10px 0 6px !important;
border-bottom: none !important;
background: transparent !important;
}
.saida-grupo-head {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.saida-grupo-toggle {
flex: 1 1 auto;
min-width: 0;
width: 100%;
border: 1px solid rgba(15, 23, 42, .08);
background: linear-gradient(135deg, #f8fafc, #eef2f7);
border-radius: 12px;
padding: 9px 12px;
display: flex;
align-items: center;
gap: 9px;
font-family: inherit;
cursor: pointer;
color: #0f172a;
box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.saida-grupo-toggle:hover {
border-color: rgba(10, 42, 94, .22);
background: linear-gradient(135deg, #f8fbff, #e8eef8);
}
.saida-grupo-toggle .sg-caret { color: var(--rx); font-size: 13px; width: 14px; }
.saida-grupo-toggle .sg-ico { font-size: 16px; width: 22px; text-align: center; }
.saida-grupo-toggle strong { font-size: 12px; letter-spacing: .2px; }
.saida-grupo-toggle em {
font-style: normal;
font-size: 10.5px;
color: #64748b;
margin-left: 2px;
}
.saida-grupo-toggle span:last-child {
margin-left: auto;
font-size: 12px;
font-weight: 800;
color: var(--rx);
font-variant-numeric: tabular-nums;
}
.saida-grupo-add {
flex: 0 0 auto;
border: 1px dashed rgba(10, 42, 94, .28);
background: #fff;
color: var(--rx);
border-radius: 999px;
min-height: 34px;
padding: 0 12px;
font-family: inherit;
font-size: 11px;
font-weight: 850;
cursor: pointer;
white-space: nowrap;
transition: .14s ease;
}
.saida-grupo-add:hover {
background: var(--rxc);
border-color: var(--rx);
transform: translateY(-1px);
}
.saida-main-row.saida-dragging td { opacity: .45; }
.saida-main-row.saida-drop-target td {
background: #eef6ff !important;
box-shadow: inset 0 2px 0 var(--rx), inset 0 -2px 0 var(--rx);
}
.saida-drag-handle {
width: 22px;
height: 28px;
flex: 0 0 22px;
display: grid;
grid-template-columns: repeat(3, 4px);
grid-auto-rows: 4px;
gap: 3px;
place-content: center;
border: none;
background: transparent;
padding: 0;
margin-top: 1px;
cursor: grab;
border-radius: 7px;
touch-action: none;
}
.saida-drag-handle:active { cursor: grabbing; background: #eef2f7; }
.saida-drag-handle span {
width: 4px;
height: 4px;
border-radius: 50%;
background: #9aa4b2;
display: block;
}
.saida-drag-handle:hover span { background: var(--rx); }
.saida-actions-wrap { justify-content: center; }
@media (max-width: 768px) {
.saida-drag-handle { display: none; }
.saida-grupo-head { gap: 6px; }
.saida-grupo-toggle { padding: 10px; }
.saida-grupo-toggle em { display: none; }
.saida-grupo-toggle span:last-child { font-size: 11px; }
.saida-grupo-add { min-height: 34px; padding: 0 10px; font-size: 10.5px; }
}
/* ===== V14.3 — Correção cartões individuais, PDF e anti-duplicidade ===== */
.rx-fat-mini-btn.danger {
color: var(--vm);
border-color: var(--vmb);
background: #fff;
}
.rx-fat-mini-btn.danger:hover {
background: var(--vmc);
color: var(--vm);
border-color: var(--vm);
}
.rx-toggle-sub-btn {
font-weight: 700;
border-style: solid;
border-color: rgba(10,42,94,.18);
background: #f8fafc;
}
.rx-toggle-sub-btn:hover {
border-color: var(--rx);
color: var(--rx);
background: var(--rxc);
}
.cartao-fatura-resumo td {
background: #fbfdff;
border-bottom: 1px solid #eef2f7;
}
/* V14.5 — robustez do importador de fatura */
.rx-fatura-upload.is-dragover {
border-color: var(--rx);
background: linear-gradient(180deg, #f8fbff, #e8eef8);
box-shadow: 0 0 0 4px rgba(10,42,94,.08);
}
.rx-import-pdf-btn {
position: relative;
z-index: 2;
}
/* =============================================================
V15.2/V15.3 — Entradas dinâmicas + agenda com entradas/saídas
Mantém os campos legados rendaP/rendaS apenas como sincronização interna.
============================================================= */
.entradas-lista {
display: flex;
flex-direction: column;
gap: 9px;
}
.entrada-head {
display: grid;
grid-template-columns: minmax(120px, 1fr) minmax(78px, .54fr) 96px 50px minmax(82px, .5fr) 96px 30px;
gap: 6px;
padding: 0 8px 6px;
}
.entrada-head span {
font-size: 10px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
color: #94a3b8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.entrada-head .ehd-r { text-align: right; }
.entrada-head .ehd-c { text-align: center; }
/* ── ENTRADAS EM CARDS (panorama) ─────────────────────────── */
.entradas-cards-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.entrada-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 16px 12px 14px; border: none; border-radius: var(--radius-md); background: #fff; box-shadow: var(--rx-shadow-soft); cursor: pointer; font-family: inherit; transition: var(--transition); }
.entrada-card:hover { box-shadow: var(--rx-shadow-premium); transform: translateY(-1px); }
.entrada-card.principal { border-left: 3px solid #16a34a; }
.entrada-card .ec-tipo { position: absolute; top: 9px; left: 10px; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: #eef2f6; color: #64748b; }
.entrada-card .ec-tipo--rec { background: #e1f5ee; color: #0f7a4a; }
.entrada-card .ec-tipo--parc { background: #e6f1fb; color: #185fa5; }
.entrada-card .ec-del { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--bd); background: #fff; color: #b6bdc7; font-size: 14px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); }
.entrada-card:hover .ec-del { opacity: 1; }
.entrada-card .ec-del:hover { background: var(--vmc); color: var(--vm); border-color: var(--vm); }
.entrada-card .ec-ico { width: 34px; height: 34px; margin: 8px auto 6px; border-radius: 10px; background: var(--rxc); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.entrada-card.principal .ec-ico { background: #e1f5ee; }
.entrada-card .ec-nome { font-size: 12.5px; font-weight: 800; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.entrada-card .ec-val { font-size: 17px; font-weight: 950; color: var(--tx); margin-top: 5px; }
.entrada-card .ec-status { font-size: 10.5px; margin-top: 4px; color: var(--cz); }
.entrada-card .ec-status.ok { color: #0f7a4a; }
.entrada-card .ec-foot { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 4px; }
.entrada-card .ec-foot .ec-status { margin-top: 0; }
.entrada-card .ec-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.entrada-card .ec-toggle-inp { position: absolute; opacity: 0; width: 1px; height: 1px; }
.entrada-card .ec-toggle-sw { position: relative; width: 26px; height: 14px; border-radius: 99px; background: #d3dae3; transition: var(--transition); flex-shrink: 0; }
.entrada-card .ec-toggle-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.25); transition: transform .2s; }
.entrada-card .ec-toggle-inp:checked + .ec-toggle-sw { background: #16a34a; }
.entrada-card .ec-toggle-inp:checked + .ec-toggle-sw::after { transform: translateX(12px); }
.entrada-card .ec-toggle-inp:focus-visible + .ec-toggle-sw { outline: 2px solid var(--rx); outline-offset: 2px; }
.entrada-card--add { border: 1px dashed var(--rxb); background: var(--rxc); justify-content: center; color: var(--rx); }
.entrada-card--add .ec-ico { background: #fff; color: var(--rx); }
.entrada-card--add .ec-nome { color: var(--rx); }
.entrada-card--add .ec-add-hint { font-size: 10px; color: var(--cz); margin-top: 3px; }
@media (max-width: 720px) { .entradas-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Parcelas dentro da linha de entrada: inputs compactos mas usáveis. */
#tab-lancamentos .entrada-row .parc-wrap { justify-content: center; gap: 3px; }
#tab-lancamentos .entrada-row .parc-inp { width: 34px; min-width: 30px; padding: 5px 3px; min-height: 0; font-size: 12px; }
/* R$ mais compacto no valor da entrada (coluna mais estreita agora). */
.entrada-row .rx-input-money .rx-money-prefix { left: 9px; font-size: 11px; }
.entrada-row .rx-input-money input { padding-left: 27px !important; }
.entrada-row {
display: grid;
grid-template-columns: minmax(120px, 1fr) minmax(78px, .54fr) 96px 50px minmax(82px, .5fr) 96px 30px;
align-items: center;
gap: 6px;
padding: 8px;
max-width: 100%;
overflow: hidden;
border: 1px solid var(--bd);
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 24px rgba(15,23,42,.035);
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.entrada-row.recebido {
border-color: rgba(26,122,74,.22);
background: linear-gradient(180deg, #fff 0%, rgba(232,245,238,.78) 100%);
}
.entrada-row > * { min-width: 0; }
.entrada-row:focus-within {
border-color: rgba(10,42,94,.32);
box-shadow: 0 0 0 3px rgba(10,42,94,.07), 0 12px 26px rgba(15,23,42,.055);
}
.entrada-row input,
.entrada-row select {
width: 100%;
min-height: 36px;
border: 1px solid var(--bd);
border-radius: 10px;
padding: 7px 9px;
background: #fff;
color: var(--tx);
font-family: inherit;
font-size: 12px;
outline: none;
}
.entrada-row input:focus,
.entrada-row select:focus {
border-color: rgba(10,42,94,.42);
box-shadow: 0 0 0 3px rgba(10,42,94,.06);
}
.entrada-nome-fixo,
.entrada-tipo-fixo {
width: 100%;
min-height: 36px;
display: flex;
align-items: center;
border: 1px solid rgba(10,42,94,.12);
border-radius: 10px;
padding: 7px 9px;
background: rgba(232,238,248,.55);
color: var(--rx);
font-size: 12px;
font-weight: 850;
}
.entrada-tipo-fixo {
justify-content: center;
color: var(--tx2);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .25px;
}
.entrada-del-btn.is-disabled,
.entrada-del-btn:disabled {
opacity: .45;
cursor: not-allowed;
background: rgba(148,163,184,.10);
color: var(--cz);
transform: none !important;
}
.entrada-valor-inp { text-align: right; font-weight: 850; font-variant-numeric: tabular-nums; }
.entrada-dia-inp { text-align: center; }
.entrada-recebido-check {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 36px;
border: 1px solid rgba(26,122,74,.22);
border-radius: 999px;
padding: 0 8px;
background: rgba(232,245,238,.62);
color: var(--vd);
font-size: 11px;
font-weight: 850;
white-space: nowrap;
cursor: pointer;
}
.entrada-recebido-check input { width: 13px; height: 13px; min-height: 13px; accent-color: var(--vd); padding: 0; }
.entrada-del-btn {
width: 30px;
height: 32px;
min-height: 32px;
border: 0;
border-radius: 10px;
background: rgba(192,57,43,.09);
color: var(--vm);
font-weight: 950;
cursor: pointer;
transition: .14s ease;
}
.entrada-del-btn:hover { background: var(--vm); color: #fff; transform: translateY(-1px); }
.entrada-empty {
display: flex;
flex-direction: column;
gap: 4px;
padding: 15px;
border: 1px dashed rgba(10,42,94,.24);
border-radius: 14px;
background: rgba(232,238,248,.48);
color: var(--tx2);
}
.entrada-empty strong { color: var(--rx); font-size: 13px; }
.entrada-empty span { font-size: 12px; line-height: 1.45; }
.linha-destaque-venc {
outline: 3px solid rgba(200,127,10,.24);
outline-offset: 3px;
animation: rxPulseDestaque 1.2s ease-in-out 2;
}
@keyframes rxPulseDestaque {
0%, 100% { box-shadow: 0 0 0 rgba(200,127,10,0); }
50% { box-shadow: 0 0 0 8px rgba(200,127,10,.10); }
}
.rx-cal-day.venc-entrada,
.rx-cal-day.venc-misto {
background: linear-gradient(180deg, #fff 0%, var(--vdc) 100%);
border-color: rgba(26,122,74,.24);
}
.rx-cal-day.venc-entrada::after { background: var(--vd); }
.rx-cal-day.venc-misto::after { background: linear-gradient(90deg, var(--vd), var(--am)); }
.rx-cal-day.venc-entrada .rx-cal-meta,
.rx-cal-day.venc-misto .rx-cal-meta { color: var(--vd); }
.rx-agenda-legend .entrada { background: var(--vd); }
.venc-item.entrada:not(.pago) {
border-color: rgba(26,122,74,.18);
background: linear-gradient(180deg, #fff 0%, rgba(232,245,238,.74) 100%);
}
.venc-item.entrada .venc-dot,
.venc-item.entrada.pago .venc-dot {
background: var(--vd);
box-shadow: 0 0 0 4px rgba(26,122,74,.10);
}
.venc-item.entrada .venc-value strong,
.rx-agenda-detail.entrada .rx-agenda-detail-side b { color: var(--vd); }
.venc-item.saida:not(.pago) .venc-value strong,
.rx-agenda-detail.saida:not(.pago) .rx-agenda-detail-side b { color: var(--vm); }
.rx-agenda-detail.entrada:not(.pago) {
border-color: rgba(26,122,74,.20);
background: linear-gradient(180deg, #fff 0%, rgba(232,245,238,.76) 100%);
}
.rx-agenda-detail.entrada .rx-agenda-status-dot {
background: var(--vd);
box-shadow: 0 0 0 4px rgba(26,122,74,.10);
}
.rx-agenda-detail.entrada .rx-agenda-pay:not(.is-paid) {
background: var(--vd);
}
.rx-agenda-detail.entrada.pago { opacity: .82; }
.rx-agenda-day-head b { color: var(--hbg); }
.login-logo,
.rx-side-logo,
.hlogo,
.rxm-brand-logo { letter-spacing: -.06em; }
@media (max-width: 820px) {
.entradas-lista { gap: 12px; }
.entrada-row {
grid-template-columns: minmax(0, 1fr) 94px;
grid-template-areas:
"nome nome"
"valor dia"
"tipo status"
"delete delete";
gap: 9px;
padding: 12px;
border-radius: 18px;
overflow: visible;
}
.entrada-nome-inp { grid-area: nome; font-size: 14px !important; font-weight: 850; }
.entrada-valor-inp { grid-area: valor; font-size: 14px !important; min-height: 44px !important; }
.entrada-dia-inp { grid-area: dia; min-height: 44px !important; }
.entrada-tipo-select { grid-area: tipo; min-height: 44px !important; }
.entrada-recebido-check { grid-area: status; min-height: 44px; padding: 0 10px; }
.entrada-del-btn { grid-area: delete; width: 100%; height: 42px; min-height: 42px; border-radius: 12px; }
.add-row-btn { border-radius: 15px; border-style: solid; background: var(--rxc); color: var(--rx); font-weight: 850; }
}
/* ── Fatura: tela de senha (PDF protegido) — Fase 0.2 ───────────── */
.rx-fat-senha { margin-top: 4px; }
.rx-fat-senha-card {
background: #fff;
border: 1px solid var(--bd);
border-radius: 16px;
padding: 22px 20px;
max-width: 460px;
margin: 6px auto;
text-align: center;
box-shadow: 0 6px 24px rgba(10, 42, 94, .06);
}
.rx-fat-senha-ico {
width: 52px; height: 52px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 24px;
background: var(--rxc);
border-radius: 50%;
margin-bottom: 12px;
}
.rx-fat-senha-titulo { margin: 0 0 6px; font-size: 17px; color: var(--tx); font-weight: 800; line-height: 1.25; }
.rx-fat-senha-sub { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--cz); }
.rx-fat-senha-label { display: block; text-align: left; font-size: 12px; font-weight: 700; color: var(--tx); margin: 0 0 5px; }
.rx-fat-senha-campo { position: relative; display: flex; align-items: center; }
.rx-fat-senha-campo input {
width: 100%;
padding: 12px 44px 12px 14px;
border: 1.5px solid var(--bd);
border-radius: 11px;
font-size: 15px;
font-family: inherit;
color: var(--tx);
background: #fff;
transition: border-color .15s, box-shadow .15s;
}
.rx-fat-senha-campo input:focus {
outline: none;
border-color: var(--rx);
box-shadow: 0 0 0 3px var(--rxc);
}
.rx-fat-senha-olho {
position: absolute; right: 6px;
border: 0; background: transparent;
font-size: 17px; cursor: pointer; padding: 8px; line-height: 1;
opacity: .55; transition: opacity .15s;
}
.rx-fat-senha-olho:hover, .rx-fat-senha-olho.is-on { opacity: 1; }
.rx-fat-senha-erro { text-align: left; margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--vm); }
.rx-fat-senha-dica { text-align: left; margin: 14px 0 0; font-size: 12.5px; color: var(--cz); }
.rx-fat-senha-dica summary { cursor: pointer; font-weight: 700; color: var(--rx); list-style: none; }
.rx-fat-senha-dica summary::-webkit-details-marker { display: none; }
.rx-fat-senha-dica summary::before { content: '▸ '; }
.rx-fat-senha-dica[open] summary::before { content: '▾ '; }
.rx-fat-senha-dica ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
.rx-fat-senha-privacidade {
margin: 16px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--cz);
background: var(--rxc); border-radius: 9px; padding: 9px 11px; text-align: left;
}
.rx-fat-senha-acoes { display: flex; gap: 10px; margin-top: 18px; justify-content: center; }
@media (max-width: 560px) {
.rx-fat-senha-card { padding: 18px 14px; }
.rx-fat-senha-acoes { flex-direction: column-reverse; }
.rx-fat-senha-acoes .rx-fat-btn { width: 100%; }
}
/* =============================================================
V15.6.1 — Correção desktop das saídas + refinamento entrada mobile
Mantém o campo de vencimento das saídas no mesmo padrão visual dos
inputs atuais, evitando alteração visual no PC.
============================================================= */
#tab-lancamentos .stbl .col-desc { width: auto; text-align: left; }
#tab-lancamentos .stbl .col-valor { width: 146px; text-align: right; }
#tab-lancamentos .stbl .col-parcelas { width: 158px; text-align: center; }
#tab-lancamentos .stbl .col-venc { width: 76px; text-align: center; }
#tab-lancamentos .stbl .col-pago { width: 58px; text-align: center; }
#tab-lancamentos .stbl .col-acoes { width: 46px; text-align: center; }
#tab-lancamentos .stbl td:nth-child(1) { text-align: left; min-width: 0; }
#tab-lancamentos .stbl td:nth-child(2) { text-align: right; }
#tab-lancamentos .stbl td:nth-child(3),
#tab-lancamentos .stbl td:nth-child(4),
#tab-lancamentos .stbl td:nth-child(5),
#tab-lancamentos .stbl td:nth-child(6) { text-align: center; }
#tab-lancamentos .ninput,
#tab-lancamentos .vinput,
#tab-lancamentos .parc-inp,
#tab-lancamentos .venc-inp {
min-height: 36px;
height: 36px;
border: 1px solid var(--bd);
border-radius: 10px;
background: #fff;
color: var(--tx);
font-family: inherit;
font-size: 12px;
outline: none;
}
#tab-lancamentos .ninput {
width: 100%;
min-width: 0;
padding: 7px 9px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#tab-lancamentos .vinput {
width: 132px;
min-width: 128px;
max-width: 140px;
text-align: right;
padding: 7px 10px;
font-weight: 850;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#tab-lancamentos .parc-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
white-space: nowrap;
}
#tab-lancamentos .parc-inp,
#tab-lancamentos .venc-inp {
width: 58px;
min-width: 58px;
max-width: 64px;
text-align: center;
padding: 7px 9px;
font-variant-numeric: tabular-nums;
}
#tab-lancamentos .ninput:focus,
#tab-lancamentos .vinput:focus,
#tab-lancamentos .parc-inp:focus,
#tab-lancamentos .venc-inp:focus {
border-color: rgba(10,42,94,.42);
box-shadow: 0 0 0 3px rgba(10,42,94,.06);
}
#tab-lancamentos .parc-sep {
min-width: 8px;
text-align: center;
color: var(--cz);
font-weight: 700;
}
#tab-lancamentos .parc-info,
#tab-lancamentos .grupo-badge,
#tab-lancamentos .venc-cell > div {
text-align: center;
line-height: 1.2;
}
#tab-lancamentos .venc-cell {
text-align: center;
min-width: 76px;
}
#tab-lancamentos .venc-inp.venc-alerta {
border-color: var(--am);
background: var(--amc);
color: var(--am);
font-weight: 800;
}
#tab-lancamentos .del-s {
min-width: 30px;
min-height: 30px;
}
#tab-lancamentos tfoot td,
#tab-lancamentos #totSai {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@media (max-width: 820px) {
.rxm-form-section[data-rxm-form-section="receita"] .rxm-form-info {
margin-bottom: 10px;
}
.rxm-form-section[data-rxm-form-section="receita"] .rxm-form-row {
grid-template-columns: minmax(0, 1fr) minmax(128px, .72fr);
}
}
/* ════════════════════════════════════════════════════════════
PERFIL DO CLIENTE — modal, planos, banner 24h
════════════════════════════════════════════════════════════ */
/* --- Header: botão de perfil --- */
.hbtn-perfil {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 600;
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.2) !important;
color: #fff;
}
.hbtn-perfil:hover { background: rgba(255,255,255,.22); }
/* --- Overlay genérico --- */
.perfil-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(7,27,62,.58);
z-index: 9300;
align-items: center;
justify-content: center;
padding: 16px;
animation: pOverlayIn .15s ease-out;
}
@keyframes pOverlayIn { from { opacity: 0; } to { opacity: 1; } }
/* --- Modal de perfil --- */
.perfil-modal {
background: var(--bg0, #fff);
border-radius: 20px;
width: 100%;
max-width: 380px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(7,27,62,.22);
animation: pModalIn .18s cubic-bezier(.4,0,.2,1);
outline: none;
}
@keyframes pModalIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.perfil-header {
background: #0a2a5e;
padding: 18px 16px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.perfil-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(255,255,255,.18);
color: #fff;
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 2px solid rgba(255,255,255,.25);
}
.perfil-header-info { flex: 1; min-width: 0; }
.perfil-nome {
font-size: 14px;
font-weight: 600;
color: #fff;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.perfil-email {
font-size: 11px;
color: rgba(255,255,255,.65);
margin: 2px 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.perfil-fechar {
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2);
color: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
flex-shrink: 0;
transition: background .12s;
}
.perfil-fechar:hover { background: rgba(255,255,255,.25); }
.perfil-body {
padding: 14px 16px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Card do plano */
.perfil-plano-card {
background: var(--rxc, #e8f0fe);
border-radius: 12px;
padding: 12px 14px;
}
.perfil-plano-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.perfil-plano-label { font-size: 11px; color: var(--cz, #666); }
.perfil-plano-badge {
background: #0a2a5e;
color: #fff;
font-size: 10px;
font-weight: 600;
padding: 2px 10px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: .3px;
}
.perfil-plano-venc {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 13px;
color: var(--tx, #111);
margin-bottom: 8px;
}
.perfil-plano-venc span { color: var(--cz, #666); }
.perfil-plano-bar-wrap {
background: rgba(10,42,94,.1);
border-radius: 4px;
height: 5px;
overflow: hidden;
}
.perfil-plano-bar {
height: 100%;
border-radius: 4px;
background: #1a7a4a;
transition: width .4s ease;
}
.perfil-plano-dias { font-size: 11px; color: var(--cz, #666); margin: 5px 0 0; }
/* Aviso carência */
.perfil-aviso {
display: flex;
gap: 8px;
align-items: flex-start;
background: #fff8e6;
border: 1px solid #f5c842;
border-radius: 8px;
padding: 9px 12px;
font-size: 12px;
color: #7a5200;
}
/* Botões do perfil */
.perfil-btn-renovar {
width: 100%;
height: 42px;
background: #0a2a5e;
color: #fff;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background .12s;
}
.perfil-btn-renovar:hover { background: #071b3e; }
.perfil-btn-sec {
width: 100%;
height: 36px;
background: transparent;
color: var(--cz, #666);
border: 1px solid var(--bd, #dde1e7);
border-radius: 10px;
font-size: 12px;
cursor: pointer;
transition: background .12s;
}
.perfil-btn-sec:hover { background: var(--czc, #f5f5f5); }
.perfil-btn-refund {
width: 100%;
min-height: 38px;
background: #fff8e6;
color: #7a5200;
border: 1px solid #f5c842;
border-radius: 10px;
font-size: 12px;
font-weight: 750;
cursor: pointer;
transition: background .12s, transform .12s;
}
.perfil-btn-refund:hover { background: #fff1c8; transform: translateY(-1px); }
.perfil-refund-note {
margin: -3px 0 2px;
font-size: 10.5px;
line-height: 1.45;
color: var(--cz, #666);
}
/* --- Modal de planos --- */
.planos-modal {
background: var(--bg0, #fff);
border-radius: 20px;
width: 100%;
max-width: 480px;
padding: 24px 20px 22px;
box-shadow: 0 24px 64px rgba(7,27,62,.22);
animation: pModalIn .18s cubic-bezier(.4,0,.2,1);
}
.planos-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.planos-header h2 { font-size: 18px; font-weight: 600; margin: 0; }
.planos-sub { font-size: 13px; color: var(--cz, #666); margin: 0 0 18px; }
.planos-status {
border-radius: 12px;
padding: 10px 12px;
margin: -4px 0 14px;
font-size: 12px;
line-height: 1.55;
border: 1px solid var(--rxb, #d6e4ff);
background: var(--rxc, #eef5ff);
color: var(--rx, #0a2a5e);
}
.planos-status.erro {
border-color: var(--vmb, #ffd4d4);
background: var(--vmc, #fff1f1);
color: #7d0000;
}
.planos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.plano-card {
display: block;
width: 100%;
border: 1.5px solid var(--bd, #dde1e7);
border-radius: 12px;
padding: 14px 12px;
text-decoration: none;
color: inherit;
background: #fff;
text-align: left;
font-family: inherit;
position: relative;
transition: border-color .15s, transform .12s, opacity .12s;
cursor: pointer;
}
.plano-card:disabled {
opacity: .72;
cursor: wait;
transform: none;
}
.plano-card:hover {
border-color: #0a2a5e;
transform: translateY(-2px);
}
.plano-card-destaque {
border: 2px solid #0a2a5e;
}
.plano-card-solicitado {
border: 2px solid #0a2a5e !important;
box-shadow: 0 0 0 3px rgba(10,42,94,.08);
}
.plano-card-solicitado::after {
content: 'Selecionado';
position: absolute;
top: -9px;
left: 10px;
background: #0a2a5e;
color: #fff;
font-size: 9px;
font-weight: 600;
padding: 1px 7px;
border-radius: 999px;
white-space: nowrap;
}
.plano-card-atual {
border: 2px solid #1a7a4a !important;
}
.plano-card-atual::after {
content: 'Plano atual';
position: absolute;
top: -9px;
left: 10px;
background: #1a7a4a;
color: #fff;
font-size: 9px;
font-weight: 600;
padding: 1px 7px;
border-radius: 999px;
white-space: nowrap;
}
.plano-popular {
position: absolute;
top: -9px;
right: 10px;
background: #0a2a5e;
color: #fff;
font-size: 9px;
font-weight: 600;
padding: 1px 7px;
border-radius: 999px;
white-space: nowrap;
}
.plano-card-atual .plano-popular { display: none; }
.plano-card-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
}
.plano-nome { font-size: 14px; font-weight: 600; }
.plano-duracao { font-size: 10px; color: var(--cz, #666); }
.plano-preco { display: flex; align-items: baseline; gap: 2px; margin-bottom: 6px; }
.plano-preco-valor { font-size: 18px; font-weight: 600; }
.plano-preco-periodo { font-size: 11px; color: var(--cz, #666); }
.plano-detalhe { font-size: 11px; color: var(--cz, #666); margin: 0; }
.plano-detalhe-econ { color: #1a7a4a; font-weight: 500; }
.plano-cta { display:block; margin-top: 10px; padding: 8px 10px; border-radius: 9px; background: #0a2a5e; color: #fff; text-align:center; font-size: 12px; font-weight: 700; }
.plano-card:not(.plano-card-destaque) .plano-cta { background: #eef3fb; color: #0a2a5e; }
.plano-card:hover .plano-cta { filter: brightness(.98); }
.plano-mp-note { display:block; margin-top:8px; color:#667085; font-size:11px; font-weight:700; text-align:center; line-height:1.35; }
.plano-card-destaque .plano-mp-note { color:#0a2a5e; }
.planos-rodape {
font-size: 11px;
color: var(--cz, #666);
text-align: center;
margin: 0;
}
/* --- Banner de aviso 24h --- */
.perfil-banner24h {
display: flex;
align-items: center;
gap: 10px;
background: #fff8e6;
border-bottom: 1px solid #f5c842;
padding: 10px 16px;
font-size: 13px;
color: #7a5200;
flex-wrap: wrap;
}
.perfil-banner24h-ico { font-size: 16px; flex-shrink: 0; }
.perfil-banner24h-txt { flex: 1; min-width: 180px; }
.perfil-banner24h-btn {
background: #7a5200;
color: #fff;
border: none;
border-radius: 7px;
height: 30px;
padding: 0 14px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.perfil-banner24h-fechar {
background: none;
border: none;
color: #9a6700;
font-size: 16px;
cursor: pointer;
padding: 0 4px;
flex-shrink: 0;
opacity: .7;
}
.perfil-banner24h-fechar:hover { opacity: 1; }
/* Mobile (≤700px): modal ocupa mais espaço */
@media (max-width: 700px) {
.perfil-overlay { align-items: flex-end; padding: 0; }
.perfil-modal, .planos-modal {
border-radius: 20px 20px 0 0;
max-width: 100%;
max-height: min(92vh, calc(100dvh - 12px));
overflow-y: auto;
padding-bottom: calc(20px + env(safe-area-inset-bottom));
overscroll-behavior: contain;
}
.planos-modal { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
.planos-grid { grid-template-columns: 1fr; }
}
/* =============================================================
V1.7.3 — Camada 1 Mobile
Ajustes de uso principal no celular sem alterar o motor financeiro:
safe-area iPhone, login estável, pagamentos sem zeros, categorias iguais ao desktop
e conferência rápida de lançamentos do mês.
============================================================= */
html,
body {
max-width: 100%;
overflow-x: hidden;
overscroll-behavior-x: none;
}
@media (max-width: 820px) {
#loginScreen {
width: 100%;
height: 100svh;
min-height: 100svh;
max-height: 100svh;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding:
calc(14px + env(safe-area-inset-top))
max(14px, env(safe-area-inset-right))
calc(18px + env(safe-area-inset-bottom))
max(14px, env(safe-area-inset-left));
}
@supports (height: 100dvh) {
#loginScreen {
height: 100dvh;
min-height: 100dvh;
max-height: 100dvh;
}
}
.login-wrap {
width: min(100%, 456px);
min-height: calc(100svh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 0 14px;
margin: 0 auto;
}
@supports (height: 100dvh) {
.login-wrap {
min-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
}
.login-brand {
margin-bottom: 18px;
}
.login-logo {
width: 64px;
height: 64px;
border-radius: 18px;
margin-bottom: 10px;
}
.login-box {
padding: 22px 18px;
border-radius: 20px;
margin-bottom: 10px;
}
.lf input,
.input-reveal input,
.login-btn {
font-size: 16px !important;
}
.login-footer {
margin-top: 10px;
padding-bottom: env(safe-area-inset-bottom);
}
body:not(.rxm-full) #rxMobileShell {
min-height: 100svh;
padding:
calc(14px + env(safe-area-inset-top))
max(14px, env(safe-area-inset-right))
calc(118px + env(safe-area-inset-bottom))
max(14px, env(safe-area-inset-left));
}
@supports (min-height: 100dvh) {
body:not(.rxm-full) #rxMobileShell {
min-height: 100dvh;
}
}
.rxm-topbar {
position: sticky;
top: 0;
z-index: 30;
padding-top: 2px;
padding-bottom: 8px;
margin-bottom: 10px;
background: linear-gradient(180deg, rgba(7,27,62,.96), rgba(7,27,62,.72) 72%, rgba(7,27,62,0));
backdrop-filter: blur(10px);
}
.rxm-content {
padding-bottom: calc(118px + env(safe-area-inset-bottom));
}
.rxm-list-spaced,
.rxm-panel {
padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
.rxm-bottom-nav {
bottom: calc(10px + env(safe-area-inset-bottom));
}
.rxm-sheet-overlay:not([hidden]) {
padding:
calc(10px + env(safe-area-inset-top))
max(10px, env(safe-area-inset-right))
calc(10px + env(safe-area-inset-bottom))
max(10px, env(safe-area-inset-left));
/* Mobile estático: só rolagem vertical/horizontal — sem pinça-zoom nem "tela solta". */
touch-action: pan-x pan-y;
}
.rxm-sheet {
max-height: calc(100svh - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
padding-bottom: calc(20px + env(safe-area-inset-bottom));
overscroll-behavior: contain;
touch-action: pan-x pan-y;
}
@supports (max-height: 100dvh) {
.rxm-sheet {
max-height: calc(100dvh - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
}
.rxm-cat-field select {
width: 100%;
min-height: 50px;
border: 1.5px solid var(--bd);
border-radius: 16px;
background: #fafbfc;
padding: 12px 40px 12px 14px;
color: var(--tx);
font-family: inherit;
font-size: 16px;
font-weight: 750;
outline: none;
appearance: auto;
}
.rxm-cat-field select:focus {
border-color: var(--rx);
background: #fff;
box-shadow: 0 0 0 4px rgba(10,42,94,.08);
}
.rxm-cat-field .rxm-cat-btn {
width: 100%;
min-height: 50px;
border: 1.5px solid var(--bd);
border-radius: 16px;
background: #fafbfc;
padding: 12px 14px;
color: var(--tx);
font-family: inherit;
font-size: 16px;
font-weight: 750;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
text-align: left;
cursor: pointer;
}
.rxm-cat-field .rxm-cat-btn:focus,
.rxm-cat-field .rxm-cat-btn[aria-expanded="true"] {
border-color: var(--rx);
background: #fff;
box-shadow: 0 0 0 4px rgba(10,42,94,.08);
outline: none;
}
.rxm-cat-field .rxm-cat-btn .rxm-cat-val {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rxm-cat-field .rxm-cat-btn .rxm-cat-caret {
flex: 0 0 auto;
color: var(--cz);
font-size: 13px;
}
.rxm-cat-field small {
display: block;
margin-top: 5px;
color: var(--cz);
font-size: 11px;
line-height: 1.35;
}
.rxm-recent-card {
margin: 14px 0;
}
.rxm-recent-list {
gap: 8px;
}
.rxm-recent-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 11px 12px;
border-radius: 16px;
border: 1px solid var(--bd);
background: #fff;
}
.rxm-recent-item.entrada {
background: var(--vdc);
border-color: var(--vdb);
}
.rxm-recent-item.saida {
background: #fff;
}
.rxm-recent-item strong {
display: block;
color: var(--tx);
font-size: 12.5px;
font-weight: 900;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rxm-recent-item span {
display: block;
margin-top: 2px;
color: var(--tx2);
font-size: 10.5px;
line-height: 1.3;
}
.rxm-recent-item b {
color: var(--hbg);
font-size: 12.5px;
font-weight: 950;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.rxm-pay-card {
grid-template-columns: 10px minmax(0, 1fr) auto;
}
.rxm-pay-main span {
word-break: normal;
}
}
@media (max-width: 390px) {
.rxm-brand strong { font-size: 13px; }
.rxm-brand-logo { width: 38px; height: 38px; border-radius: 14px; }
.rxm-top-action { width: 38px; height: 38px; }
.rxm-bottom-nav { left: 8px; right: 8px; gap: 5px; padding: 8px; }
.rxm-bottom-nav strong { font-size: 9px; }
.rxm-pay-card { grid-template-columns: 9px minmax(0, 1fr); }
.rxm-pay-btn { grid-column: 2; width: max-content; margin-top: 4px; }
.login-box { padding: 20px 16px; }
}
/* V1.7.4 — retorno pós-pagamento Mercado Pago + guia de uso */
.login-payment-return {
max-width: 550px;
margin: 0 auto 14px;
border-radius: 14px;
padding: 12px 14px;
font-size: 12px;
line-height: 1.55;
border: 1px solid rgba(255,255,255,.24);
background: rgba(255,255,255,.96);
color: var(--rx);
box-shadow: 0 12px 28px rgba(7, 27, 62, .14);
}
.login-payment-return strong { display:block; font-size: 13px; margin-bottom: 3px; }
.login-payment-return span { color: var(--tx2); }
.login-payment-return.sucesso { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.login-payment-return.aviso { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.login-payment-return.erro { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.payment-return-mount {
width: min(1180px, calc(100% - 32px));
margin: 14px auto 0;
position: relative;
z-index: 20;
}
.payment-return-banner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
border-radius: 18px;
padding: 14px 16px;
border: 1px solid #dbeafe;
background: #eff6ff;
color: #0a2a5e;
box-shadow: 0 16px 36px rgba(7, 27, 62, .10);
}
.payment-return-banner.sucesso { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.payment-return-banner.aviso { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.payment-return-banner.erro { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.payment-return-icon { font-size: 22px; line-height: 1; }
.payment-return-copy strong { display:block; font-size: 14px; margin-bottom: 2px; }
.payment-return-copy span { display:block; font-size: 12px; color: inherit; opacity: .86; line-height: 1.45; }
.payment-return-actions { display:flex; gap:8px; align-items:center; }
.payment-return-actions button {
border: 0;
border-radius: 10px;
padding: 9px 12px;
font-weight: 800;
font-size: 12px;
cursor: pointer;
background: #0a2a5e;
color: #fff;
}
.payment-return-actions button.ghost { background: rgba(255,255,255,.72); color: inherit; border: 1px solid currentColor; }
.perfil-btn-sec + .perfil-btn-sec { margin-top: 8px; }
.guia-page { background: #f3f7fb; color: #172033; min-height: 100vh; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.guia-wrap { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 56px; }
.guia-hero { background: linear-gradient(135deg, #0a2a5e, #123f86); color:#fff; border-radius: 26px; padding: 28px; box-shadow: 0 20px 50px rgba(7,27,62,.22); }
.guia-hero h1 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 40px); }
.guia-hero p { margin: 0; opacity: .86; line-height: 1.6; max-width: 760px; }
.guia-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px; }
.guia-actions a { color:#0a2a5e; background:#fff; border-radius:12px; padding:10px 14px; font-weight:800; text-decoration:none; }
.guia-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; margin-top: 18px; }
.guia-card { background:#fff; border:1px solid #dbe7f5; border-radius:20px; padding:18px; box-shadow: 0 12px 30px rgba(7,27,62,.06); }
.guia-card h2 { margin:0 0 10px; color:#0a2a5e; font-size:18px; }
.guia-card p, .guia-card li { color:#526071; font-size:14px; line-height:1.6; }
.guia-card ul, .guia-card ol { padding-left: 20px; margin: 8px 0 0; }
.guia-note { margin-top: 18px; background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; border-radius:18px; padding:16px; font-size:14px; line-height:1.6; }
@media (max-width: 760px) {
.payment-return-mount { width: calc(100% - 20px); margin-top: 10px; }
.payment-return-banner { grid-template-columns: auto 1fr; align-items:start; padding: 12px; }
.payment-return-actions { grid-column: 1 / -1; justify-content: stretch; }
.payment-return-actions button { flex:1; }
.guia-wrap { width: min(100% - 22px, 980px); padding: calc(18px + env(safe-area-inset-top, 0px)) 0 calc(42px + env(safe-area-inset-bottom, 0px)); }
.guia-hero { padding: 22px; border-radius: 22px; }
.guia-grid { grid-template-columns: 1fr; }
}
/* --- Billing Fase 4: planos com cartão recorrente + Pix avulso --- */
.planos-grid {
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.plano-card {
cursor: default;
}
.plano-card:hover {
transform: translateY(-1px);
}
.plano-actions {
display: grid;
gap: 7px;
margin-top: 10px;
}
.plano-actions .plano-cta {
border: 0;
width: 100%;
cursor: pointer;
font-family: inherit;
line-height: 1.25;
}
.plano-actions .plano-cta small {
display: block;
margin-top: 3px;
font-size: 9.5px;
font-weight: 600;
opacity: .78;
}
.plano-cta-recorrente {
background: #0a2a5e;
color: #fff;
}
.plano-cta-pix {
background: #eef3fb;
color: #0a2a5e;
}
.plano-card-destaque .plano-cta-pix {
background: #f4f7fb;
}
.plano-actions .plano-cta:disabled {
opacity: .68;
cursor: wait;
}
.plano-preco {
flex-wrap: wrap;
gap: 3px 5px;
}
.plano-preco-riscado {
color: #98a2b3;
font-size: 11px;
text-decoration: line-through;
font-weight: 700;
}
.plano-equivalente,
.plano-renovacao {
display: block;
font-size: 10.5px;
color: #1a7a4a;
font-weight: 700;
line-height: 1.35;
margin-top: -2px;
}
.plano-renovacao {
color: #667085;
font-weight: 600;
margin-bottom: 6px;
}
.plano-card-fundador {
border-color: #d8b96f;
background: linear-gradient(180deg, #fffdf8 0%, #fff 52%);
}
.plano-card-fundador .plano-popular {
background: #7a5b12;
}
@media (max-width: 640px) {
.planos-grid {
grid-template-columns: 1fr;
}
.plano-actions {
grid-template-columns: 1fr;
}
}
/* --- V2.2.10: proteção visual da recorrência por flag pública --- */
.plano-cta-disabled,
.plano-actions .plano-cta-disabled:disabled {
background: #e5e7eb;
color: #667085;
cursor: not-allowed;
opacity: .88;
filter: none;
}
/* --- V2.2.14: contador de vagas do Anual Fundador --- */
.plano-founder-slots-note,
.founder-slots-note {
display: block;
margin-top: 4px;
color: #8a6a16;
font-size: 11px;
font-weight: 800;
}
.plano-popular.founder-closed,
.founder.founder-closed {
background: #f3f4f6 !important;
color: #6b7280 !important;
}
.plano-card-encerrado,
.price-card-encerrado {
opacity: .78;
}
.plano-card-encerrado .plano-preco,
.price-card-encerrado .price-main {
filter: grayscale(.15);
}
/* V2.2.15 — alternância Anual Fundador ↔ Anual padrão */
.srx-founder-hidden{display:none!important;}
.plano-card-anual-padrao{border-color:#dbe6f5;}
/* ── V2.2.18: auditoria premium da importação de fatura PDF ── */
.rx-fat-audit-panel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 4px 0 12px;
padding: 14px 16px;
border-radius: 18px;
background: linear-gradient(180deg, #fff, #f8fbff);
border: 1px solid rgba(15,23,42,.08);
box-shadow: 0 10px 26px rgba(15,23,42,.05);
}
.rx-fat-audit-panel strong {
display: block;
color: #0f172a;
font-size: 16px;
font-weight: 900;
}
.rx-fat-audit-panel small {
display: block;
margin-top: 4px;
color: #64748b;
font-size: 12px;
line-height: 1.45;
}
.rx-fat-audit-eyebrow {
display: block;
margin-bottom: 4px;
color: #64748b;
font-size: 10px;
font-weight: 900;
letter-spacing: .09em;
text-transform: uppercase;
}
.rx-fat-audit-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 92px;
min-height: 30px;
border-radius: 999px;
padding: 0 12px;
font-size: 11px;
font-weight: 900;
border: 1px solid transparent;
}
.rx-fat-audit-badge.ok { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.rx-fat-audit-badge.warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.rx-fat-audit-badge.alerta { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.rx-fat-audit-badge.neutro { background: #e2e8f0; color: #334155; border-color: #cbd5e1; }
.rx-fat-summary-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px 0; }
.rx-fat-summary-grid.compact > div,
.rx-fat-cat-grid.compact > div { padding: 10px 12px; border-radius: 13px; }
.rx-fat-cat-grid.compact { margin: 8px 0 10px; gap: 8px; }
.rx-fat-conferencia { display: flex; align-items: center; gap: 8px; }
.rx-fat-conferencia strong { font-weight: 900; }
.rx-fat-conferencia span { font-weight: 700; }
.rx-fat-conferencia.warn { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
.rx-fat-conferencia.neutro { background:#f1f5f9; color:#334155; border:1px solid #cbd5e1; }
.rx-fat-alerta-revisao.compacta { padding: 9px 11px; margin: 8px 0 10px; font-size: 11.5px; }
.rx-fat-table-select th:first-child,
.rx-fat-table-select td:first-child { width: 38px; text-align: center; }
.rx-fat-table-audit .rx-fat-check {
width: 17px;
height: 17px;
accent-color: var(--rx);
cursor: pointer;
}
.rx-fat-row-suspect { background: #fffaf0; }
.rx-fat-row-note {
display: block;
margin-top: 4px;
color: #b45309;
font-size: 10.5px;
font-weight: 700;
}
.rx-fat-parc-edit {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 116px;
justify-content: center;
white-space: nowrap;
}
.rx-fat-parc-edit input {
width: 48px;
min-width: 48px;
max-width: 54px;
height: 36px;
text-align: center;
border: 1px solid var(--bd);
border-radius: 10px;
padding: 5px 7px;
font: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1;
background: #fff;
font-variant-numeric: tabular-nums;
}
.rx-fat-parc-edit input:focus {
outline: none;
border-color: var(--rx);
box-shadow: 0 0 0 3px rgba(10,42,94,.08);
}
.rx-fat-parc-edit span { color: #64748b; font-weight: 900; }
.rx-fat-parc-note {
display: block;
margin-top: 3px;
color: #64748b;
font-size: 10px;
font-weight: 800;
white-space: nowrap;
}
.rx-fat-table-editavel .rx-fat-parc-atual,
.rx-fat-table-editavel .rx-fat-parc-total,
.rx-fat-table-editavel .rx-fat-detail-parc-atual,
.rx-fat-table-editavel .rx-fat-detail-parc-total {
font-family: inherit;
}
@media (max-width: 760px) {
.rx-fat-audit-panel { align-items: flex-start; flex-direction: column; }
.rx-fat-summary-grid.compact { grid-template-columns: 1fr 1fr; }
.rx-fat-audit-badge { min-width: 0; }
}
/* Raio X mobile — barra "Outras" tocável + sheet com os grupos de dentro */
.rxm-raiox-outras { cursor: pointer; }
.rxm-raiox-outras span { font-weight: 700; }
.rxm-raiox-outras small { color: #1d4ed8; }
.rxm-raiox-outras-lista { display: flex; flex-direction: column; gap: 8px; }
.rxm-raiox-outras-item {
background: #f7f9fc;
border: 1px solid #e7edf5;
border-radius: 12px;
padding: 12px 14px;
}
.rxm-raiox-outras-item > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
}
.rxm-raiox-outras-item span { color: #0f172a; font-weight: 700; font-size: 14px; }
.rxm-raiox-outras-item strong { color: #0f172a; font-weight: 800; white-space: nowrap; }
.rxm-raiox-outras-item small { display: block; margin-top: 3px; color: #64748b; font-size: 12px; }
/* =============================================================
V2.2.19 — AGENDA FINANCEIRA V2 PREMIUM
Ajuste visual/funcional sem alterar base de dados ou cálculos.
============================================================= */
.rx-agenda-v2 .rx-agenda-page-head {
align-items: flex-start;
gap: 18px;
}
.rx-agenda-head-actions {
display: inline-flex;
align-items: center;
gap: 10px;
margin-left: auto;
flex-wrap: wrap;
justify-content: flex-end;
}
.rx-agenda-v2 .rx-soft-action-link {
background: transparent;
border-color: transparent;
box-shadow: none;
color: var(--rx);
padding: 10px 8px;
}
.rx-agenda-v2 .rx-soft-action-link:hover {
background: rgba(10,42,94,.07);
}
.rx-agenda-v2 .rx-agenda-card {
border-color: rgba(10,42,94,.10);
background:
radial-gradient(circle at 8% 0%, rgba(10,42,94,.045), transparent 32%),
linear-gradient(180deg, #fff 0%, #fbfcff 100%);
box-shadow: 0 26px 70px rgba(15,23,42,.08);
}
.rx-agenda-v2 .rx-agenda-topline {
margin-bottom: 8px;
}
.rx-agenda-v2 .venc-resumo {
color: var(--tx2);
font-size: 12px;
line-height: 1.45;
}
.rx-agenda-v2 .rx-agenda-stats {
gap: 14px;
margin: 14px 0 18px;
}
.rx-agenda-v2 .rx-agenda-stat {
min-height: 92px;
padding: 16px 18px 14px;
border-radius: 20px;
background: rgba(255,255,255,.92);
box-shadow: 0 16px 40px rgba(15,23,42,.055);
}
.rx-agenda-v2 .rx-agenda-stat::before {
width: 0;
}
.rx-agenda-v2 .rx-agenda-stat::after {
content: '';
position: absolute;
inset: 16px auto auto 16px;
width: 34px;
height: 34px;
border-radius: 999px;
background: rgba(10,42,94,.08);
}
.rx-agenda-v2 .rx-agenda-stat span,
.rx-agenda-v2 .rx-agenda-stat strong,
.rx-agenda-v2 .rx-agenda-stat small {
display: block;
margin-left: 50px;
}
.rx-agenda-v2 .rx-agenda-stat span {
color: var(--tx2);
margin-bottom: 6px;
}
.rx-agenda-v2 .rx-agenda-stat strong {
font-size: clamp(17px, 1.5vw, 22px);
}
.rx-agenda-v2 .rx-agenda-stat small {
color: var(--tx2);
font-size: 11px;
font-weight: 700;
margin-top: 4px;
}
.rx-agenda-v2 .rx-agenda-stat.danger strong { color: var(--vm); }
.rx-agenda-v2 .rx-agenda-stat.today strong { color: var(--am); }
.rx-agenda-v2 .rx-agenda-stat.next strong { color: var(--rx); }
.rx-agenda-v2 .rx-agenda-stat.ok strong { color: var(--vd); }
.rx-agenda-v2 .rx-agenda-stat.danger::after { background: rgba(192,57,43,.10); box-shadow: inset 0 0 0 1px rgba(192,57,43,.09); }
.rx-agenda-v2 .rx-agenda-stat.today::after { background: rgba(200,127,10,.10); box-shadow: inset 0 0 0 1px rgba(200,127,10,.10); }
.rx-agenda-v2 .rx-agenda-stat.next::after { background: rgba(10,42,94,.10); box-shadow: inset 0 0 0 1px rgba(10,42,94,.08); }
.rx-agenda-v2 .rx-agenda-stat.ok::after { background: rgba(26,122,74,.10); box-shadow: inset 0 0 0 1px rgba(26,122,74,.08); }
.rx-agenda-v2 .rx-agenda-layout {
grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
gap: 20px;
}
.rx-agenda-v2 .rx-calendar-panel,
.rx-agenda-v2 .rx-agenda-day-panel,
.rx-agenda-v2 .rx-agenda-list-block {
border-radius: 24px;
background: rgba(255,255,255,.94);
box-shadow: 0 18px 48px rgba(15,23,42,.06);
}
.rx-calendar-nav {
display: inline-flex;
align-items: center;
gap: 7px;
flex-shrink: 0;
}
.rx-calendar-nav button {
border: 1px solid rgba(15,23,42,.10);
background: #fff;
color: var(--hbg);
border-radius: 12px;
min-height: 34px;
min-width: 36px;
padding: 7px 10px;
font-family: inherit;
font-weight: 900;
cursor: pointer;
transition: .15s ease;
}
.rx-calendar-nav button:hover {
transform: translateY(-1px);
border-color: rgba(10,42,94,.22);
box-shadow: 0 10px 24px rgba(10,42,94,.10);
}
.rx-agenda-v2 .rx-calendar-title strong {
font-size: 17px;
}
.rx-agenda-v2 .rx-agenda-calendar {
gap: 6px;
}
.rx-agenda-v2 .rx-cal-day {
min-height: 76px;
border-radius: 15px;
padding: 9px 8px;
background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
box-shadow: none;
}
.rx-agenda-v2 .rx-cal-day.vazio {
min-height: 76px;
}
.rx-agenda-v2 .rx-cal-day:hover {
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(15,23,42,.08);
}
.rx-agenda-v2 .rx-cal-day.is-selected {
border-color: rgba(18,77,255,.62);
box-shadow: 0 0 0 3px rgba(18,77,255,.10), 0 14px 30px rgba(10,42,94,.10);
}
.rx-agenda-v2 .rx-cal-num {
width: 24px;
height: 24px;
border-radius: 9px;
}
.rx-agenda-v2 .rx-cal-meta {
font-size: 10px;
letter-spacing: -.02em;
}
.rx-agenda-v2 .rx-cal-count {
font-size: 9px;
letter-spacing: .02em;
text-transform: none;
}
.rx-agenda-v2 .rx-agenda-day-head {
gap: 18px;
}
.rx-agenda-v2 .rx-agenda-day-head small {
color: var(--tx2);
font-size: 11.5px;
line-height: 1.35;
}
.rx-agenda-day-total {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.rx-agenda-day-total span {
color: var(--tx2);
font-size: 11px;
font-weight: 800;
}
.rx-agenda-v2 .rx-agenda-day-head b {
font-size: 18px;
color: var(--rx);
}
.rx-agenda-v2 .rx-agenda-day-head b.is-positive {
color: var(--vd);
}
.rx-agenda-v2 .rx-agenda-day-head b.is-negative {
color: var(--vm);
}
.rx-agenda-v2 .rx-agenda-day-head b.is-neutral {
color: var(--rx);
}
.rx-agenda-v2 .rx-agenda-day-list {
min-height: 180px;
}
.rx-agenda-v2 .rx-agenda-detail {
grid-template-columns: minmax(0, 1fr) auto;
padding: 16px;
border-radius: 18px;
}
.rx-agenda-v2 .rx-agenda-detail-main strong {
max-width: 280px;
font-size: 14px;
}
.rx-agenda-v2 .rx-agenda-detail-side {
gap: 10px;
}
.rx-agenda-actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.rx-agenda-v2 .rx-agenda-pay {
min-width: 82px;
padding: 9px 14px;
border-radius: 12px;
}
.rx-agenda-v2 .rx-agenda-link {
border: 1px solid rgba(10,42,94,.14);
background: #fff;
padding: 8px 12px;
border-radius: 12px;
}
.rx-agenda-day-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin-top: 14px;
border: 1px solid rgba(15,23,42,.08);
border-radius: 18px;
overflow: hidden;
background: #fff;
}
.rx-agenda-day-summary div {
padding: 13px 12px;
text-align: center;
border-left: 1px solid rgba(15,23,42,.07);
}
.rx-agenda-day-summary div:first-child { border-left: 0; }
.rx-agenda-day-summary span {
display: block;
color: var(--tx2);
font-size: 10.5px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 4px;
}
.rx-agenda-day-summary strong {
display: block;
color: var(--hbg);
font-size: 13px;
font-weight: 950;
font-variant-numeric: tabular-nums;
}
#agendaDiaEntradas { color: var(--vd); }
#agendaDiaSaidas { color: var(--vm); }
.rx-agenda-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: -2px 0 12px;
}
.rx-agenda-filter {
border: 1px solid rgba(15,23,42,.08);
background: #fff;
color: var(--tx2);
border-radius: 999px;
padding: 7px 10px;
font-family: inherit;
font-size: 11px;
font-weight: 850;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: .14s ease;
}
.rx-agenda-filter:hover,
.rx-agenda-filter.is-active {
color: var(--rx);
background: rgba(10,42,94,.07);
border-color: rgba(10,42,94,.14);
}
.rx-agenda-filter .dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--rx);
}
.rx-agenda-filter .dot.vencidos { background: var(--vm); }
.rx-agenda-filter .dot.hoje { background: var(--am); }
.rx-agenda-filter .dot.proximos { background: var(--rx); }
.rx-agenda-filter .dot.sem-data { background: var(--cz); }
.rx-agenda-filter em {
font-style: normal;
color: var(--tx2);
background: rgba(15,23,42,.06);
padding: 1px 6px;
border-radius: 999px;
}
.rx-agenda-v2 .venc-item {
align-items: center;
border-radius: 16px;
min-height: 64px;
}
.rx-agenda-v2 .venc-value span {
border-radius: 999px;
background: rgba(15,23,42,.06);
padding: 3px 8px;
align-self: flex-end;
}
@media (max-width: 1120px) {
.rx-agenda-v2 .rx-agenda-layout { grid-template-columns: 1fr; }
.rx-agenda-head-actions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 720px) {
.rx-agenda-v2 .rx-agenda-stats { grid-template-columns: 1fr 1fr; }
.rx-agenda-v2 .rx-agenda-stat { min-height: 78px; padding: 12px; }
.rx-agenda-v2 .rx-agenda-stat::after { display: none; }
.rx-agenda-v2 .rx-agenda-stat span,
.rx-agenda-v2 .rx-agenda-stat strong,
.rx-agenda-v2 .rx-agenda-stat small { margin-left: 0; }
.rx-calendar-nav { width: 100%; justify-content: flex-start; }
.rx-agenda-day-summary { grid-template-columns: 1fr; }
.rx-agenda-day-summary div { border-left: 0; border-top: 1px solid rgba(15,23,42,.07); }
.rx-agenda-day-summary div:first-child { border-top: 0; }
}
/* =============================================================
V2.2.20 — Insights V2 + Mais V2 + base mobile premium
Melhorias visuais e de orientação sem alterar regras financeiras.
============================================================= */
.rx-insights-v2-grid {
display: grid;
grid-template-columns: minmax(0, 1.28fr) minmax(340px, .72fr);
gap: 16px;
align-items: start;
}
.rx-insights-main,
.rx-insights-side { min-width: 0; }
.rx-action-chat-card,
.rx-month-reading-card,
.rx-opportunity-card,
.rx-more-status-card,
.rx-more-section-card,
.rx-more-session-card,
.rx-plan-action-card {
background:
radial-gradient(circle at 100% 0%, rgba(29,78,216,.07), transparent 34%),
#fff;
}
.rx-section-headline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.rx-section-headline h3 {
margin: 2px 0 0;
color: #0f172a;
font-size: 16px;
font-weight: 950;
letter-spacing: -.35px;
}
.rx-card-kicker {
display: inline-flex;
color: var(--rx-blue-premium);
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .75px;
}
.rx-status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
border-radius: 999px;
padding: 6px 10px;
border: 1px solid #dbeafe;
background: #eff6ff;
color: var(--rx);
font-size: 10.5px;
font-weight: 900;
white-space: nowrap;
}
.rx-status-pill.ok { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.rx-status-pill.neutral { color: #475569; border-color: #e2e8f0; background: #f8fafc; }
.rx-status-dot { color: var(--rx-blue-premium); font-size: 20px; line-height: 1; }
.rx-chat-input-premium { margin-top: 12px; }
.rx-chip-scroll { align-items: center; }
.rx-reading-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.rx-reading-item {
border: 1px solid #e2e8f0;
border-radius: 16px;
background: rgba(248,250,252,.82);
padding: 12px;
min-height: 96px;
}
.rx-reading-item span {
display: block;
color: #64748b;
font-size: 10.5px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .45px;
margin-bottom: 5px;
}
.rx-reading-item strong {
display: block;
color: #0f172a;
font-size: 17px;
font-weight: 950;
letter-spacing: -.25px;
line-height: 1.2;
}
.rx-reading-item small {
display: block;
margin-top: 5px;
color: #64748b;
font-size: 11px;
line-height: 1.35;
}
.rx-opportunity-list,
.rx-action-plan-list {
display: grid;
gap: 10px;
}
.rx-action-plan-list {
counter-reset: action;
list-style: none;
padding: 0;
margin: 0;
}
.rx-action-plan-list li,
.rx-opportunity-list > div {
border: 1px solid #e2e8f0;
border-radius: 16px;
background: #fff;
padding: 12px 13px;
}
/* Cards do "Raio X" (motor de insights) — acento por severidade */
.rx-opportunity-list .rx-raiox-card { border-left: 4px solid #cbd5e1; }
.rx-opportunity-list .rx-raiox-alerta { border-left-color: #e74c3c; }
.rx-opportunity-list .rx-raiox-atencao { border-left-color: #f39c12; }
.rx-opportunity-list .rx-raiox-positivo { border-left-color: #27ae60; }
.rx-opportunity-list .rx-raiox-info { border-left-color: #94a3b8; }
.rx-opportunity-list .rx-raiox-card small {
display: block;
margin-top: 5px;
color: #64748b;
font-size: 11px;
line-height: 1.4;
}
.rx-action-plan-list li {
position: relative;
padding-left: 44px;
}
.rx-action-plan-list li::before {
counter-increment: action;
content: counter(action);
position: absolute;
left: 13px;
top: 13px;
width: 22px;
height: 22px;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--rx-blue-soft);
color: var(--rx);
font-size: 11px;
font-weight: 950;
}
.rx-action-plan-list strong,
.rx-opportunity-list strong {
display: block;
color: #0f172a;
font-size: 13px;
font-weight: 950;
margin-bottom: 2px;
}
.rx-action-plan-list span,
.rx-opportunity-list span {
display: block;
color: #64748b;
font-size: 12px;
line-height: 1.45;
}
.rx-more-v2-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
gap: 16px;
align-items: start;
}
.rx-more-v2-grid .rx-more-status-card { grid-column: 1 / -1; }
.rx-security-status-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.rx-security-status-grid > div {
border: 1px solid #dbeafe;
border-radius: 14px;
background: #eff6ff;
padding: 10px 12px;
}
.rx-security-status-grid strong {
display: block;
color: #0f172a;
font-size: 12px;
font-weight: 950;
}
.rx-security-status-grid span {
display: block;
margin-top: 3px;
color: var(--rx);
font-size: 11px;
font-weight: 850;
}
.rx-more-action-list {
display: grid;
gap: 10px;
}
.rx-more-action-list button,
.rx-more-action-list a {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 11px;
align-items: center;
width: 100%;
min-height: 64px;
border: 1px solid #e2e8f0;
border-radius: 16px;
background: #fff;
color: #0f172a;
font-family: inherit;
text-align: left;
text-decoration: none;
padding: 11px 12px;
cursor: pointer;
transition: .15s ease;
}
.rx-more-action-list button:hover,
.rx-more-action-list a:hover {
transform: translateY(-1px);
border-color: #bfdbfe;
box-shadow: var(--rx-shadow-soft);
}
.rx-more-action-list button > span,
.rx-more-action-list a > span {
width: 34px;
height: 34px;
border-radius: 13px;
display: grid;
place-items: center;
background: var(--rx-blue-soft);
}
.rx-more-action-list strong {
display: block;
font-size: 13px;
font-weight: 950;
color: #0f172a;
}
.rx-more-action-list small {
display: block;
margin-top: 2px;
color: #64748b;
font-size: 11.5px;
line-height: 1.35;
font-weight: 650;
}
.rx-more-session-card {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-color: #fecaca;
background: linear-gradient(135deg, #fff 0%, #fff7f7 100%);
}
.rx-more-session-card h3 { margin: 2px 0 5px; color: #991b1b; font-size: 16px; }
.rx-more-session-card p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.45; }
.rx-more-session-card .danger {
border: 1px solid #fecaca;
background: #fee2e2;
color: #991b1b;
border-radius: 14px;
padding: 12px 16px;
font-weight: 950;
font-family: inherit;
cursor: pointer;
}
@media (max-width: 1180px) and (min-width: 821px) {
.rx-insights-v2-grid,
.rx-more-v2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
.rx-insights-v2-grid,
.rx-more-v2-grid {
display: block;
}
.rx-page-head {
align-items: flex-start;
}
.rx-chip-scroll,
.rx-premium-list {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.rx-chip-scroll button,
.rx-premium-list span { flex: 0 0 auto; }
.rx-reading-grid,
.rx-security-status-grid { grid-template-columns: 1fr; }
.rx-more-session-card {
display: grid;
gap: 12px;
}
.rx-more-session-card .danger { width: 100%; }
}
/* ─────────────────────────────────────────────────────────────
V2.2.21 — Reserva gamificada / Proteção financeira
───────────────────────────────────────────────────────────── */
.rx-reserva-v2 .rx-page-head { margin-bottom: 18px; }
.rx-reserva-summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-bottom: 16px;
}
.rx-reserva-kpi {
position: relative;
overflow: hidden;
min-height: 118px;
padding: 18px 18px 16px;
border: 1px solid rgba(29,78,216,.12);
border-radius: 18px;
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 18px 38px rgba(15,23,42,.06);
}
.rx-reserva-kpi::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(180deg, var(--rx), #60a5fa);
opacity: .9;
}
.rx-reserva-kpi.meta::before { background: linear-gradient(180deg, #16a34a, #86efac); }
.rx-reserva-kpi.marco::before { background: linear-gradient(180deg, #7c3aed, #c4b5fd); }
.rx-reserva-kpi.impacto::before { background: linear-gradient(180deg, #f97316, #fed7aa); }
.rx-reserva-kpi span {
display: block;
margin-bottom: 7px;
color: #64748b;
font-size: 11px;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.rx-reserva-kpi strong {
display: block;
color: #0f172a;
font-size: 22px;
font-weight: 950;
line-height: 1.05;
margin-bottom: 6px;
}
.rx-reserva-kpi small {
display: block;
color: #64748b;
font-size: 12px;
line-height: 1.35;
max-width: 220px;
}
.rx-reserva-kpi i {
position: absolute;
right: 16px;
top: 18px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(29,78,216,.10);
font-style: normal;
font-size: 20px;
}
.rx-reserva-layout {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr);
gap: 16px;
align-items: stretch;
margin-bottom: 16px;
}
.rx-reserva-journey-card,
.rx-reserva-mission-card,
.rx-reserva-choice-card,
.rx-reserva-explain-card,
.rx-reserva-achievements { border-radius: 20px; }
.rx-reserva-level,
.rx-reserva-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
border-radius: 999px;
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
font-size: 11px;
font-weight: 900;
letter-spacing: .02em;
}
.rx-reserva-status.ok { background: #ecfdf5; color: #15803d; border-color: #bbf7d0; }
.rx-reserva-status.warn { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.rx-reserva-progress-head {
display: grid;
grid-template-columns: 180px minmax(110px, .55fr) minmax(220px, 1fr);
gap: 16px;
align-items: center;
margin: 18px 0 14px;
}
.rx-reserva-progress-head span {
display: block;
color: #64748b;
font-size: 12px;
font-weight: 700;
margin-bottom: 4px;
}
.rx-reserva-progress-head strong,
.rx-reserva-pct {
color: var(--rx);
font-size: 25px;
font-weight: 950;
line-height: 1;
}
.rx-reserva-progress-head p {
margin: 0;
color: #64748b;
font-size: 12.5px;
line-height: 1.45;
text-align: right;
}
.rx-reserva-main-bar {
height: 12px;
margin: 0 0 22px;
background: #e5ebf5;
}
.rx-reserva-milestones {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.rx-milestone--habito b { background: #fff7ed; }
.rx-milestone--habito.done b { background: #dcfce7; }
.rx-milestone {
position: relative;
min-height: 128px;
padding: 15px 12px;
border: 1px solid #e2e8f0;
border-radius: 16px;
background: #fff;
text-align: center;
transition: .18s ease;
}
.rx-milestone b {
display: grid;
place-items: center;
width: 38px;
height: 38px;
margin: 0 auto 9px;
border-radius: 50%;
background: #f1f5f9;
font-size: 17px;
font-weight: 800;
}
.rx-milestone strong { display: block; color: #0f172a; font-size: 12.5px; font-weight: 900; margin-bottom: 4px; }
.rx-milestone span { display: block; color: #64748b; font-size: 11.5px; font-weight: 800; margin-bottom: 3px; }
.rx-milestone small { color: #94a3b8; font-size: 11px; }
.rx-milestone.done {
border-color: #bbf7d0;
background: linear-gradient(135deg, #f0fdf4, #ffffff);
box-shadow: 0 12px 24px rgba(22,163,74,.08);
}
.rx-milestone.done span,
.rx-milestone.done small { color: #15803d; }
.rx-milestone.current {
border-color: #bfdbfe;
background: linear-gradient(135deg, #eff6ff, #ffffff);
box-shadow: 0 12px 24px rgba(29,78,216,.08);
}
.rx-reserva-mission-card h3 {
margin: 14px 0 12px;
color: #0f172a;
font-size: 18px;
line-height: 1.3;
}
.rx-reserva-mission-bar {
height: 12px;
border-radius: 999px;
overflow: hidden;
background: #e5ebf5;
margin-bottom: 9px;
}
.rx-reserva-mission-bar div {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #16a34a, #22c55e);
transition: width .45s ease;
}
.rx-reserva-mission-meta {
display: flex;
justify-content: space-between;
align-items: center;
color: #15803d;
font-size: 13px;
font-weight: 900;
margin-bottom: 16px;
}
.rx-reserva-motivation {
display: flex;
gap: 12px;
align-items: center;
padding: 14px;
border-radius: 16px;
background: linear-gradient(135deg, #f0fdf4, #ffffff);
border: 1px solid #dcfce7;
}
.rx-reserva-motivation span { font-size: 28px; }
.rx-reserva-motivation p { margin: 0; color: #64748b; font-size: 12.5px; line-height: 1.45; }
.rx-reserva-motivation strong { color: #166534; }
.rx-reserva-controls-grid {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) minmax(260px, 1fr);
gap: 16px;
margin-bottom: 16px;
}
.rx-reserva-choice-card.active { border-color: #bfdbfe; background: linear-gradient(135deg, #eff6ff, #fff); }
.rx-switch-card {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 12px;
padding: 14px;
border: 1px solid #dbe7fb;
border-radius: 16px;
background: #fff;
cursor: pointer;
}
.rx-switch-card input { width: 20px; height: 20px; accent-color: var(--rx); }
.rx-switch-card b { display:block; color:#0f172a; font-size:18px; font-weight:950; margin-bottom:3px; }
.rx-switch-card small { display:block; color:#64748b; font-size:12px; line-height:1.35; }
.rx-reserva-choice-value {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
color: #64748b;
font-size: 12px;
font-weight: 800;
}
.rx-reserva-choice-value strong { color: var(--rx); font-size: 15px; }
.rx-reserva-manual-field { margin: 0; }
.rx-reserva-manual-field span { display:block; margin-bottom:8px; color:#64748b; font-size:12px; font-weight:800; }
.rx-reserva-manual-field input { height: 48px; border-radius: 14px; }
.rx-reserva-choice-card p { margin: 12px 0 0; color: #64748b; font-size: 12px; line-height: 1.45; }
/* ── RESERVA — bloco premium (reserva inicial + toggles) ──────── */
/* Card "Reserva que eu já tinha": seed pré-SRX, acento teal, sombra suave. */
.rx-reserva-seed-card {
display: flex;
align-items: center;
gap: 16px;
border: none;
border-left: 3px solid #1fa3a3;
border-radius: var(--radius-lg, 16px);
box-shadow: var(--rx-shadow-soft, 0 8px 20px rgba(15,23,42,.05));
padding: 16px 18px;
margin-bottom: 14px;
}
.rx-reserva-seed-icon {
flex-shrink: 0;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px;
background: #e1f5ee;
font-size: 22px;
}
.rx-reserva-seed-body { flex: 1; min-width: 0; }
.rx-reserva-seed-body strong { display: block; color: #0f172a; font-size: 14px; font-weight: 800; }
.rx-reserva-seed-body small { display: block; color: #64748b; font-size: 12px; line-height: 1.45; margin-top: 2px; }
.rx-reserva-seed-field { margin: 0; flex-shrink: 0; width: 140px; }
.rx-reserva-seed-field span { display: block; margin-bottom: 6px; color: #64748b; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.rx-reserva-seed-field input { height: 46px; border-radius: 12px; font-weight: 800; color: #0f6e56; }
/* Toggles premium: sombra no lugar de borda chapada, ícone-chip + pill de status. */
.rx-reserva-choice-card--premium {
border: none;
box-shadow: var(--rx-shadow-soft, 0 8px 20px rgba(15,23,42,.05));
border-left: 3px solid transparent;
transition: border-color .15s ease, box-shadow .15s ease;
}
.rx-reserva-choice-card--premium .rx-section-line { display: flex; align-items: center; gap: 9px; }
.rx-reserva-choice-ic {
width: 32px; height: 32px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 9px; background: #eef2f6; font-size: 17px;
}
.rx-reserva-choice-status { margin-left: auto; font-size: 11px; font-weight: 800; color: #94a3b8; }
/* Estado LIGADO (automática): acento teal + ícone-chip teal + status verde. */
.rx-reserva-choice-card--auto.active {
border-left-color: #1fa3a3;
background: #fff;
}
.rx-reserva-choice-card--auto.active .rx-reserva-choice-ic { background: #e1f5ee; color: #0f6e56; }
.rx-reserva-choice-card--auto.active .rx-reserva-choice-status { color: #0f6e56; }
.rx-reserva-choice-card--auto.active .rx-switch-card { border-color: #9fe1cb; background: #f3fbf8; }
.rx-reserva-choice-card--auto.active .rx-switch-card input { accent-color: #1fa3a3; }
@media (max-width: 640px) {
.rx-reserva-seed-card { flex-wrap: wrap; }
.rx-reserva-seed-field { width: 100%; }
}
/* ── RESERVA — trios alinhados (auto|manual|atual / meta|marco|impacto) ── */
.rx-reserva-trio {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
margin: 0 0 14px;
}
.rx-reserva-trio .rx-reserva-choice-card,
.rx-reserva-trio .rx-reserva-kpi { margin: 0; height: 100%; }
/* "Sua reserva atual" = card herói metálico teal (igual ao "Reservado" do dashboard). */
.rx-reserva-kpi--atual {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
border: none;
border-radius: var(--radius-lg, 16px);
padding: 18px 20px;
background: linear-gradient(135deg, #0e6e6e, #1fa3a3);
box-shadow: var(--rx-shadow-soft, 0 8px 20px rgba(15,23,42,.05));
}
.rx-reserva-kpi--atual::before { display: none; }
.rx-reserva-kpi--atual span { color: rgba(255,255,255,.82); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rx-reserva-kpi--atual strong { color: #fff; font-size: 26px; font-weight: 900; line-height: 1.05; }
.rx-reserva-kpi--atual small { color: rgba(255,255,255,.78); font-size: 11.5px; line-height: 1.35; max-width: none; }
@media (max-width: 900px) {
.rx-reserva-trio { grid-template-columns: 1fr; }
}
/* Bandeira da Jornada de proteção (engajamento). */
.rx-reserva-journey-flag { font-size: 16px; margin-right: 7px; }
/* Prefixo "R$" nos campos de reserva (decorativo; o valor digitado segue só número). */
.rx-input-money { position: relative; display: block; }
.rx-input-money .rx-money-prefix {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-weight: 800;
font-size: 13px;
pointer-events: none;
}
.rx-input-money input { padding-left: 36px !important; width: 100%; }
/* Reserva automática: checkbox vira CHAVE (switch). O fica oculto mas
funcional (clicável via label); o "trilho" + "botão" são desenhados num
dedicado — pseudo-elementos NÃO renderizam de forma confiável em . */
.rx-switch-card .rx-switch-input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.rx-switch-card .rx-switch-visual {
position: relative;
flex: 0 0 auto;
width: 46px;
height: 26px;
border-radius: 999px;
background: #cbd5e1;
cursor: pointer;
transition: background-color .2s ease;
}
.rx-switch-card .rx-switch-visual::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(15,23,42,.22);
transition: transform .2s cubic-bezier(.4,.1,.3,1);
}
.rx-switch-card .rx-switch-input:checked + .rx-switch-visual { background: #1fa3a3; }
.rx-switch-card .rx-switch-input:checked + .rx-switch-visual::after { transform: translateX(20px); }
.rx-switch-card .rx-switch-input:focus-visible + .rx-switch-visual { outline: 2px solid var(--rx); outline-offset: 2px; }
.rx-reserva-debt-bridge small {
display: block;
margin: 12px 0;
color: #64748b;
font-size: 12px;
font-weight: 800;
}
.rx-reserva-bottom-grid {
display: grid;
grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
gap: 16px;
}
.rx-reserva-explain-list,
.rx-achievement-list { display: grid; gap: 10px; }
.rx-reserva-explain-list div,
.rx-achievement-list div {
display: grid;
grid-template-columns: 38px 1fr;
gap: 10px;
align-items: center;
padding: 12px;
border: 1px solid #e2e8f0;
border-radius: 14px;
background: #fff;
}
.rx-reserva-explain-list b,
.rx-achievement-list b {
display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#eff6ff; font-size:17px;
grid-row: span 2;
}
.rx-reserva-explain-list strong,
.rx-achievement-list strong { color:#0f172a; font-size:13px; font-weight:950; }
.rx-reserva-explain-list span,
.rx-achievement-list span { color:#64748b; font-size:12px; line-height:1.35; }
.rx-achievement-list div.done { border-color:#bbf7d0; background:#f0fdf4; }
.rx-achievement-list div.done b { background:#dcfce7; }
@media (max-width: 1100px) {
.rx-reserva-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rx-reserva-layout,
.rx-reserva-controls-grid,
.rx-reserva-bottom-grid { grid-template-columns: 1fr; }
.rx-reserva-progress-head { grid-template-columns: 1fr; gap: 8px; }
.rx-reserva-progress-head p { text-align:left; }
}
@media (max-width: 720px) {
.rx-reserva-summary-grid { display:flex; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x mandatory; }
.rx-reserva-kpi { min-width: 245px; scroll-snap-align:start; }
.rx-reserva-milestones { grid-template-columns: 1fr 1fr; }
.rx-milestone { min-height: 112px; }
}
/* ─────────────────────────────────────────────
V2.2.22 — Dívidas & Parcelas V2 / amortização simples
───────────────────────────────────────────── */
.rx-debts-v2 .rx-debts-head { align-items:flex-start; gap:18px; }
.rx-debts-head-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.rx-debts-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0 16px; }
.rx-debt-kpi { position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; align-items:center; padding:18px; border:1px solid rgba(148,163,184,.22); border-radius:18px; background:rgba(255,255,255,.88); box-shadow:0 18px 45px rgba(15,23,42,.06); }
.rx-debt-kpi i { width:42px; height:42px; border-radius:16px; display:grid; place-items:center; background:#eef4ff; font-style:normal; grid-row:1/4; }
.rx-debt-kpi span { color:#64748b; font-weight:800; font-size:12px; letter-spacing:.02em; }
.rx-debt-kpi strong { color:#061839; font-size:22px; line-height:1.1; }
.rx-debt-kpi small { color:#64748b; font-weight:700; }
.rx-debts-main-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.95fr); gap:16px; align-items:stretch; }
.rx-debt-strategy-card, .rx-debt-summary-card, .rx-debt-list-card, .rx-debt-installments-card, .rx-debt-helper-card { border-radius:22px; }
.rx-debt-toggle-row { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:14px; border:1px solid #bfd4f7; border-radius:16px; background:linear-gradient(135deg,#f5f9ff,#fff); margin-top:14px; }
.rx-debt-toggle-row input { width:22px; height:22px; accent-color:#0f4bd8; }
.rx-debt-toggle-row span { display:flex; flex-direction:column; gap:3px; color:#0a2a5e; }
.rx-debt-toggle-row span strong { font-size:14px; }
.rx-debt-toggle-row span small { color:#64748b; font-weight:700; }
.rx-debt-toggle-row b { color:#0a2a5e; font-size:16px; white-space:nowrap; }
.rx-debt-priority-box { margin-top:14px; padding:14px; border:1px solid rgba(148,163,184,.28); border-radius:16px; background:#fff; }
.rx-debt-priority-box > span { display:block; color:#52627a; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.rx-debt-priority-box small { display:block; color:#64748b; font-weight:700; margin-top:10px; line-height:1.45; }
.rx-debt-segment { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #dbe4f0; border-radius:13px; overflow:hidden; background:#f8fafc; }
.rx-debt-segment button { border:0; padding:10px 8px; font-weight:900; color:#45546b; background:transparent; cursor:default; }
.rx-debt-segment button + button { border-left:1px solid #dbe4f0; }
.rx-debt-segment button.active { color:#fff; background:#0f4bd8; }
.rx-debt-impact-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; padding:14px; border:1px solid #bfd4f7; border-radius:16px; background:#f7fbff; }
.rx-debt-impact-grid div { display:flex; flex-direction:column; gap:4px; }
.rx-debt-impact-grid div + div { border-left:1px solid #dbe7fb; padding-left:12px; }
.rx-debt-impact-grid span { color:#64748b; font-weight:800; font-size:12px; }
.rx-debt-impact-grid strong { color:#0a2a5e; font-size:18px; }
.rx-debt-summary-card p { color:#64748b; font-weight:700; line-height:1.55; margin:6px 0 14px; }
.rx-debt-summary-list { display:grid; gap:0; border:1px solid #bfd4f7; border-radius:16px; background:#f7fbff; overflow:hidden; }
.rx-debt-summary-list div { display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; padding:12px 14px; }
.rx-debt-summary-list div + div { border-top:1px solid #dbe7fb; }
.rx-debt-summary-list b { font-size:18px; color:#0f4bd8; }
.rx-debt-summary-list span { color:#64748b; font-weight:800; }
.rx-debt-summary-list strong { color:#0f4bd8; text-align:right; }
.rx-debt-progress { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; margin-top:18px; color:#52627a; font-weight:800; }
.rx-debt-progress div { height:9px; background:#e6edf7; border-radius:999px; overflow:hidden; }
.rx-debt-progress i { display:block; height:100%; background:#0f4bd8; border-radius:999px; }
.rx-debts-lower-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.85fr); gap:16px; margin-top:16px; }
.rx-debt-note { margin:12px 0; }
.rx-debt-empty, .rx-empty-line { padding:16px; border:1px dashed #cbd5e1; border-radius:16px; color:#64748b; background:#f8fafc; }
.rx-debt-empty { display:flex; flex-direction:column; gap:4px; }
.rx-debt-empty strong { color:#0a2a5e; }
.rx-debt-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto 142px auto; gap:12px; align-items:center; padding:12px; border:1px solid #e5ebf3; border-radius:16px; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.035); margin-bottom:10px; }
.rx-debt-row.prioridade { border-color:#c8d9ff; background:linear-gradient(135deg,#f6f9ff,#fff); }
.rx-debt-row.quitada { opacity:.78; }
.rx-debt-row-icon { width:38px; height:38px; border-radius:14px; display:grid; place-items:center; background:#eef4ff; }
.rx-debt-row-main { min-width:0; display:flex; flex-direction:column; gap:5px; }
.rx-debt-row-main small { color:#64748b; font-weight:700; }
.rx-debt-row .dlabel-inp { width:100%; font-size:14px; font-weight:800; background:#fff; }
.rx-debt-row .dval-inp { width:100%; font-size:14px; font-weight:900; }
.rx-debt-row-meta { display:flex; align-items:center; justify-content:center; }
.rx-debt-status { display:inline-flex; align-items:center; justify-content:center; min-width:84px; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:900; background:#eef4ff; color:#0f4bd8; }
.rx-debt-status.prioridade, .rx-debt-status.foco { background:#fff4e5; color:#b45309; }
.rx-debt-status.quitada { background:#ecfdf3; color:#15803d; }
.rx-debt-row-actions { display:flex; align-items:center; justify-content:flex-end; }
.rx-debt-installments-list { display:grid; gap:10px; margin-top:12px; }
.rx-debt-installment { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:12px; border:1px solid #e5ebf3; border-radius:15px; background:#fff; }
.rx-debt-installment span { display:flex; flex-direction:column; gap:3px; min-width:0; color:#0a2a5e; font-weight:900; }
.rx-debt-installment span small { color:#64748b; font-weight:700; }
.rx-debt-installment b { color:#0f4bd8; background:#eef4ff; padding:6px 10px; border-radius:999px; font-size:12px; }
.rx-debt-installment strong { color:#061839; white-space:nowrap; }
.rx-debt-helper-card { margin-top:16px; display:flex; align-items:center; gap:12px; border-color:#bfd4f7; background:linear-gradient(135deg,#f5f9ff,#fff); }
.rx-debt-helper-card strong { color:#0a2a5e; white-space:nowrap; }
.rx-debt-helper-card span { color:#64748b; font-weight:700; }
@media (max-width: 980px) {
.rx-debts-kpi-grid, .rx-debts-main-grid, .rx-debts-lower-grid { grid-template-columns:1fr; }
.rx-debt-row { grid-template-columns:36px minmax(0,1fr); }
.rx-debt-row-meta, .rx-debt-row .dval-inp, .rx-debt-row-actions { grid-column:2; justify-self:stretch; }
.rx-debt-row-meta { justify-content:flex-start; }
.rx-debt-installment { grid-template-columns:1fr; }
.rx-debt-segment { grid-template-columns:1fr 1fr; }
.rx-debt-helper-card { align-items:flex-start; flex-direction:column; }
}
/* =============================================================
V2.2.23 — Revisão mobile geral das telas premium
Objetivo: adaptar as abas novas para celular sem alterar regras,
cálculos, persistência, billing, trial ou lógica financeira.
============================================================= */
/* Fase E: :root desta seção consolidado no :root base (00-base-core.css). */
@media (max-width: 820px) {
html, body { max-width: 100%; overflow-x: hidden; }
#app, .page, main, .content, .rx-page, .rx-main, .rx-shell-content { max-width: 100%; }
.page { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
/* Cabeçalhos premium: mais vertical e com ações quebrando corretamente */
.rx-page-head,
.rx-agenda-v2 .rx-agenda-page-head,
.rx-debts-v2 .rx-debts-head {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
margin-bottom: 14px !important;
}
.rx-page-head h2,
.rx-agenda-v2 .rx-agenda-page-head h2,
.rx-debts-v2 .rx-debts-head h2 {
font-size: clamp(22px, 7vw, 30px) !important;
line-height: 1.08 !important;
letter-spacing: -.65px !important;
}
.rx-page-head p,
.rx-agenda-v2 .rx-agenda-page-head p,
.rx-debts-v2 .rx-debts-head p {
font-size: 13px !important;
line-height: 1.45 !important;
max-width: 100% !important;
}
.rx-agenda-head-actions,
.rx-debts-head-actions {
width: 100% !important;
justify-content: flex-start !important;
overflow-x: auto;
flex-wrap: nowrap !important;
padding-bottom: 3px;
-webkit-overflow-scrolling: touch;
}
.rx-agenda-head-actions > *,
.rx-debts-head-actions > * { flex: 0 0 auto; }
/* Cards e grids gerais: nunca esmagar conteúdo */
.card,
.rx-card,
.rx-agenda-card,
.rx-calendar-panel,
.rx-agenda-day-panel,
.rx-agenda-list-block,
.rx-reserva-journey-card,
.rx-reserva-mission-card,
.rx-reserva-choice-card,
.rx-reserva-explain-card,
.rx-reserva-achievements,
.rx-debt-strategy-card,
.rx-debt-summary-card,
.rx-debt-list-card,
.rx-debt-installments-card,
.rx-debt-helper-card,
.rx-action-chat-card,
.rx-month-reading-card,
.rx-opportunity-card,
.rx-more-status-card,
.rx-more-section-card,
.rx-more-session-card,
.rx-plan-action-card {
border-radius: var(--rx-mobile-radius) !important;
padding: 14px !important;
}
/* Grids das telas novas viram fluxo vertical no mobile */
.rx-insights-v2-grid,
.rx-more-v2-grid,
.rx-reserva-layout,
.rx-reserva-controls-grid,
.rx-reserva-bottom-grid,
.rx-debts-main-grid,
.rx-debts-lower-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: var(--rx-mobile-gap) !important;
}
/* KPIs em carrossel suave: mantém leitura sem deixar a tela longa demais */
.rx-reserva-summary-grid,
.rx-debts-kpi-grid,
.rx-agenda-v2 .rx-agenda-stats {
display: flex !important;
gap: 10px !important;
overflow-x: auto !important;
padding: 1px 2px 8px !important;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.rx-reserva-kpi,
.rx-debt-kpi,
.rx-agenda-v2 .rx-agenda-stat {
flex: 0 0 min(78vw, 265px) !important;
min-width: min(78vw, 265px) !important;
scroll-snap-align: start;
}
.rx-debt-kpi { grid-template-columns: 40px 1fr !important; padding: 14px !important; }
.rx-debt-kpi strong,
.rx-reserva-kpi strong,
.rx-agenda-v2 .rx-agenda-stat strong { font-size: 20px !important; }
/* Chips, filtros e atalhos: rolagem horizontal sem quebra feia */
.rx-chip-scroll,
.rx-premium-list,
.rx-agenda-filters,
.rx-debt-segment {
overflow-x: auto !important;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
}
.rx-chip-scroll button,
.rx-premium-list span,
.rx-agenda-filter { flex: 0 0 auto !important; }
/* Insights e Mais: itens mais tocáveis */
.rx-reading-grid,
.rx-security-status-grid { grid-template-columns: 1fr !important; }
.rx-reading-item { min-height: auto !important; padding: 12px !important; }
.rx-action-plan-list li { padding-left: 42px !important; }
.rx-more-action-list button,
.rx-more-action-list a { min-height: 68px !important; }
.rx-more-session-card { display: grid !important; gap: 12px !important; }
.rx-more-session-card .danger { width: 100% !important; min-height: 46px; }
/* Agenda V2: calendário compacto, detalhe do dia abaixo e filtros acessíveis */
.rx-agenda-v2 .rx-agenda-layout { grid-template-columns: 1fr !important; gap: 12px !important; }
.rx-calendar-nav { width: 100%; justify-content: flex-start !important; overflow-x: auto; padding-bottom: 3px; }
.rx-agenda-v2 .rx-agenda-calendar {
gap: 5px !important;
overflow: visible !important;
}
.rx-agenda-v2 .rx-cal-day {
min-height: 68px !important;
padding: 7px 5px !important;
border-radius: 13px !important;
}
.rx-agenda-v2 .rx-cal-num { font-size: 12px !important; }
.rx-agenda-v2 .rx-cal-meta { font-size: 10px !important; line-height: 1.15 !important; }
.rx-agenda-v2 .rx-cal-count { font-size: 9.5px !important; padding: 2px 5px !important; }
.rx-agenda-day-summary { grid-template-columns: 1fr !important; }
.rx-agenda-day-summary div { border-left: 0 !important; border-top: 1px solid rgba(15,23,42,.07); }
.rx-agenda-day-summary div:first-child { border-top: 0 !important; }
.rx-agenda-v2 .rx-agenda-detail { grid-template-columns: 1fr !important; gap: 10px !important; }
.rx-agenda-v2 .rx-agenda-detail-side { align-items: flex-start !important; justify-content: space-between; flex-direction: row !important; flex-wrap: wrap !important; }
.rx-agenda-actions { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
.rx-agenda-actions button { width: 100% !important; }
.rx-agenda-v2 .venc-item { grid-template-columns: 1fr !important; align-items: start !important; }
.rx-agenda-v2 .venc-value { align-items: flex-start !important; }
/* Reserva gamificada: jornada legível e missões em pilha */
.rx-reserva-progress-head { grid-template-columns: 1fr !important; gap: 8px !important; }
.rx-reserva-progress-head p { text-align: left !important; }
.rx-reserva-milestones { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
.rx-milestone { min-height: 112px !important; padding: 10px !important; }
.rx-reserva-level,
.rx-reserva-status { max-width: 100%; white-space: normal !important; }
.rx-switch-card { grid-template-columns: auto 1fr !important; align-items: start !important; }
.rx-reserva-explain-list div,
.rx-achievement-list div { grid-template-columns: 34px 1fr !important; padding: 11px !important; }
/* Dívidas & Parcelas: prioridade clara sem tabela apertada */
.rx-debt-toggle-row { grid-template-columns: auto 1fr !important; gap: 10px !important; }
.rx-debt-toggle-row b { grid-column: 2; white-space: normal !important; }
.rx-debt-segment { display: grid !important; grid-template-columns: repeat(2, minmax(128px, 1fr)) !important; }
.rx-debt-segment button { min-height: 42px; }
.rx-debt-impact-grid { grid-template-columns: 1fr !important; }
.rx-debt-impact-grid div + div { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid #dbe7fb; padding-top: 10px; }
.rx-debt-summary-list div { grid-template-columns: 28px 1fr !important; }
.rx-debt-summary-list strong { grid-column: 2; text-align: left !important; }
.rx-debt-progress { grid-template-columns: 1fr !important; gap: 7px !important; }
.rx-debt-row { grid-template-columns: 38px minmax(0, 1fr) !important; gap: 10px !important; }
.rx-debt-row-icon { width: 36px !important; height: 36px !important; }
.rx-debt-row-meta,
.rx-debt-row .dval-inp,
.rx-debt-row-actions { grid-column: 2 !important; justify-self: stretch !important; }
.rx-debt-row-actions { justify-content: flex-start !important; gap: 8px; flex-wrap: wrap; }
.rx-debt-status { min-width: 0 !important; justify-content: flex-start !important; width: fit-content; }
.rx-debt-installment { grid-template-columns: 1fr !important; gap: 8px !important; }
.rx-debt-installment strong { white-space: normal !important; }
.rx-debt-helper-card { align-items: flex-start !important; flex-direction: column !important; }
.rx-debt-helper-card strong { white-space: normal !important; }
/* PDF/auditoria de fatura: bottom-sheet usável, tabela rolável e ações claras */
.rx-fatura-overlay { padding: 0 !important; align-items: flex-end !important; }
.rx-fatura-modal {
width: 100% !important;
max-width: 100% !important;
max-height: min(94vh, calc(100dvh - 10px)) !important;
border-radius: 24px 24px 0 0 !important;
}
.rx-fatura-head { padding: 16px 16px 10px !important; }
.rx-fatura-head h2 { font-size: 18px !important; line-height: 1.15 !important; }
.rx-fatura-body { padding: 12px 14px !important; overflow-x: hidden; }
.rx-fat-audit-panel { flex-direction: column !important; align-items: flex-start !important; gap: 9px !important; }
.rx-fat-summary-grid.compact,
.rx-fat-cat-grid.compact { grid-template-columns: 1fr 1fr !important; }
.rx-fat-table-wrap,
.rx-table-scroll,
.cartao-fatura-resumo {
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
.rx-fat-table-audit,
.rx-fat-table-editavel,
.cartao-fatura-resumo table { min-width: 620px; }
.rx-fat-table th:nth-child(4),
.rx-fat-table td:nth-child(4) {
min-width: 150px !important;
width: 150px !important;
}
.rx-fat-parc-edit { min-width: 122px !important; gap: 6px !important; }
.rx-fat-parc-edit input { width: 50px !important; min-width: 50px !important; font-size: 13px !important; }
.rx-fatura-actions {
position: sticky;
bottom: 0;
margin: 0 -14px -12px;
padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
background: linear-gradient(180deg, rgba(255,255,255,.86), #fff 32%);
border-top: 1px solid rgba(15,23,42,.08);
display: grid !important;
grid-template-columns: 1fr !important;
gap: 9px !important;
}
.rx-fatura-actions button { width: 100% !important; min-height: 44px; }
/* Tela de planos e billing: cards não estouram no celular */
.planos-modal { width: 100% !important; max-height: min(94vh, calc(100dvh - 10px)) !important; border-radius: 24px 24px 0 0 !important; }
.planos-grid,
.srx-planos-grid,
.billing-plan-grid { grid-template-columns: 1fr !important; }
.plan-card,
.srx-plan-card,
.billing-plan-card { min-width: 0 !important; }
}
@media (max-width: 520px) {
.page { padding-left: 10px !important; padding-right: 10px !important; }
.rx-agenda-v2 .rx-agenda-card,
.rx-calendar-panel,
.rx-agenda-day-panel,
.rx-agenda-list-block,
.rx-reserva-journey-card,
.rx-reserva-mission-card,
.rx-reserva-choice-card,
.rx-reserva-explain-card,
.rx-reserva-achievements,
.rx-debt-strategy-card,
.rx-debt-summary-card,
.rx-debt-list-card,
.rx-debt-installments-card,
.rx-debt-helper-card,
.rx-action-chat-card,
.rx-month-reading-card,
.rx-opportunity-card,
.rx-more-status-card,
.rx-more-section-card,
.rx-more-session-card,
.rx-plan-action-card {
padding: 12px !important;
border-radius: 16px !important;
}
.rx-reserva-kpi,
.rx-debt-kpi,
.rx-agenda-v2 .rx-agenda-stat { flex-basis: min(84vw, 248px) !important; min-width: min(84vw, 248px) !important; }
.rx-agenda-v2 .rx-cal-day { min-height: 60px !important; padding: 6px 3px !important; }
.rx-agenda-v2 .rx-cal-meta { font-size: 9px !important; }
.rx-agenda-v2 .rx-cal-count { display: none; }
.rx-reserva-milestones { grid-template-columns: 1fr !important; }
.rx-fat-summary-grid.compact,
.rx-fat-cat-grid.compact { grid-template-columns: 1fr !important; }
.rx-debt-segment { grid-template-columns: 1fr !important; }
}
/* =========================================================
V2.2.25 — Modal de dados do pagador / LGPD billing
========================================================= */
.payer-profile-modal{
position:fixed;
inset:0;
z-index:10050;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(10,18,32,.58);
backdrop-filter:blur(10px);
}
.payer-profile-card{
width:min(760px,96vw);
max-height:min(92vh,860px);
overflow:auto;
background:#fff;
border:1px solid rgba(15,23,42,.08);
border-radius:24px;
box-shadow:0 28px 90px rgba(15,23,42,.28);
padding:24px;
}
.payer-profile-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
}
.payer-profile-kicker{
display:inline-flex;
align-items:center;
gap:6px;
margin-bottom:8px;
padding:5px 10px;
border-radius:999px;
background:rgba(37,99,235,.08);
color:#1d4ed8;
font-size:.74rem;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}
.payer-profile-head h3{
margin:0;
color:#0f172a;
font-size:1.35rem;
letter-spacing:-.02em;
}
.payer-profile-head p{
margin:6px 0 0;
color:#64748b;
line-height:1.45;
}
.payer-profile-close{
width:38px;
height:38px;
border:none;
border-radius:14px;
background:#f1f5f9;
color:#334155;
font-size:1.35rem;
cursor:pointer;
}
.payer-profile-close:hover{ background:#e2e8f0; }
.payer-profile-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.payer-field{
display:flex;
flex-direction:column;
gap:7px;
min-width:0;
}
.payer-field-wide{ grid-column:1 / -1; }
.payer-field span{
color:#334155;
font-size:.84rem;
font-weight:750;
}
.payer-field em{
color:#94a3b8;
font-style:normal;
font-weight:600;
}
.payer-field input{
width:100%;
min-height:44px;
border:1px solid #dbe4ef;
border-radius:14px;
padding:10px 12px;
color:#0f172a;
background:#fbfdff;
outline:none;
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.payer-field input:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.10);
background:#fff;
}
.payer-field small{
color:#64748b;
font-size:.76rem;
line-height:1.35;
}
.payer-profile-note{
margin-top:14px;
padding:11px 13px;
border-radius:16px;
background:rgba(15,23,42,.04);
color:#475569;
font-size:.84rem;
line-height:1.45;
}
.payer-profile-note a{
color:#0a2a5e;
font-weight:800;
text-decoration:none;
border-bottom:1px solid rgba(10,42,94,.24);
}
.payer-profile-note a:hover{ border-bottom-color:#0a2a5e; }
.payer-profile-error{
margin-top:14px;
padding:11px 13px;
border-radius:16px;
background:rgba(239,68,68,.10);
color:#b91c1c;
font-weight:700;
font-size:.86rem;
}
.payer-profile-actions{
display:flex;
justify-content:flex-end;
align-items:center;
gap:10px;
margin-top:18px;
padding-top:16px;
border-top:1px solid rgba(148,163,184,.22);
}
.payer-profile-actions .btn{
min-height:44px;
border-radius:14px;
padding:0 16px;
}
@media (max-width: 720px){
.payer-profile-modal{
align-items:flex-end;
padding:0;
}
.payer-profile-card{
width:100%;
max-height:92vh;
border-radius:24px 24px 0 0;
padding:20px;
}
.payer-profile-grid{ grid-template-columns:1fr; }
.payer-field-wide{ grid-column:auto; }
.payer-profile-actions{
position:sticky;
bottom:0;
background:#fff;
padding-bottom:6px;
}
.payer-profile-actions .btn{ flex:1; }
}
/* V2.2.26 — Dívidas simples e Insights positivos */
.rx-debt-method-card{
padding:12px 14px;
border:1px solid #dbe7fb;
border-radius:14px;
background:linear-gradient(135deg,#f7fbff,#fff);
display:flex;
flex-direction:column;
gap:4px;
}
.rx-debt-method-card strong{ color:#0a2a5e; font-size:15px; }
.rx-debt-method-card small{ margin-top:0 !important; color:#64748b; font-weight:700; line-height:1.45; }
.rx-debt-status.ativa{ background:#eef4ff; color:#0f4bd8; }
.rx-debt-status.atencao{ background:#fff7ed; color:#b45309; }
.rx-debt-status.zerada{ background:#ecfdf3; color:#15803d; }
.rx-debt-row.zerada{ opacity:.74; }
.rx-debt-row.foco{ border-color:#bfdbfe; background:linear-gradient(135deg,#eff6ff,#fff); }
.rx-debt-row.atencao{ border-color:#fed7aa; background:linear-gradient(135deg,#fff7ed,#fff); }
@media (max-width: 720px){
.rx-debt-method-card{ padding:11px 12px; }
}
/* ─────────────────────────────────────────────
V2.2.28 — Ajuste fino Dívidas + Mais
───────────────────────────────────────────── */
.rx-more-action-list button,
.rx-more-action-list a {
grid-template-columns: 38px minmax(0, 1fr) !important;
align-items: center !important;
min-height: 76px !important;
}
.rx-more-action-list button > span,
.rx-more-action-list a > span {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
align-self: start !important;
}
.rx-more-action-list strong {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: end !important;
min-width: 0 !important;
white-space: normal !important;
}
.rx-more-action-list small {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: start !important;
min-width: 0 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
max-width: 52ch !important;
}
.rx-more-section-card {
overflow: visible !important;
}
.rx-more-v2-grid .rx-more-section-card {
min-width: 0;
}
.rx-debt-row.nova {
border-color: #93c5fd;
background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
}
.rx-debt-status.nova {
background: #dbeafe;
color: #1d4ed8;
}
.rx-debt-row-new {
animation: rxDebtNewPulse 1.3s ease-in-out 2;
box-shadow: 0 0 0 3px rgba(37,99,235,.16), 0 18px 42px rgba(37,99,235,.12) !important;
}
@keyframes rxDebtNewPulse {
0% { box-shadow: 0 0 0 0 rgba(37,99,235,.26), 0 10px 24px rgba(15,23,42,.035); }
70% { box-shadow: 0 0 0 8px rgba(37,99,235,0), 0 18px 42px rgba(37,99,235,.12); }
100% { box-shadow: 0 0 0 0 rgba(37,99,235,0), 0 10px 24px rgba(15,23,42,.035); }
}
@media (max-width: 820px) {
.rx-more-action-list button,
.rx-more-action-list a {
min-height: auto !important;
padding: 14px !important;
}
.rx-more-action-list small { max-width: none !important; }
}
/* =============================================================
V2.2.30 — Lapidação clean/premium: Reserva, Dívidas e Dashboard
============================================================= */
.sr-only {
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0,0,0,0) !important;
white-space:nowrap !important;
border:0 !important;
}
.rx-help-icon {
position: relative;
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 999px;
border: 1px solid #dbe7fb;
background: #f8fbff;
color: #0a2a5e;
font-size: 13px;
font-weight: 950;
cursor: help;
line-height: 1;
}
.rx-help-icon::after {
content: attr(data-tooltip);
position: absolute;
right: 0;
top: calc(100% + 8px);
z-index: 50;
width: min(280px, 70vw);
padding: 10px 12px;
border-radius: 12px;
background: #061839;
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1.35;
text-align: left;
box-shadow: 0 18px 40px rgba(15,23,42,.22);
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: .16s ease;
}
.rx-help-icon:hover::after,
.rx-help-icon:focus-visible::after { opacity: 1; transform: translateY(0); }
.rx-reserva-top-actions {
display: grid;
grid-template-columns: minmax(280px, .9fr) minmax(280px, .9fr);
gap: 14px;
margin: 18px 0 16px;
max-width: 900px;
}
.rx-reserva-choice-card--compact {
position: relative;
padding: 16px !important;
min-height: auto;
}
.rx-reserva-choice-card--compact .rx-section-line { margin-bottom: 10px; }
.rx-reserva-choice-card--compact .rx-help-icon {
position: absolute;
right: 14px;
bottom: 14px;
}
.rx-switch-card--compact { padding: 12px 14px; }
.rx-switch-card--compact b { font-size: 17px; }
.rx-switch-card--compact small strong { color: var(--rx); font-weight: 950; }
.rx-reserva-choice-card--compact .rx-reserva-manual-field input {
max-width: 220px;
font-weight: 900;
font-size: 18px;
}
.rx-reserva-floating-help {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 18;
}
.rx-achievement-toast {
position: fixed;
right: 18px;
bottom: 60px;
z-index: 60;
max-width: 320px;
padding: 12px 14px;
border-radius: 16px;
background: #ecfdf5;
color: #166534;
border: 1px solid #bbf7d0;
box-shadow: 0 20px 45px rgba(15,23,42,.18);
font-weight: 950;
font-size: 13px;
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: .22s ease;
}
.rx-achievement-toast.show { opacity: 1; transform: translateY(0); }
.rx-reserva-controls-grid,
.rx-reserva-bottom-grid,
.rx-reserva-debt-bridge,
.rx-reserva-explain-card,
.rx-reserva-achievements { display: none !important; }
.rx-debt-focus-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
margin: 0 0 16px;
border: 1px solid #dbe7fb;
border-radius: 18px;
background: rgba(255,255,255,.82);
box-shadow: 0 12px 28px rgba(15,23,42,.045);
}
.rx-debt-focus-strip div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rx-debt-focus-strip span {
color: #64748b;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
}
.rx-debt-focus-strip strong { color: var(--rx); font-weight: 950; }
.rx-debt-list-card .rx-section-line { align-items: center; }
.rx-debt-list-card .rx-section-line .rx-help-icon { margin-left: 8px; }
.rx-debt-row-main small.rx-debt-row-hint { font-size: 11.5px; }
.rx-debt-row { grid-template-columns: 42px minmax(0, 1.2fr) auto 150px auto; }
.rx-debt-row .dlabel-inp,
.rx-debt-row .dval-inp { min-height: 42px; }
.rx-debt-helper-card,
.rx-debts-main-grid,
.rx-debt-strategy-card,
.rx-debt-summary-card,
.rx-debt-note { display: none !important; }
.rx-reserve-mini-progress {
min-width: 240px;
display: grid !important;
grid-template-columns: auto auto;
grid-template-rows: auto 8px;
gap: 5px 10px;
align-items: center;
justify-content: start;
border: 1px solid #dbe7fb !important;
background: #fff !important;
color: #0a2a5e !important;
padding: 12px 16px !important;
border-radius: 14px !important;
}
.rx-reserve-mini-progress span {
color: #64748b;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
}
.rx-reserve-mini-progress strong { color: var(--rx); font-size: 18px; font-weight: 950; }
.rx-reserve-mini-progress i {
grid-column: 1 / -1;
display: block;
width: 100%;
height: 8px;
border-radius: 999px;
background: #e5ebf5;
overflow: hidden;
}
.rx-reserve-mini-progress em {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #0f4bd8, #22c55e);
transition: width .35s ease;
}
@media (max-width: 980px) {
.rx-reserva-top-actions { grid-template-columns: 1fr; max-width: none; }
.rx-reserve-mini-progress { min-width: 220px; }
.rx-debt-focus-strip { align-items: flex-start; }
.rx-debt-focus-strip div { flex-direction: column; align-items: flex-start; gap: 2px; }
}
@media (max-width: 640px) {
.rx-reserva-floating-help { right: 12px; bottom: 12px; }
.rx-achievement-toast { right: 12px; left: 12px; bottom: 54px; max-width: none; }
.rx-reserve-mini-progress { min-width: 75vw; }
}
/* =============================================================
V2.2.31 — Polimento premium: alinhamento, reserva e ajuda discreta
============================================================= */
/* Fase E: :root desta seção consolidado no :root base (00-base-core.css). */
/* Ajuda premium: discreta, no canto, sem “?” grosseiro */
.rx-help-icon{
width:22px !important;
height:22px !important;
min-width:22px !important;
border-radius:999px !important;
border:1px solid rgba(10,42,94,.16) !important;
background:rgba(255,255,255,.82) !important;
color:#64748b !important;
font-size:11px !important;
font-family:Georgia, 'Times New Roman', serif !important;
font-weight:900 !important;
line-height:1 !important;
box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
opacity:.78;
}
.rx-help-icon:hover,
.rx-help-icon:focus-visible{
opacity:1;
color:var(--srx-premium-navy) !important;
border-color:rgba(10,42,94,.28) !important;
background:#fff !important;
}
.rx-help-icon::after{
border-radius:14px !important;
background:#071b41 !important;
font-family:inherit !important;
font-size:11.5px !important;
font-weight:650 !important;
line-height:1.45 !important;
letter-spacing:0 !important;
}
.rx-reserva-floating-help{ display:none !important; }
/* "i" de ajuda da Reserva: círculo limpo do tamanho da palavra "Ativa" (~16px),
nunca esticado em flex (era stadium vertical). */
.rx-reserva-seed-card .rx-help-icon,
.rx-reserva-choice-card .rx-help-icon {
box-sizing: border-box !important;
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
max-height: 16px !important;
aspect-ratio: 1 / 1 !important;
align-self: center !important;
flex: 0 0 auto !important;
padding: 0 !important;
font-size: 9px !important;
line-height: 1 !important;
border: 1px solid rgba(10,42,94,.18) !important;
border-radius: 50% !important;
box-shadow: none !important;
}
.rx-reserva-seed-card .rx-help-icon { margin-left: 10px; }
/* Dashboard — reserva compacta com aparência nativa, premium e alinhada */
.rx-quick-actions{ align-items:stretch; }
.rx-quick-actions button{ min-height:54px; }
.rx-reserve-mini-progress{
min-width:290px !important;
min-height:54px !important;
padding:10px 16px !important;
grid-template-columns:1fr auto !important;
grid-template-rows:auto 6px !important;
align-content:center !important;
gap:7px 12px !important;
border-radius:16px !important;
border:1px solid rgba(10,42,94,.15) !important;
border-left:4px solid var(--srx-premium-blue) !important;
background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%) !important;
box-shadow:0 14px 32px rgba(15,23,42,.07) !important;
}
.rx-reserve-mini-progress span{
color:#52627a !important;
font-size:10.8px !important;
letter-spacing:.055em !important;
line-height:1.1 !important;
}
.rx-reserve-mini-progress strong{
color:var(--srx-premium-navy) !important;
font-size:18px !important;
line-height:1 !important;
display:flex;
align-items:baseline;
gap:3px;
}
.rx-reserve-mini-progress strong::after{
content:'concluída';
color:#64748b;
font-size:10px;
font-weight:850;
letter-spacing:.02em;
}
.rx-reserve-mini-progress i{
height:6px !important;
background:#e8eef7 !important;
box-shadow: inset 0 0 0 1px rgba(10,42,94,.04);
}
.rx-reserve-mini-progress em{
background:linear-gradient(90deg,var(--srx-premium-navy),#1d4ed8) !important;
}
/* Reserva — cards de ação no topo alinhados e com linguagem premium */
.rx-reserva-top-actions{
max-width:none !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
gap:16px !important;
margin:18px 0 18px !important;
}
.rx-reserva-choice-card--compact{
min-height:132px !important;
padding:18px 20px !important;
border-radius:22px !important;
background:rgba(255,255,255,.92) !important;
border:1px solid rgba(148,163,184,.22) !important;
box-shadow:0 18px 44px rgba(15,23,42,.065) !important;
}
.rx-reserva-choice-card--compact.active{
border-color:rgba(10,42,94,.34) !important;
border-left:4px solid var(--srx-premium-blue) !important;
background:linear-gradient(135deg,#fff 0%,#f5f8ff 100%) !important;
}
.rx-reserva-choice-card--compact .rx-section-line{
margin-bottom:12px !important;
padding-right:28px;
}
.rx-reserva-choice-card--compact .rx-section-line strong{
color:#061839 !important;
font-size:15px !important;
letter-spacing:0 !important;
}
.rx-reserva-choice-card--compact .rx-section-line span{
padding:5px 9px;
border-radius:999px;
background:#eef4ff;
color:var(--srx-premium-navy);
font-size:10.5px;
font-weight:900;
}
.rx-reserva-choice-card--compact .rx-help-icon{
right:18px !important;
top:18px !important;
bottom:auto !important;
}
.rx-switch-card--compact{
border:1px solid rgba(10,42,94,.16) !important;
background:#fff !important;
border-radius:18px !important;
padding:13px 15px !important;
min-height:70px;
}
.rx-switch-card--compact input{
width:20px !important;
height:20px !important;
accent-color:var(--srx-premium-navy) !important;
}
.rx-switch-card--compact b{
color:var(--srx-premium-navy) !important;
font-size:17px !important;
letter-spacing:-.01em;
}
.rx-switch-card--compact small{
color:#64748b !important;
font-size:12px !important;
}
.rx-switch-card--compact small strong{ color:var(--srx-premium-navy) !important; }
.rx-reserva-choice-card--compact .rx-reserva-manual-field span{
color:#64748b;
font-size:11.5px;
font-weight:900;
letter-spacing:.02em;
text-transform:uppercase;
}
.rx-reserva-choice-card--compact .rx-reserva-manual-field input{
height:54px !important;
max-width:260px !important;
border-radius:18px !important;
border:1px solid rgba(10,42,94,.16) !important;
color:var(--srx-premium-navy) !important;
background:#fff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.rx-reserva-choice-card--compact .rx-reserva-manual-field input:focus{
border-color:rgba(10,42,94,.42) !important;
box-shadow:0 0 0 4px rgba(10,42,94,.08) !important;
}
/* Reserva — encaixe geral e menos peso visual */
.rx-reserva-summary-grid{ gap:14px !important; }
.rx-reserva-kpi,
.rx-reserva-journey-card,
.rx-reserva-mission-card{
border-color:rgba(148,163,184,.22) !important;
box-shadow:0 18px 44px rgba(15,23,42,.06) !important;
}
.rx-reserva-level,
.rx-reserva-status{
font-size:10.8px !important;
padding:6px 9px !important;
}
.rx-reserva-motivation{
background:linear-gradient(135deg,#f7fff9,#fff) !important;
}
.rx-achievement-toast{
bottom:26px !important;
border-radius:18px !important;
box-shadow:0 24px 55px rgba(15,23,42,.20) !important;
}
/* Dívidas — dashboard clean, sem aparência de manual */
.rx-debt-focus-strip{
padding:11px 14px !important;
border-radius:18px !important;
border-left:4px solid var(--srx-premium-blue) !important;
background:linear-gradient(135deg,#fff,#f8fbff) !important;
}
.rx-debt-focus-strip .rx-help-icon{ margin-left:auto; }
.rx-debt-list-card .rx-section-line .rx-help-icon{ margin-left:auto !important; }
.rx-debt-row{
border-radius:18px !important;
border-color:rgba(148,163,184,.22) !important;
box-shadow:0 10px 28px rgba(15,23,42,.045) !important;
}
.rx-debt-row-icon{
background:#f1f5ff !important;
color:var(--srx-premium-navy) !important;
font-size:14px !important;
}
.rx-debt-status{
border-radius:999px !important;
padding:8px 12px !important;
font-size:11px !important;
letter-spacing:.01em;
}
.rx-debt-row-main small.rx-debt-row-hint{
color:#64748b !important;
font-weight:750 !important;
}
.rx-debt-row .dlabel-inp,
.rx-debt-row .dval-inp{
border-radius:14px !important;
border-color:rgba(148,163,184,.26) !important;
}
@media (max-width: 980px){
.rx-reserva-top-actions{ grid-template-columns:1fr !important; }
.rx-reserve-mini-progress{ min-width:220px !important; }
}
@media (max-width: 640px){
.rx-reserve-mini-progress{
min-width:78vw !important;
grid-template-columns:1fr auto !important;
}
.rx-reserva-choice-card--compact{ min-height:auto !important; }
}
/* =============================================================
V2.2.32 — Densidade Premium Global
Objetivo: reduzir blocos grandes e criar uma sensação de produto
premium, denso e confortável, sem alterar regras financeiras.
============================================================= */
@media (min-width: 821px) {
.ctn {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
.rx-page-head {
margin-bottom: 16px !important;
}
.rx-page-head h2,
.rx-agenda-v2 .rx-agenda-page-head h2,
.rx-debts-v2 .rx-debts-head h2 {
font-size: 26px !important;
line-height: 1.08 !important;
letter-spacing: -.45px !important;
}
.rx-page-head p,
.rx-agenda-v2 .rx-agenda-page-head p,
.rx-debts-v2 .rx-debts-head p {
font-size: 13px !important;
line-height: 1.45 !important;
max-width: 760px !important;
}
.rx-page-kicker,
.rx-card-kicker {
font-size: 10.5px !important;
letter-spacing: .08em !important;
}
.card,
.rx-agenda-card,
.rx-calendar-panel,
.rx-agenda-day-panel,
.rx-agenda-list-block,
.rx-reserva-journey-card,
.rx-reserva-mission-card,
.rx-reserva-choice-card,
.rx-debt-list-card,
.rx-debt-installments-card,
.rx-more-status-card,
.rx-more-section-card,
.rx-more-session-card,
.rx-action-chat-card,
.rx-month-reading-card,
.rx-opportunity-card,
.rx-plan-action-card {
border-radius: 18px !important;
padding: 14px 16px !important;
box-shadow: 0 12px 30px rgba(15,23,42,.052) !important;
}
.stats,
.rx-reserva-summary-grid,
.rx-debts-kpi-grid,
.rx-agenda-stats {
gap: 12px !important;
margin-bottom: 14px !important;
}
.stat,
.rx-reserva-kpi,
.rx-debt-kpi,
.rx-agenda-stat {
min-height: 84px !important;
padding: 14px 15px !important;
border-radius: 17px !important;
}
.stat::after {
width: 74px !important;
height: 74px !important;
right: -30px !important;
top: -30px !important;
}
.slabel,
.rx-reserva-kpi span,
.rx-debt-kpi span,
.rx-agenda-stat span {
font-size: 10px !important;
margin-bottom: 6px !important;
}
.sval,
.rx-reserva-kpi strong,
.rx-debt-kpi strong,
.rx-agenda-stat strong {
font-size: 19px !important;
line-height: 1.1 !important;
}
.rx-reserva-kpi small,
.rx-debt-kpi small,
.rx-agenda-stat small {
font-size: 11px !important;
line-height: 1.25 !important;
}
.rx-reserva-kpi i,
.rx-debt-kpi i {
width: 36px !important;
height: 36px !important;
border-radius: 14px !important;
font-size: 16px !important;
right: 14px !important;
top: 14px !important;
}
.rx-quick-actions {
gap: 8px !important;
margin: -2px 0 14px !important;
}
.rx-quick-actions button,
.rx-soft-action,
.rx-primary-action,
.rx-soft-action-link {
min-height: 46px !important;
padding: 9px 13px !important;
border-radius: 13px !important;
font-size: 12px !important;
}
.rx-reserve-mini-progress {
min-width: 250px !important;
min-height: 46px !important;
padding: 8px 13px !important;
grid-template-rows: auto 5px !important;
gap: 5px 9px !important;
border-radius: 13px !important;
}
.rx-reserve-mini-progress span { font-size: 9.8px !important; }
.rx-reserve-mini-progress strong { font-size: 16px !important; }
.rx-reserve-mini-progress strong::after { font-size: 9px !important; }
.rx-reserve-mini-progress i { height: 5px !important; }
/* Reserva: topo de ações e jornada mais densos, mantendo destaque */
.rx-reserva-top-actions {
gap: 12px !important;
margin: 14px 0 14px !important;
}
.rx-reserva-choice-card--compact {
min-height: 104px !important;
padding: 14px 16px !important;
border-radius: 18px !important;
}
.rx-reserva-choice-card--compact .rx-section-line {
margin-bottom: 8px !important;
padding-right: 24px !important;
}
.rx-reserva-choice-card--compact .rx-section-line strong { font-size: 14px !important; }
.rx-reserva-choice-card--compact .rx-section-line span {
padding: 4px 8px !important;
font-size: 9.8px !important;
}
.rx-switch-card--compact {
min-height: 58px !important;
padding: 10px 12px !important;
border-radius: 15px !important;
gap: 10px !important;
}
.rx-switch-card--compact input {
width: 18px !important;
height: 18px !important;
}
.rx-switch-card--compact b { font-size: 15px !important; }
.rx-switch-card--compact small { font-size: 11px !important; }
.rx-reserva-choice-card--compact .rx-reserva-manual-field span {
margin-bottom: 6px !important;
font-size: 10px !important;
}
.rx-reserva-choice-card--compact .rx-reserva-manual-field input {
height: 44px !important;
max-width: 220px !important;
border-radius: 14px !important;
font-size: 16px !important;
}
.rx-help-icon {
width: 19px !important;
height: 19px !important;
min-width: 19px !important;
font-size: 10px !important;
box-shadow: none !important;
}
.rx-reserva-choice-card--compact .rx-help-icon {
top: 14px !important;
right: 14px !important;
}
.rx-reserva-layout {
gap: 12px !important;
margin-bottom: 14px !important;
}
.rx-reserva-progress-head {
grid-template-columns: 155px 90px minmax(180px,1fr) !important;
gap: 12px !important;
margin: 12px 0 10px !important;
}
.rx-reserva-progress-head span { font-size: 11px !important; }
.rx-reserva-progress-head strong,
.rx-reserva-pct { font-size: 22px !important; }
.rx-reserva-progress-head p { font-size: 11.5px !important; }
.rx-reserva-main-bar {
height: 9px !important;
margin-bottom: 14px !important;
}
.rx-reserva-milestones {
gap: 10px !important;
}
.rx-milestone {
min-height: 104px !important;
padding: 12px 10px !important;
border-radius: 14px !important;
}
.rx-milestone b {
width: 32px !important;
height: 32px !important;
margin-bottom: 7px !important;
font-size: 14px !important;
}
.rx-milestone strong { font-size: 11.5px !important; }
.rx-milestone span { font-size: 10.5px !important; }
.rx-milestone small { font-size: 10px !important; }
.rx-reserva-mission-card h3 {
font-size: 16px !important;
margin: 10px 0 10px !important;
}
.rx-reserva-mission-bar {
height: 9px !important;
margin-bottom: 8px !important;
}
.rx-reserva-mission-meta {
font-size: 12px !important;
margin-bottom: 11px !important;
}
.rx-reserva-motivation {
padding: 11px 12px !important;
border-radius: 14px !important;
gap: 10px !important;
}
.rx-reserva-motivation span { font-size: 22px !important; }
.rx-reserva-motivation p { font-size: 11.5px !important; }
/* Dívidas: linhas e cards com densidade de dashboard, não de formulário pesado */
.rx-debts-head-actions { gap: 8px !important; }
.rx-debt-focus-strip {
padding: 9px 12px !important;
margin-bottom: 12px !important;
border-radius: 15px !important;
}
.rx-debt-focus-strip span { font-size: 10px !important; }
.rx-debt-focus-strip strong { font-size: 13px !important; }
.rx-debts-lower-grid {
gap: 12px !important;
margin-top: 12px !important;
}
.rx-debt-list-card .rx-section-line,
.rx-debt-installments-card .rx-section-line {
margin-bottom: 10px !important;
}
.rx-debt-note,
.rx-debt-empty,
.rx-empty-line {
padding: 11px 12px !important;
border-radius: 13px !important;
font-size: 12px !important;
}
.rx-debt-row {
grid-template-columns: 32px minmax(0,1.1fr) auto 124px auto !important;
gap: 9px !important;
padding: 9px 10px !important;
border-radius: 14px !important;
margin-bottom: 8px !important;
}
.rx-debt-row-icon {
width: 30px !important;
height: 30px !important;
border-radius: 11px !important;
font-size: 11px !important;
}
.rx-debt-row-main { gap: 3px !important; }
.rx-debt-row-main small.rx-debt-row-hint { font-size: 10px !important; line-height: 1.2 !important; }
.rx-debt-row .dlabel-inp,
.rx-debt-row .dval-inp {
min-height: 34px !important;
height: 34px !important;
border-radius: 11px !important;
font-size: 12.5px !important;
padding: 6px 9px !important;
}
.rx-debt-status {
min-width: 70px !important;
padding: 6px 9px !important;
font-size: 10px !important;
}
.rx-debt-installments-list {
gap: 8px !important;
margin-top: 8px !important;
}
.rx-debt-installment {
padding: 9px 10px !important;
border-radius: 13px !important;
gap: 9px !important;
}
.rx-debt-installment span { font-size: 12.5px !important; }
.rx-debt-installment span small { font-size: 10.5px !important; }
.rx-debt-installment b { padding: 5px 8px !important; font-size: 10.5px !important; }
.rx-debt-installment strong { font-size: 12.5px !important; }
/* Agenda: compacta no desktop sem perder legibilidade */
.rx-agenda-card { padding: 14px !important; }
.rx-agenda-stat { min-height: 78px !important; }
.rx-agenda-layout { gap: 12px !important; }
.rx-calendar-panel { padding: 13px !important; }
.rx-agenda-day-panel { padding: 13px !important; top: 78px !important; }
.rx-cal-day {
min-height: 82px !important;
padding: 10px !important;
border-radius: 15px !important;
}
.rx-agenda-detail {
padding: 10px 12px !important;
border-radius: 14px !important;
}
.rx-agenda-pay,
.rx-agenda-link { min-height: 36px !important; padding: 8px 12px !important; }
/* Mais/Insights: reduzir altura dos blocos sem quebrar legibilidade */
.rx-more-action-list button,
.rx-more-action-list a {
min-height: 78px !important;
padding: 12px 14px !important;
border-radius: 14px !important;
}
.rx-more-action-list span {
width: 32px !important;
height: 32px !important;
border-radius: 12px !important;
font-size: 14px !important;
}
.rx-more-action-list strong { font-size: 13px !important; }
.rx-more-action-list small { font-size: 11.5px !important; line-height: 1.35 !important; }
.rx-reading-item { padding: 12px !important; border-radius: 14px !important; }
.rx-action-plan-list li { padding: 12px 14px !important; border-radius: 14px !important; }
}
@media (max-width: 820px) {
/* Mobile mantém toque confortável, mas reduz respiro excessivo. */
.card,
.rx-reserva-journey-card,
.rx-reserva-mission-card,
.rx-reserva-choice-card,
.rx-debt-list-card,
.rx-debt-installments-card,
.rx-agenda-card,
.rx-calendar-panel,
.rx-agenda-day-panel,
.rx-agenda-list-block {
padding: 12px !important;
border-radius: 16px !important;
}
.rx-reserva-kpi,
.rx-debt-kpi,
.rx-agenda-stat {
min-height: 82px !important;
padding: 12px !important;
border-radius: 16px !important;
}
.rx-reserva-choice-card--compact {
min-height: auto !important;
padding: 13px !important;
}
.rx-reserva-choice-card--compact .rx-help-icon {
top: 12px !important;
right: 12px !important;
}
.rx-reserva-progress-head { margin: 10px 0 9px !important; }
.rx-milestone { min-height: 96px !important; padding: 10px 8px !important; }
.rx-debt-row {
padding: 10px !important;
gap: 8px !important;
border-radius: 14px !important;
}
.rx-debt-row .dlabel-inp,
.rx-debt-row .dval-inp {
min-height: 40px !important;
height: 40px !important;
}
.rx-cal-day { min-height: 76px !important; border-radius: 14px !important; }
}
/* =============================================================
V2.2.33 — Aba Mais premium compacta
Central de conta, suporte e privacidade com menor altura visual.
============================================================= */
.rx-more-premium .rx-page-head {
margin-bottom: 14px !important;
}
.rx-more-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 18px 20px !important;
margin-bottom: 16px;
border: 1px solid rgba(13,53,128,.10);
background:
radial-gradient(circle at 100% 0%, rgba(29,78,216,.055), transparent 32%),
linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
}
.rx-more-hero-main h3 {
margin: 2px 0 4px;
color: #071b3e;
font-size: 17px;
font-weight: 950;
letter-spacing: -.35px;
}
.rx-more-hero-main p {
margin: 0;
color: #64748b;
font-size: 12px;
font-weight: 650;
}
.rx-more-status-badges {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.rx-more-status-badges span {
display: inline-flex;
align-items: center;
min-height: 30px;
border-radius: 999px;
padding: 7px 11px;
border: 1px solid #dbeafe;
background: #eff6ff;
color: #0a2a5e;
font-size: 11px;
font-weight: 900;
white-space: nowrap;
}
.rx-more-status-badges span:first-child {
border-color: #bbf7d0;
background: #f0fdf4;
color: #15803d;
}
.rx-more-premium-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
gap: 16px;
align-items: start;
}
.rx-more-panel {
padding: 18px !important;
min-width: 0;
background:
radial-gradient(circle at 100% 0%, rgba(29,78,216,.045), transparent 34%),
#fff !important;
}
.rx-more-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.rx-more-panel-head h3 {
margin: 2px 0 0;
color: #071b3e;
font-size: 15px;
font-weight: 950;
letter-spacing: -.28px;
}
.rx-more-quick-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.rx-more-quick-grid button,
.rx-more-privacy-list button,
.rx-more-privacy-list a {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 11px;
align-items: center;
min-height: 64px;
width: 100%;
border: 1px solid #e2e8f0;
border-radius: 16px;
background: rgba(255,255,255,.92);
color: #0f172a;
font-family: inherit;
text-align: left;
text-decoration: none;
padding: 12px;
cursor: pointer;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.rx-more-quick-grid button {
grid-template-columns: 36px minmax(0, 1fr);
}
.rx-more-quick-grid button:hover,
.rx-more-privacy-list button:hover,
.rx-more-privacy-list a:hover {
transform: translateY(-1px);
border-color: #bfdbfe;
background: #fff;
box-shadow: 0 12px 28px rgba(15,23,42,.055);
}
.rx-more-quick-grid button > span,
.rx-more-privacy-list button > span,
.rx-more-privacy-list a > span {
width: 36px;
height: 36px;
border-radius: 14px;
display: grid;
place-items: center;
background: #eff6ff;
color: #0a2a5e;
font-size: 14px;
}
.rx-more-quick-grid strong,
.rx-more-privacy-list strong {
display: block;
color: #071b3e;
font-size: 13px;
font-weight: 950;
letter-spacing: -.12px;
}
.rx-more-quick-grid small,
.rx-more-privacy-list small {
display: block;
margin-top: 2px;
color: #64748b;
font-size: 11px;
line-height: 1.25;
font-weight: 700;
}
.rx-more-privacy-list {
display: grid;
gap: 10px;
}
.rx-more-privacy-list em {
color: #1d4ed8;
font-size: 11px;
font-style: normal;
font-weight: 950;
white-space: nowrap;
}
.rx-more-session-slim {
margin-top: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 16px 18px !important;
border: 1px solid #fecaca !important;
background: linear-gradient(135deg, #fff 0%, #fff7f7 100%) !important;
}
.rx-more-session-slim strong {
display: block;
margin-top: 2px;
color: #991b1b;
font-size: 15px;
font-weight: 950;
}
.rx-more-session-slim small {
display: block;
margin-top: 2px;
color: #64748b;
font-size: 11.5px;
font-weight: 650;
}
.rx-more-session-slim .danger {
min-height: 40px;
border: 1px solid #fecaca;
background: #fee2e2;
color: #991b1b;
border-radius: 14px;
padding: 10px 16px;
font-family: inherit;
font-size: 12px;
font-weight: 950;
cursor: pointer;
}
@media (max-width: 1180px) and (min-width: 821px) {
.rx-more-premium-grid { grid-template-columns: 1fr; }
.rx-more-hero { align-items: flex-start; flex-direction: column; }
.rx-more-status-badges { justify-content: flex-start; }
}
@media (max-width: 820px) {
.rx-more-hero,
.rx-more-panel,
.rx-more-session-slim { padding: 14px !important; border-radius: 18px !important; }
.rx-more-hero { display: grid; gap: 12px; }
.rx-more-status-badges { justify-content: flex-start; gap: 7px; }
.rx-more-status-badges span { min-height: 28px; padding: 6px 9px; font-size: 10.5px; }
.rx-more-premium-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.rx-more-quick-grid { grid-template-columns: 1fr; }
.rx-more-quick-grid button,
.rx-more-privacy-list button,
.rx-more-privacy-list a { min-height: 58px; border-radius: 15px; }
.rx-more-session-slim { flex-direction: column; align-items: stretch; }
.rx-more-session-slim .danger { width: 100%; min-height: 44px; }
}
/* =============================================================
V2.2.35 — Correção de sobreposição nos Insights
Mantém a densidade premium sem deixar o número do passo invadir o texto.
============================================================= */
.rx-action-plan-list li {
position: relative !important;
padding: 12px 14px 12px 46px !important;
min-height: 48px !important;
}
.rx-action-plan-list li::before {
left: 14px !important;
top: 12px !important;
width: 22px !important;
height: 22px !important;
line-height: 1 !important;
z-index: 1 !important;
}
.rx-action-plan-list strong,
.rx-action-plan-list span {
min-width: 0 !important;
overflow-wrap: anywhere;
}
@media (max-width: 820px) {
.rx-action-plan-list li {
padding: 12px 12px 12px 44px !important;
min-height: 50px !important;
}
.rx-action-plan-list li::before {
left: 12px !important;
top: 12px !important;
}
}
/* =========================================================
V2.2.36 — Hotfix conversão: checkout progressivo + agenda premium
========================================================= */
.payer-cep-field { grid-column: span 1; }
.payer-address-field { display: none; animation: payerAddressIn .18s ease both; }
.payer-address-field.is-visible { display: flex; }
.payer-address-open .payer-address-field.is-visible { display: flex; }
.payer-manual-address {
align-self: end;
min-height: 44px;
border: 1px solid rgba(10,42,94,.14);
border-radius: 14px;
background: #fff;
color: var(--rx, #0a2a5e);
font-family: inherit;
font-size: .82rem;
font-weight: 800;
cursor: pointer;
padding: 10px 12px;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.payer-manual-address:hover {
transform: translateY(-1px);
border-color: rgba(10,42,94,.28);
box-shadow: 0 12px 28px rgba(10,42,94,.08);
}
.payer-address-status {
grid-column: 1 / -1;
padding: 10px 12px;
border-radius: 14px;
background: rgba(26,122,74,.08);
color: #166534;
font-size: .82rem;
font-weight: 800;
}
.payer-address-status.erro {
background: rgba(239,68,68,.10);
color: #b91c1c;
}
.payer-profile-note-compact {
display: flex;
align-items: center;
gap: 6px;
background: rgba(10,42,94,.045);
border: 1px solid rgba(10,42,94,.07);
}
@keyframes payerAddressIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.rx-agenda-v2 .rx-agenda-stats-premium {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rx-agenda-v2 .rx-agenda-layout {
grid-template-columns: minmax(0, 1.55fr) minmax(320px, .45fr);
gap: 18px;
}
.rx-agenda-v2 .rx-calendar-title {
align-items: flex-start;
}
.rx-agenda-v2 .rx-calendar-title span {
max-width: 460px;
}
.rx-agenda-v2 .rx-calendar-nav { display: none !important; }
.rx-agenda-v2 .rx-agenda-day-panel {
box-shadow: 0 20px 50px rgba(15,23,42,.055);
}
.rx-agenda-v2 .rx-agenda-detail-side b {
font-size: 15px;
}
.rx-agenda-v2 .rx-agenda-pay,
.rx-agenda-v2 .rx-agenda-link {
min-width: auto;
white-space: nowrap;
}
.rx-agenda-v2 .rx-agenda-pay:not(.is-paid) {
background: #0a2a5e;
color: #fff;
}
.rx-agenda-v2 .rx-agenda-link {
color: #0a2a5e;
}
@media (max-width: 1120px) {
.rx-agenda-v2 .rx-agenda-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.payer-manual-address { width: 100%; align-self: stretch; }
.payer-address-status { grid-column: auto; }
.payer-profile-note-compact { align-items: flex-start; }
.rx-agenda-v2 .rx-agenda-stats-premium { grid-template-columns: 1fr; }
}
/* =========================================================
V2.2.37 — Refinos visuais pré-deploy: checkout + agenda
========================================================= */
.payer-profile-grid .payer-manual-address {
align-self: start;
margin-top: calc(.84rem + 7px);
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.rx-agenda-v2 .rx-agenda-day-summary {
grid-template-columns: 1fr !important;
gap: 0;
border-radius: 20px;
background: linear-gradient(180deg, #fff 0%, rgba(248,250,252,.88) 100%);
box-shadow: 0 12px 30px rgba(15,23,42,.045);
}
.rx-agenda-v2 .rx-agenda-day-summary div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
text-align: left;
padding: 12px 14px;
border-left: 0 !important;
border-top: 1px solid rgba(15,23,42,.07);
}
.rx-agenda-v2 .rx-agenda-day-summary div:first-child {
border-top: 0 !important;
}
.rx-agenda-v2 .rx-agenda-day-summary span {
margin: 0;
color: #64748b;
font-size: 10.5px;
}
.rx-agenda-v2 .rx-agenda-day-summary strong {
min-width: 112px;
text-align: right;
white-space: nowrap;
font-size: 14px;
line-height: 1.15;
}
@media (max-width: 720px) {
.payer-profile-grid .payer-manual-address {
margin-top: 0;
min-height: 46px;
}
.rx-agenda-v2 .rx-agenda-day-summary strong {
min-width: 96px;
}
}
/* =========================================================
V2.2.43 — Checkout resiliente: CEP robusto + proteção anti-duplo clique
========================================================= */
.payer-profile-modal.payer-cep-loading .payer-cep-field input {
background-image: linear-gradient(90deg, rgba(10,42,94,.04), rgba(10,42,94,.10), rgba(10,42,94,.04));
background-size: 220% 100%;
animation: payerCepLoading 1.15s ease-in-out infinite;
}
.payer-profile-modal.payer-cep-loading .payer-manual-address {
opacity: .68;
cursor: wait;
transform: none;
}
.payer-address-status.info {
background: rgba(10,42,94,.075);
color: #0a2a5e;
}
.payer-manual-address:disabled {
opacity: .68;
cursor: wait;
transform: none;
box-shadow: none;
}
button[aria-busy="true"] {
cursor: wait !important;
}
button[aria-busy="true"]::after {
content: '';
display: inline-block;
width: .72em;
height: .72em;
margin-left: .5em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 999px;
vertical-align: -0.08em;
animation: payerBtnSpin .8s linear infinite;
}
@keyframes payerCepLoading {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
@keyframes payerBtnSpin {
to { transform: rotate(360deg); }
}
/* =========================================================
V2.2.44 — UX premium: validação guiada no checkout + agenda mais escaneável
========================================================= */
.payer-profile-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: -4px 0 16px;
}
.payer-profile-steps span {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 34px;
border-radius: 999px;
background: #f8fafc;
border: 1px solid rgba(15,23,42,.07);
color: #64748b;
font-size: .78rem;
font-weight: 850;
}
.payer-profile-steps b {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(10,42,94,.09);
color: #0a2a5e;
font-size: .72rem;
}
.payer-profile-steps .is-current {
background: rgba(10,42,94,.075);
border-color: rgba(10,42,94,.13);
color: #0a2a5e;
}
.payer-field.is-invalid input,
.payer-field input[aria-invalid="true"] {
border-color: #ef4444 !important;
background: #fffafa;
box-shadow: 0 0 0 4px rgba(239,68,68,.10) !important;
}
.payer-profile-error {
border: 1px solid rgba(239,68,68,.16);
}
.payer-address-open .payer-profile-steps span:nth-child(2) {
background: rgba(26,122,74,.075);
border-color: rgba(26,122,74,.13);
color: #166534;
}
.payer-address-open .payer-profile-steps span:nth-child(2) b {
background: rgba(26,122,74,.12);
color: #166534;
}
.rx-agenda-v2 .rx-cal-day {
min-height: 104px;
padding: 9px 8px 10px;
}
.rx-agenda-v2 .rx-cal-day.sem-venc {
justify-content: flex-start;
}
.rx-agenda-v2 .rx-cal-meta {
margin-top: auto;
}
.rx-agenda-v2 .rx-cal-meta.positivo { color: var(--vd); }
.rx-agenda-v2 .rx-cal-meta.negativo { color: var(--vm); }
.rx-agenda-v2 .rx-cal-meta.is-empty { color: var(--cz); }
.rx-cal-flow {
display: flex;
flex-direction: column;
gap: 2px;
min-height: 28px;
margin-top: 1px;
font-size: 9.5px;
font-weight: 950;
font-variant-numeric: tabular-nums;
line-height: 1.15;
}
.rx-cal-flow .entrada { color: var(--vd); }
.rx-cal-flow .saida { color: var(--vm); }
.rx-cal-signals {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 2px;
}
.rx-cal-signals i {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--cz);
}
.rx-cal-signals .entrada { background: var(--vd); }
.rx-cal-signals .saida { background: var(--vm); }
.rx-cal-signals .aberto { background: var(--am); }
.rx-cal-signals .pago { background: var(--rx); opacity: .55; }
.rx-agenda-v2 .rx-agenda-day-panel {
border-color: rgba(10,42,94,.08);
}
.rx-agenda-v2 .rx-agenda-day-total {
padding: 8px 10px;
border-radius: 14px;
background: rgba(10,42,94,.055);
}
.rx-agenda-v2 .rx-agenda-detail {
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.rx-agenda-v2 .rx-agenda-detail:hover {
transform: translateY(-1px);
box-shadow: 0 16px 34px rgba(15,23,42,.075);
}
@media (max-width: 720px) {
.payer-profile-steps { grid-template-columns: 1fr; }
.payer-profile-steps span { justify-content: flex-start; padding: 0 12px; }
.rx-agenda-v2 .rx-cal-day { min-height: 68px; }
.rx-cal-flow,
.rx-cal-signals { display: none; }
}
/* v2.2.50 — Onboarding premium de lançamentos e importação PDF */
.rx-onboarding-card {
border: 1px solid rgba(31, 93, 120, .14);
background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,250,252,.96));
box-shadow: 0 16px 40px rgba(17, 46, 65, .08);
}
.rx-onboarding-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 12px;
}
.rx-card-kicker,
.rx-onboarding-head span:first-child {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--rx, #1f5d78);
font-size: .72rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.rx-onboarding-head strong {
display: block;
margin-top: 4px;
color: #142532;
font-size: 1rem;
line-height: 1.25;
}
.rx-onboarding-head small {
display: block;
margin-top: 3px;
color: #6b7b86;
line-height: 1.35;
}
.rx-onboarding-progress {
flex: 0 0 auto;
min-width: 48px;
text-align: center;
padding: 7px 10px;
border-radius: 999px;
background: #e9f5f8;
color: #1f5d78;
font-weight: 800;
font-size: .82rem;
}
.rx-onboarding-steps {
display: grid;
gap: 8px;
}
.rx-onboarding-steps button {
border: 1px solid rgba(20, 37, 50, .08);
background: rgba(255,255,255,.86);
border-radius: 16px;
padding: 10px 11px;
display: grid;
grid-template-columns: 28px 1fr;
gap: 8px 10px;
text-align: left;
align-items: center;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.rx-onboarding-steps button:hover {
transform: translateY(-1px);
border-color: rgba(31, 93, 120, .22);
box-shadow: 0 12px 26px rgba(17, 46, 65, .08);
}
.rx-onboarding-steps button > span {
width: 28px;
height: 28px;
border-radius: 999px;
display: inline-grid;
place-items: center;
background: #f0f4f6;
color: #52636e;
font-weight: 900;
grid-row: span 2;
}
.rx-onboarding-steps strong {
color: #142532;
font-size: .92rem;
}
.rx-onboarding-steps small {
color: #6b7b86;
font-size: .78rem;
line-height: 1.25;
}
.rx-onboarding-steps button.is-done {
border-color: rgba(22, 151, 114, .24);
background: linear-gradient(135deg, rgba(235,250,245,.98), rgba(255,255,255,.92));
}
.rx-onboarding-steps button.is-done > span {
background: #169772;
color: #fff;
font-size: 0;
}
.rx-onboarding-steps button.is-done > span::after {
content: '✓';
font-size: .85rem;
}
.rx-onboarding-card.is-complete .rx-onboarding-progress {
background: #169772;
color: #fff;
}
.rx-launch-onboarding-premium {
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(420px, 1.55fr);
gap: 18px;
margin: 0 0 18px;
padding: 18px;
border-radius: 24px;
border: 1px solid rgba(31, 93, 120, .13);
background:
radial-gradient(circle at top left, rgba(31, 93, 120, .11), transparent 34%),
linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,250,252,.94));
box-shadow: 0 18px 48px rgba(17, 46, 65, .08);
}
.rx-launch-onboarding-copy span {
display: inline-flex;
color: var(--rx, #1f5d78);
font-size: .72rem;
font-weight: 900;
letter-spacing: .07em;
text-transform: uppercase;
margin-bottom: 6px;
}
.rx-launch-onboarding-copy strong {
display: block;
color: #132433;
font-size: 1.05rem;
line-height: 1.3;
}
.rx-launch-onboarding-copy p {
margin: 8px 0 0;
color: #5c6d78;
line-height: 1.45;
font-size: .92rem;
}
.rx-launch-onboarding-actions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.rx-launch-onboarding-actions button {
min-height: 112px;
border: 1px solid rgba(20, 37, 50, .08);
border-radius: 18px;
background: rgba(255,255,255,.9);
padding: 13px;
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rx-launch-onboarding-actions button:hover {
transform: translateY(-2px);
border-color: rgba(31, 93, 120, .22);
box-shadow: 0 16px 30px rgba(17,46,65,.09);
}
.rx-launch-onboarding-actions button span {
font-size: 1.15rem;
}
.rx-launch-onboarding-actions button strong {
color: #132433;
font-size: .94rem;
}
.rx-launch-onboarding-actions button small {
color: #6d7b84;
line-height: 1.25;
}
.rx-launch-logic-card {
background: linear-gradient(135deg, rgba(247,250,252,.98), rgba(255,255,255,.96));
}
.rx-lancamento-instructions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 12px 0 12px;
}
.rx-lancamento-instructions article {
border: 1px solid rgba(20,37,50,.08);
border-radius: 16px;
padding: 11px;
background: #fff;
display: grid;
gap: 4px;
}
.rx-lancamento-instructions article span {
width: 24px;
height: 24px;
border-radius: 999px;
background: #edf5f7;
color: #1f5d78;
font-weight: 900;
display: inline-grid;
place-items: center;
font-size: .76rem;
}
.rx-lancamento-instructions article strong {
color: #142532;
font-size: .88rem;
}
.rx-lancamento-instructions article small {
color: #6b7b86;
line-height: 1.28;
}
.rx-pdf-guided-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 0 0 14px;
padding: 14px;
border: 1px solid rgba(31, 93, 120, .14);
border-radius: 18px;
background: linear-gradient(135deg, rgba(238,247,250,.94), rgba(255,255,255,.96));
}
.rx-pdf-guided-card span {
display: block;
color: #1f5d78;
font-size: .72rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 3px;
}
.rx-pdf-guided-card strong {
display: block;
color: #142532;
font-size: .98rem;
margin-bottom: 3px;
}
.rx-pdf-guided-card small {
color: #5d6e78;
line-height: 1.4;
}
.rx-pdf-guided-card button {
flex: 0 0 auto;
border: 0;
border-radius: 999px;
background: #1f5d78;
color: #fff;
padding: 11px 15px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 14px 28px rgba(31,93,120,.18);
}
.rx-focus-pulse {
animation: rxFocusPulse 1.15s ease-in-out 1;
}
@keyframes rxFocusPulse {
0%, 100% { box-shadow: 0 0 0 rgba(31,93,120,0); }
35% { box-shadow: 0 0 0 8px rgba(31,93,120,.14); }
}
.rx-fatura-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.rx-fatura-steps span {
border-radius: 999px;
background: #f0f4f6;
color: #63727d;
padding: 8px 10px;
text-align: center;
font-size: .78rem;
font-weight: 800;
}
.rx-fatura-steps span.is-active {
background: #1f5d78;
color: #fff;
}
.rx-fatura-microcopy {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 10px 0 12px;
}
.rx-fatura-microcopy span {
border: 1px solid rgba(20,37,50,.08);
border-radius: 14px;
padding: 9px 10px;
background: #fff;
color: #5d6e78;
line-height: 1.3;
font-size: .82rem;
}
.rx-fatura-microcopy b {
color: #142532;
}
.rxm-launch-card.cartao {
border-color: rgba(31,93,120,.18);
background: linear-gradient(145deg, #ffffff, #eef7fa);
}
.rxm-launch-card.cartao span {
background: rgba(31,93,120,.10);
}
@media (max-width: 980px) {
.rx-launch-onboarding-premium {
grid-template-columns: 1fr;
}
.rx-launch-onboarding-actions,
.rx-lancamento-instructions,
.rx-fatura-microcopy {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.rx-launch-onboarding-premium,
.rx-pdf-guided-card {
border-radius: 20px;
}
.rx-launch-onboarding-actions,
.rx-lancamento-instructions,
.rx-fatura-microcopy,
.rx-fatura-steps {
grid-template-columns: 1fr;
}
.rx-pdf-guided-card {
align-items: stretch;
flex-direction: column;
}
.rx-pdf-guided-card button {
width: 100%;
}
}
/* v2.2.51 — Onboarding contextual premium */
.rx-onboarding-card--compact[hidden],
.rx-context-tour[hidden],
.rx-context-coach-card[hidden],
.rx-tutorial-overlay[hidden] { display: none !important; }
.rx-tutorial-overlay {
position: fixed;
inset: 0;
z-index: 9990;
display: grid;
place-items: center;
padding: 22px;
background: rgba(10, 20, 36, .48);
backdrop-filter: blur(8px);
}
.rx-tutorial-modal {
width: min(620px, 100%);
border: 1px solid rgba(255,255,255,.36);
border-radius: 30px;
padding: 28px;
background:
radial-gradient(circle at top left, rgba(31,93,120,.14), transparent 34%),
linear-gradient(145deg, rgba(255,255,255,.99), rgba(244,250,252,.97));
box-shadow: 0 34px 90px rgba(5, 15, 30, .30);
color: #122334;
}
.rx-tutorial-kicker,
.rx-context-coach-card > span {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--rx, #1f5d78);
font-size: .72rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.rx-tutorial-modal h2 {
margin: 9px 0 8px;
font-size: clamp(1.55rem, 4vw, 2.15rem);
line-height: 1.08;
color: #0f2234;
}
.rx-tutorial-modal p {
margin: 0;
max-width: 52ch;
color: #5c6d78;
line-height: 1.55;
}
.rx-tutorial-flow {
display: grid;
grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
align-items: center;
gap: 10px;
margin: 22px 0;
}
.rx-tutorial-flow span {
border-radius: 999px;
padding: 9px 12px;
background: #eef6f8;
color: #1f5d78;
font-weight: 900;
font-size: .82rem;
}
.rx-tutorial-flow i {
height: 1px;
background: linear-gradient(90deg, rgba(31,93,120,.25), rgba(31,93,120,.05));
}
.rx-tutorial-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
flex-wrap: wrap;
}
.rx-tutorial-actions button,
.rx-context-coach-card button {
border: 0;
border-radius: 999px;
padding: 11px 16px;
font-weight: 900;
cursor: pointer;
}
.rx-tutorial-actions .primary,
.rx-context-coach-card button:not(.ghost) {
background: var(--azul, #123f91);
color: #fff;
box-shadow: 0 16px 34px rgba(18, 63, 145, .20);
}
.rx-tutorial-actions .ghost,
.rx-context-coach-card button.ghost {
background: rgba(255,255,255,.78);
color: #24384a;
border: 1px solid rgba(20,37,50,.12);
}
.rx-context-coach-card {
margin: 0 0 14px;
padding: 16px;
border-radius: 20px;
border: 1px solid rgba(31, 93, 120, .16);
background:
radial-gradient(circle at top right, rgba(31,93,120,.10), transparent 38%),
linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,250,252,.95));
box-shadow: 0 16px 40px rgba(17,46,65,.075);
}
.rx-context-coach-card strong {
display: block;
margin-top: 6px;
color: #122334;
font-size: 1.02rem;
line-height: 1.28;
}
.rx-context-coach-card p {
margin: 8px 0 12px;
color: #5d6e78;
line-height: 1.48;
font-size: .92rem;
}
.rx-context-coach-card--wide {
margin: 0 0 18px;
}
.rx-context-coach-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.rx-tutorial-highlight {
position: relative;
animation: rxTutorGlow 1.2s ease-in-out 1;
}
@keyframes rxTutorGlow {
0%, 100% { box-shadow: inherit; }
35% { box-shadow: 0 0 0 8px rgba(31,93,120,.12), 0 18px 42px rgba(17,46,65,.10); }
}
.rx-context-tour.is-complete,
.rx-context-coach-card.is-muted {
display: none !important;
}
@media (max-width: 680px) {
.rx-tutorial-overlay { padding: 14px; align-items: end; }
.rx-tutorial-modal { border-radius: 26px; padding: 22px; }
.rx-tutorial-flow { grid-template-columns: 1fr; align-items: stretch; }
.rx-tutorial-flow i { display: none; }
.rx-tutorial-actions { flex-direction: column; }
.rx-tutorial-actions button, .rx-context-coach-card button { width: 100%; }
.rx-context-coach-card { border-radius: 18px; }
}
/* v2.2.52 — Onboarding contextual enxuto: menos informação permanente, mais guia por overlay */
.rx-launch-guide-compact {
padding: 14px 18px !important;
border-radius: 22px !important;
display: grid;
gap: 8px;
background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(238,247,255,.74)) !important;
border: 1px solid rgba(13, 43, 92, .10) !important;
box-shadow: 0 18px 50px rgba(15, 35, 75, .08) !important;
}
.rx-launch-guide-compact[hidden] { display: none !important; }
.rx-launch-guide-compact .rx-launch-flow-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
color: #0b285a;
}
.rx-launch-guide-compact .rx-card-kicker {
margin-right: 4px;
color: #1248b5;
letter-spacing: .08em;
text-transform: uppercase;
font-size: 11px;
}
.rx-launch-guide-compact strong {
font-size: 13px;
font-weight: 850;
}
.rx-launch-guide-compact i {
width: 14px;
height: 1px;
background: rgba(20, 71, 165, .28);
display: inline-block;
}
.rx-launch-guide-compact p {
margin: 0;
color: #5d6d86;
font-size: 13px;
line-height: 1.45;
}
.rx-lancamento-inline-help {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 14px;
padding: 10px 12px;
border: 1px solid rgba(15, 51, 99, .08);
border-radius: 16px;
background: rgba(247, 250, 255, .72);
color: #5b6980;
font-size: 12.5px;
}
.rx-lancamento-inline-help span {
display: inline-flex;
align-items: center;
min-height: 30px;
}
.rx-lancamento-inline-help button {
margin-left: auto;
border: 0;
border-radius: 999px;
padding: 9px 14px;
background: #0b3b86;
color: #fff;
font-weight: 850;
cursor: pointer;
box-shadow: 0 10px 24px rgba(11, 59, 134, .15);
}
.rx-context-coach-card[hidden], .rx-lancamento-instructions[hidden], .rx-pdf-guided-card[hidden] { display: none !important; }
.rx-tutorial-overlay {
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
}
.rx-tutorial-modal {
max-width: 640px;
border: 1px solid rgba(255,255,255,.72);
box-shadow: 0 32px 90px rgba(5, 18, 45, .30);
}
@media (max-width: 760px) {
.rx-launch-guide-compact {
padding: 12px 14px !important;
}
.rx-launch-guide-compact .rx-launch-flow-line {
gap: 6px;
}
.rx-launch-guide-compact i { width: 9px; }
.rx-lancamento-inline-help {
align-items: stretch;
flex-direction: column;
}
.rx-lancamento-inline-help button {
width: 100%;
margin-left: 0;
}
}
/* v2.2.53 — Agenda limpa: valores ficam no painel lateral */
.rx-agenda-v2 .rx-cal-day {
min-height: 88px !important;
padding: 10px 9px 12px !important;
justify-content: space-between !important;
}
.rx-agenda-v2 .rx-cal-day.tem-venc {
background: linear-gradient(180deg, #fff 0%, #fbfdff 100%) !important;
}
.rx-agenda-v2 .rx-cal-meta:not(.is-empty),
.rx-agenda-v2 .rx-cal-flow {
display: none !important;
}
.rx-cal-compact {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
min-height: 34px;
margin-top: auto;
}
.rx-agenda-v2 .rx-cal-signals {
display: inline-flex !important;
margin-top: 0 !important;
}
.rx-agenda-v2 .rx-cal-count {
display: inline-flex;
width: fit-content;
max-width: 100%;
border-radius: 999px;
padding: 3px 7px;
background: rgba(10,42,94,.075);
color: var(--hbg);
font-size: 9.5px !important;
font-weight: 900;
line-height: 1.1;
white-space: nowrap;
letter-spacing: .01em;
}
.rx-cal-status {
display: block;
color: var(--tx2);
font-size: 9px;
font-weight: 800;
line-height: 1.1;
white-space: nowrap;
}
.rx-agenda-v2 .rx-cal-day.venc-vencido .rx-cal-count {
background: rgba(192,57,43,.10);
color: var(--vm);
}
.rx-agenda-v2 .rx-cal-day.venc-pago .rx-cal-count,
.rx-agenda-v2 .rx-cal-day.venc-entrada .rx-cal-count {
background: rgba(26,122,74,.10);
color: var(--vd);
}
.rx-agenda-v2 .rx-cal-day.venc-misto .rx-cal-count {
background: rgba(200,127,10,.11);
color: var(--am);
}
@media (max-width: 720px) {
.rx-agenda-v2 .rx-cal-day { min-height: 58px !important; padding: 7px 5px !important; }
.rx-agenda-v2 .rx-cal-signals,
.rx-cal-status { display: none !important; }
.rx-agenda-v2 .rx-cal-count { font-size: 8.5px !important; padding: 2px 5px !important; }
}
/* v2.2.54 — Resumo anual sem resíduos de cartão, agenda limpa e mobile mais coeso */
.rx-agenda-v2 .rx-cal-day {
min-height: 82px !important;
padding: 10px 9px !important;
}
.rx-agenda-v2 .rx-cal-compact--minimal {
min-height: 18px;
flex-direction: row;
align-items: center;
gap: 6px;
margin-top: auto;
}
.rx-agenda-v2 .rx-cal-compact--minimal .rx-cal-signals {
display: inline-flex !important;
gap: 4px;
}
.rx-agenda-v2 .rx-cal-compact--minimal .rx-cal-count {
min-width: 18px;
height: 18px;
padding: 0 6px;
align-items: center;
justify-content: center;
font-size: 9px !important;
background: rgba(10,42,94,.08);
}
.rx-agenda-v2 .rx-cal-status { display: none !important; }
.rx-lancamento-inline-help {
align-items: center;
}
.rx-lancamento-inline-help button[data-action="onboarding-import-pdf"] {
display: none !important;
}
@media (max-width: 820px) {
#rxMobileShell {
padding-left: 12px;
padding-right: 12px;
}
.rxm-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.rxm-page-title,
.rxm-section-card {
border-radius: 22px;
padding: 15px;
}
.rxm-page-title h2,
.rxm-section-head h3 {
font-size: 17px;
letter-spacing: -.25px;
}
.rxm-page-title p,
.rxm-habit-card p,
.rxm-section-card small {
line-height: 1.5;
}
.rxm-launch-grid {
gap: 9px;
}
.rxm-launch-card {
min-height: 74px;
border-radius: 21px;
grid-template-columns: 44px minmax(0, 1fr) auto;
padding: 12px;
}
.rxm-launch-card > span {
width: 44px;
height: 44px;
border-radius: 16px;
}
.rxm-launch-card strong {
font-size: 13.2px;
}
.rxm-launch-card small {
max-width: 190px;
line-height: 1.25;
}
.rxm-launch-card b {
font-size: 11px;
max-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
}
.rxm-recent-card,
.rxm-habit-card {
margin-top: 2px;
}
.rxm-list,
.rxm-recent-list {
gap: 8px;
}
.rxm-pay-card,
.rxm-more-grid button {
border-radius: 18px;
}
}
@media (max-width: 720px) {
.rx-agenda-v2 .rx-cal-day {
min-height: 56px !important;
padding: 7px 5px !important;
}
.rx-agenda-v2 .rx-cal-compact--minimal .rx-cal-signals { display: none !important; }
.rx-agenda-v2 .rx-cal-compact--minimal .rx-cal-count {
min-width: 16px;
height: 16px;
font-size: 8px !important;
padding: 0 5px;
}
}
/* v2.2.55 — Polimento de deploy: tutorial compacto, sem texto amontoado */
.rx-launch-guide-compact {
grid-template-columns: minmax(260px, auto) 1fr;
align-items: center;
column-gap: 22px;
row-gap: 8px;
}
.rx-launch-guide-compact .rx-launch-flow-line {
min-width: 0;
white-space: nowrap;
}
.rx-launch-guide-compact .rx-guide-copy,
.rx-launch-guide-compact p {
max-width: 760px;
justify-self: end;
text-align: left;
}
.rx-lancamento-inline-help--chips {
display: grid;
grid-template-columns: repeat(4, minmax(160px, 1fr));
gap: 9px;
padding: 10px;
}
.rx-lancamento-inline-help--chips span {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
min-height: 46px;
padding: 8px 10px;
border-radius: 13px;
background: rgba(255,255,255,.75);
border: 1px solid rgba(17, 45, 84, .07);
}
.rx-lancamento-inline-help--chips b {
display: block;
color: #0b285a;
font-size: 12px;
line-height: 1.1;
}
.rx-lancamento-inline-help--chips small {
display: block;
color: #68768a;
font-size: 11px;
line-height: 1.2;
font-weight: 650;
}
.rx-mini-help-card--compact .tip {
font-size: 12px;
line-height: 1.45;
}
@media (max-width: 1180px) {
.rx-launch-guide-compact {
grid-template-columns: 1fr;
}
.rx-launch-guide-compact .rx-guide-copy,
.rx-launch-guide-compact p {
justify-self: stretch;
}
.rx-lancamento-inline-help--chips {
grid-template-columns: repeat(2, minmax(150px, 1fr));
}
}
@media (max-width: 760px) {
.rx-launch-guide-compact .rx-launch-flow-line {
white-space: normal;
}
.rx-lancamento-inline-help--chips {
grid-template-columns: 1fr;
}
.rx-lancamento-inline-help--chips span {
min-height: 42px;
}
}
/* Card "Seu plano" na aba Mais (desktop) — CTA de renovar/atualizar */
.rx-more-plano {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 0 14px;
text-align: center;
}
.rx-more-plano strong {
font-size: 16px;
font-weight: 950;
color: #071b3e;
letter-spacing: -.3px;
}
.rx-more-plano-btn {
margin-top: 3px;
border: 1px solid rgba(10, 42, 94, .22);
background: transparent;
color: #0A2A5E;
font-weight: 700;
font-size: 11px;
letter-spacing: .15px;
padding: 5px 12px;
border-radius: 999px;
cursor: pointer;
font-family: inherit;
transition: background .15s, border-color .15s;
}
.rx-more-plano-btn:hover { background: rgba(10, 42, 94, .06); border-color: rgba(10, 42, 94, .4); }
.rx-more-plano-btn:active { transform: translateY(1px); }
@media (max-width: 900px) {
.rx-more-plano { align-items: flex-start; text-align: left; padding: 8px 0 0; }
}
/* "Meu Plano" — badge no estilo dos status + popover premium */
.rx-more-hero { position: relative; }
.rx-plano-badge {
border: 1px solid rgba(10,42,94,.22);
background: rgba(10,42,94,.05);
color: #0A2A5E;
font-family: inherit;
font-size: 11px;
font-weight: 700;
line-height: 1;
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
transition: background .12s;
}
.rx-plano-badge:hover { background: rgba(10,42,94,.11); }
.rx-plano-pop {
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
z-index: 60;
width: min(300px, 86vw);
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 18px 45px rgba(7,27,62,.18);
padding: 16px;
display: flex;
flex-direction: column;
gap: 5px;
}
.rx-plano-pop strong { font-size: 17px; color: #0A2A5E; }
.rx-plano-pop-valor { font-size: 13px; font-weight: 600; color: #475569; }
.rx-plano-bar { height: 7px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin-top: 6px; }
.rx-plano-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1d4ed8, #2563eb); border-radius: 999px; }
.rx-plano-pop small { font-size: 11px; color: #64748b; }
.rx-plano-pop .rx-more-plano-btn { margin-top: 8px; }
.rx-plano-pop[hidden] { display: none; }
/* =============================================================
v2.2.58 — MOBILE ESSENCIAL EM CARDS
Mobile deixa de depender de tabela horizontal: lançamentos,
agenda e resumo passam a usar cards próprios.
============================================================= */
@media (max-width: 820px) {
.rxm-bottom-nav.rxm-bottom-nav-5 {
grid-template-columns: 1fr 1fr 72px 1fr 1fr;
gap: 6px;
}
.rxm-bottom-nav.rxm-bottom-nav-5 button {
min-width: 0;
}
.rxm-bottom-nav.rxm-bottom-nav-5 button span {
font-size: 17px;
font-weight: 950;
}
.rxm-bottom-nav.rxm-bottom-nav-5 .rxm-nav-plus {
height: 58px;
margin-top: -22px;
}
.rxm-mobile-ledger,
.rxm-card-channel {
margin-bottom: 12px;
}
.rxm-card-channel p {
color: var(--tx2);
font-size: 12px;
line-height: 1.55;
margin: 0;
}
.rxm-card-list {
gap: 10px;
}
.rxm-mobile-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.rxm-mobile-group + .rxm-mobile-group {
margin-top: 6px;
padding-top: 10px;
border-top: 1px dashed rgba(15,23,42,.10);
}
.rxm-mobile-group > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 2px;
}
.rxm-mobile-group > header strong {
color: var(--hbg);
font-size: 12.5px;
font-weight: 950;
}
.rxm-mobile-group > header span {
color: var(--cz);
font-size: 10.5px;
font-weight: 800;
white-space: nowrap;
}
.rxm-mobile-card,
.rxm-agenda-mobile-card,
.rxm-month-summary,
.rxm-year-total {
border: 1px solid rgba(221,225,231,.95);
background: #fff;
border-radius: 20px;
box-shadow: 0 8px 22px rgba(7,27,62,.055);
}
.rxm-mobile-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
padding: 13px;
overflow: hidden;
}
.rxm-mobile-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: var(--rxm-accent, var(--rx));
border-radius: 20px 0 0 20px;
opacity: .75;
}
.rxm-mobile-card-entrada { --rxm-accent: var(--vd); background: linear-gradient(180deg, #fff 0%, #f2fbf6 100%); }
.rxm-mobile-card-saida { --rxm-accent: var(--vm); }
.rxm-mobile-card.is-ok { border-color: rgba(26,122,74,.20); }
.rxm-mobile-card-main { min-width: 0; padding-left: 2px; }
.rxm-mobile-kicker {
display: block;
color: var(--rx);
font-size: 9.5px;
font-weight: 950;
text-transform: uppercase;
letter-spacing: .55px;
margin-bottom: 4px;
}
.rxm-mobile-card-main strong {
display: block;
color: var(--hbg);
font-size: 14px;
line-height: 1.15;
font-weight: 950;
overflow-wrap: anywhere;
}
.rxm-mobile-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 7px;
}
.rxm-mobile-meta span {
display: inline-flex;
min-height: 24px;
align-items: center;
border-radius: 999px;
padding: 4px 8px;
background: var(--czc);
color: var(--cz);
font-size: 10.5px;
font-weight: 850;
}
.rxm-mobile-card-side {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.rxm-mobile-card-side b {
color: var(--hbg);
font-size: 16px;
font-weight: 950;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.rxm-mobile-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
flex-wrap: wrap;
}
.rxm-mobile-actions button {
min-height: 36px;
border: none;
border-radius: 999px;
padding: 0 11px;
font-family: inherit;
font-size: 11px;
font-weight: 900;
background: var(--rxc);
color: var(--rx);
}
.rxm-mobile-actions button.is-done {
background: var(--vdc);
color: var(--vd);
}
.rxm-agenda-mini-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 12px;
}
.rxm-agenda-mini-stats article {
min-width: 0;
border: 1px solid rgba(221,225,231,.95);
background: #fff;
border-radius: 18px;
padding: 11px 9px;
box-shadow: 0 8px 22px rgba(7,27,62,.045);
}
.rxm-agenda-mini-stats span {
display: block;
color: var(--cz);
font-size: 9.5px;
font-weight: 950;
text-transform: uppercase;
letter-spacing: .45px;
margin-bottom: 4px;
}
.rxm-agenda-mini-stats strong {
display: block;
color: var(--hbg);
font-size: 12px;
font-weight: 950;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rxm-agenda-mobile-card {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 12px;
padding: 12px;
}
.rxm-agenda-mobile-card .rxm-mobile-card-side {
grid-column: 1 / -1;
padding-left: 66px;
}
.rxm-agenda-date {
width: 54px;
height: 64px;
border-radius: 18px;
display: grid;
place-items: center;
background: var(--rxc);
color: var(--rx);
}
.rxm-agenda-date span {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .55px;
font-weight: 950;
}
.rxm-agenda-date strong {
display: block;
margin-top: -12px;
font-size: 21px;
font-weight: 950;
}
.rxm-agenda-mobile-card.entrada .rxm-agenda-date { background: var(--vdc); color: var(--vd); }
.rxm-agenda-mobile-card.saida .rxm-agenda-date { background: var(--vmc); color: var(--vm); }
.rxm-month-summary {
padding: 13px;
display: grid;
gap: 9px;
}
.rxm-month-summary header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(15,23,42,.07);
}
.rxm-month-summary header strong {
color: var(--hbg);
font-size: 14px;
font-weight: 950;
}
.rxm-month-summary header span {
border-radius: 999px;
padding: 4px 8px;
background: var(--rx);
color: #fff;
font-size: 9.5px;
font-weight: 950;
text-transform: uppercase;
letter-spacing: .4px;
}
.rxm-month-summary > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.rxm-month-summary > div span {
color: var(--cz);
font-size: 11px;
font-weight: 850;
}
.rxm-month-summary > div b {
color: var(--hbg);
font-size: 12.5px;
font-weight: 950;
font-variant-numeric: tabular-nums;
}
.rxm-month-summary b.pos { color: var(--vd); }
.rxm-month-summary b.neg { color: var(--vm); }
.rxm-month-summary.is-current { border-color: rgba(29,78,216,.28); box-shadow: 0 12px 28px rgba(29,78,216,.10); }
.rxm-month-summary.is-empty { opacity: .72; }
.rxm-year-total {
padding: 16px;
background: linear-gradient(135deg, var(--hbg), #0a2a5e);
color: #fff;
}
.rxm-year-total span,
.rxm-year-total small {
display: block;
color: rgba(255,255,255,.68);
font-size: 11px;
font-weight: 800;
}
.rxm-year-total strong {
display: block;
margin: 5px 0;
font-size: 24px;
font-weight: 950;
color: #fff;
}
}
@media (max-width: 390px) {
.rxm-bottom-nav.rxm-bottom-nav-5 {
left: 7px;
right: 7px;
grid-template-columns: 1fr 1fr 66px 1fr 1fr;
}
.rxm-mobile-card-side,
.rxm-agenda-mobile-card .rxm-mobile-card-side {
align-items: flex-start;
flex-direction: column;
}
.rxm-agenda-mobile-card .rxm-mobile-card-side {
padding-left: 0;
}
}
/* v2.2.59 — Cartão/PDF e Agenda mobile refinados */
@media (max-width: 820px) {
.rxm-card-channel--pdf {
background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);
border-color: rgba(29,78,216,.18);
}
.rxm-card-channel--pdf .rxm-section-head button,
.rxm-card-channel--cartao .rxm-section-head button {
min-height: 40px;
border: none;
border-radius: 999px;
padding: 0 14px;
background: var(--rx);
color: #fff;
font-weight: 950;
font-size: 11px;
}
.rxm-pdf-flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 10px 0 12px;
}
.rxm-pdf-flow span {
min-width: 0;
display: flex;
align-items: center;
gap: 7px;
border-radius: 15px;
padding: 9px 8px;
background: rgba(29,78,216,.07);
color: var(--rx);
font-size: 11px;
font-weight: 900;
}
.rxm-pdf-flow b {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 999px;
background: #fff;
box-shadow: 0 4px 12px rgba(29,78,216,.12);
font-size: 10px;
}
.rxm-mobile-card-cartao {
--rxm-accent: #1d4ed8;
background: linear-gradient(180deg, #fff 0%, #f6f9ff 100%);
}
.rxm-mobile-card-cartao .rxm-mobile-card-side {
align-items: flex-start;
}
.rxm-mobile-card-cartao .rxm-mobile-actions button:first-child {
background: var(--rx);
color: #fff;
}
.rxm-agenda-day-picker-card {
margin-bottom: 12px;
}
.rxm-agenda-day-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(96px, 1fr);
gap: 9px;
overflow-x: auto;
padding: 2px 2px 4px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.rxm-agenda-day-rail::-webkit-scrollbar { display: none; }
.rxm-agenda-day-rail button {
min-width: 96px;
min-height: 90px;
text-align: left;
border: 1px solid rgba(221,225,231,.95);
border-radius: 18px;
background: #fff;
padding: 10px;
font-family: inherit;
box-shadow: 0 8px 20px rgba(7,27,62,.045);
}
.rxm-agenda-day-rail button.ativo {
border-color: rgba(29,78,216,.42);
box-shadow: 0 10px 26px rgba(29,78,216,.12);
background: linear-gradient(180deg, #fff 0%, #f4f8ff 100%);
}
.rxm-agenda-day-rail button span {
display: block;
font-size: 9px;
font-weight: 950;
letter-spacing: .55px;
text-transform: uppercase;
color: var(--cz);
}
.rxm-agenda-day-rail button strong {
display: block;
color: var(--hbg);
font-size: 22px;
line-height: 1;
margin: 4px 0 6px;
font-weight: 950;
}
.rxm-agenda-day-rail button small {
display: block;
color: var(--hbg);
font-weight: 950;
font-size: 11px;
white-space: nowrap;
}
.rxm-agenda-day-rail button small.pos { color: var(--vd); }
.rxm-agenda-day-rail button small.neg { color: var(--vm); }
.rxm-agenda-day-rail button em {
display: block;
margin-top: 5px;
color: var(--cz);
font-size: 9.5px;
font-style: normal;
font-weight: 800;
line-height: 1.25;
}
.rxm-empty-inline {
width: max-content;
min-width: 210px;
padding: 12px;
}
.rxm-agenda-day-total-card {
display: grid;
gap: 7px;
border: 1px solid rgba(221,225,231,.95);
border-radius: 18px;
padding: 12px;
background: #fff;
box-shadow: 0 8px 20px rgba(7,27,62,.045);
}
.rxm-agenda-day-total-card div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid rgba(15,23,42,.06);
padding-bottom: 7px;
}
.rxm-agenda-day-total-card div:last-child { border-bottom: none; padding-bottom: 0; }
.rxm-agenda-day-total-card span {
color: var(--cz);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .45px;
}
.rxm-agenda-day-total-card strong {
color: var(--hbg);
font-size: 13px;
font-weight: 950;
font-variant-numeric: tabular-nums;
}
.rxm-agenda-day-total-card .pos { color: var(--vd); }
.rxm-agenda-day-total-card .neg { color: var(--vm); }
}
@media (max-width: 390px) {
.rxm-pdf-flow {
grid-template-columns: 1fr;
}
.rxm-agenda-day-rail {
grid-auto-columns: minmax(88px, 1fr);
}
}
/* v2.2.60 — Mobile premium shell + lançamentos guiados (base preservada)
Camada visual mobile: sem alterar motor financeiro, pagamentos, admin ou parser PDF. */
@media (max-width: 820px) {
body.rxm-mobile-viewport {
background:
radial-gradient(circle at 15% 0%, rgba(45,91,255,.22), transparent 30%),
linear-gradient(145deg, #07142c 0%, #0d1e3b 42%, #07142c 100%) !important;
}
.rx-mobile-shell {
background:
radial-gradient(circle at 90% 10%, rgba(61,112,255,.24), transparent 28%),
linear-gradient(180deg, rgba(9,24,52,.98), rgba(11,28,58,.98)) !important;
color: #eef5ff;
}
.rxm-topbar {
background: rgba(7,20,44,.78) !important;
border-bottom: 1px solid rgba(185,205,255,.16) !important;
backdrop-filter: blur(18px);
}
.rxm-content {
padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
}
.rxm-hero-card,
.rxm-month-card,
.rxm-section-card,
.rxm-stat,
.rxm-launch-card,
.rxm-mobile-card,
.rxm-agenda-mobile-card,
.rxm-month-summary,
.rxm-recent-item,
.rxm-module-card,
.rxm-category-card {
box-shadow: 0 18px 42px rgba(0,0,0,.18) !important;
}
.rxm-hero-card {
background:
linear-gradient(145deg, rgba(255,255,255,.98), rgba(232,239,255,.94)) !important;
color: #07142c !important;
border: 1px solid rgba(185,205,255,.32) !important;
}
.rxm-month-card,
.rxm-section-card,
.rxm-stat,
.rxm-mobile-card,
.rxm-agenda-mobile-card,
.rxm-month-summary,
.rxm-recent-item {
background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,248,255,.95)) !important;
color: #07142c;
border-color: rgba(190,207,235,.36) !important;
}
.rxm-module-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 12px 0;
}
.rxm-module-card {
min-height: 132px;
padding: 14px;
border: 1px solid rgba(190,207,235,.34);
border-radius: 24px;
background:
linear-gradient(145deg, rgba(255,255,255,.98), rgba(236,243,255,.94));
color: #07142c;
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
overflow: hidden;
position: relative;
}
.rxm-module-card::after {
content: '';
position: absolute;
width: 90px;
height: 90px;
right: -34px;
top: -34px;
border-radius: 999px;
background: radial-gradient(circle, rgba(45,91,255,.22), transparent 70%);
}
.rxm-module-ico {
width: 34px;
height: 34px;
border-radius: 14px;
display: inline-grid;
place-items: center;
background: linear-gradient(145deg, #0b2450, #1e5cff);
color: #fff;
font-weight: 900;
}
.rxm-module-card small,
.rxm-module-card em {
font-size: .74rem;
color: #61708a;
font-style: normal;
}
.rxm-module-card strong {
font-size: 1.02rem;
color: #06152f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rxm-module-card.entradas .rxm-module-ico { background: linear-gradient(145deg, #0f766e, #20bf72); }
.rxm-module-card.saidas .rxm-module-ico { background: linear-gradient(145deg, #7f1d1d, #e54d4d); }
.rxm-module-card.reserva .rxm-module-ico { background: linear-gradient(145deg, #082f49, #2d5bff); }
.rxm-module-card.dividas .rxm-module-ico { background: linear-gradient(145deg, #3b0764, #7c3aed); }
.rxm-status-grid-compact {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.rxm-mobile-chart-card {
margin-top: 14px;
}
.rxm-category-bars {
display: grid;
gap: 12px;
}
.rxm-category-bars article {
display: grid;
gap: 6px;
}
.rxm-category-bars article > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: .82rem;
color: #0a1d3e;
}
.rxm-category-bars i {
display: block;
height: 8px;
border-radius: 999px;
background: #e7edf8;
overflow: hidden;
}
.rxm-category-bars em {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #082f49, #2d5bff);
}
.rxm-category-bars small {
font-size: .74rem;
color: #61708a;
}
.rxm-launch-grid-2x2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.rxm-launch-grid-2x2 .rxm-launch-card {
min-height: 134px;
background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(235,242,255,.96)) !important;
border: 1px solid rgba(190,207,235,.38) !important;
color: #07142c;
}
.rxm-launch-grid-2x2 .rxm-launch-card span {
width: 34px;
height: 34px;
border-radius: 14px;
display: grid;
place-items: center;
color: #fff;
background: linear-gradient(145deg, #0b2450, #1e5cff);
font-size: .95rem;
}
.rxm-launch-grid-2x2 .rxm-launch-card strong,
.rxm-launch-grid-2x2 .rxm-launch-card b {
color: #06152f;
}
.rxm-launch-grid-2x2 .rxm-launch-card small {
color: #61708a;
line-height: 1.25;
}
.rxm-launch-subpanel[hidden] { display: none !important; }
.rxm-launch-subpanel.ativo { display: block; }
.rxm-filter-row-mini {
gap: 8px !important;
overflow-x: auto;
padding-bottom: 4px;
}
.rxm-filter-row-mini button {
white-space: nowrap;
border-radius: 999px !important;
padding: 9px 12px !important;
}
.rxm-mobile-category-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.rxm-category-card {
min-height: 128px;
padding: 13px;
border-radius: 22px;
border: 1px solid rgba(190,207,235,.38);
background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,246,255,.95));
color: #07142c;
text-align: left;
display: flex;
flex-direction: column;
gap: 7px;
justify-content: space-between;
}
.rxm-category-card span {
width: 31px;
height: 31px;
border-radius: 12px;
display: grid;
place-items: center;
background: linear-gradient(145deg, #081a38, #1e5cff);
color: #fff;
font-weight: 900;
}
.rxm-category-card strong {
font-size: .9rem;
color: #06152f;
}
.rxm-category-card small {
color: #64748b;
font-size: .72rem;
}
.rxm-category-card b {
color: #082f49;
font-size: .92rem;
}
.rxm-category-card.has-data {
border-color: rgba(45,91,255,.28);
}
.rxm-subcat-grid {
display: grid;
gap: 9px;
margin-top: 14px;
}
.rxm-subcat-grid h4 {
margin: 0 0 4px;
color: #102247;
font-size: .84rem;
text-transform: uppercase;
letter-spacing: .06em;
}
.rxm-subcat-grid button {
border: 1px solid rgba(190,207,235,.42);
border-radius: 18px;
background: #f8fbff;
padding: 12px;
text-align: left;
display: grid;
gap: 2px;
}
.rxm-subcat-grid button strong { color: #07142c; }
.rxm-subcat-grid button small { color: #64748b; font-size: .72rem; }
.rxm-recent-item {
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px 12px;
}
.rxm-recent-item b {
white-space: nowrap;
}
.rxm-recent-actions {
grid-column: 1 / -1;
display: flex;
gap: 8px;
justify-content: flex-end;
}
.rxm-recent-actions button,
.rxm-inline-add {
border: 1px solid rgba(190,207,235,.45);
background: #fff;
color: #082f49;
border-radius: 999px;
padding: 9px 12px;
font-weight: 800;
font-size: .78rem;
}
.rxm-recent-actions button.is-done {
background: rgba(23,166,99,.12);
color: #0f766e;
border-color: rgba(23,166,99,.28);
}
.rxm-inline-add {
width: 100%;
margin-top: 12px;
background: linear-gradient(145deg, #0b2450, #1e5cff);
color: #fff;
border: 0;
}
.rxm-bottom-nav {
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
background: rgba(5, 14, 31, .92) !important;
border-top: 1px solid rgba(190,207,235,.18) !important;
backdrop-filter: blur(18px);
}
.rxm-bottom-nav button {
min-height: 58px;
}
.rxm-bottom-nav .rxm-nav-plus {
transform: translateY(-8px);
background: linear-gradient(145deg, #0b2450, #2d5bff) !important;
box-shadow: 0 14px 34px rgba(45,91,255,.35) !important;
}
.rx-tutorial-never {
margin: 12px 0 2px;
display: flex;
align-items: center;
gap: 9px;
color: #42506a;
font-size: .9rem;
}
.rx-tutorial-never input {
width: 18px;
height: 18px;
accent-color: #0b3a7c;
}
}
/* ═══════════════════════════════════════════════════════════
v2.2.61 — Mobile nativo premium: cards, fluxo e ícones
Mantém o desktop preservado; aplica apenas em telas mobile.
═══════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
body.rxm-mobile-viewport {
--rxm-navy-900: #06142b;
--rxm-navy-800: #0a1f3f;
--rxm-navy-700: #0e2d59;
--rxm-metal: linear-gradient(135deg, #06142b 0%, #0a2348 45%, #123b75 100%);
--rxm-card: rgba(255,255,255,.96);
--rxm-card-soft: rgba(248,251,255,.92);
}
#rxMobileShell {
background:
radial-gradient(circle at 20% -12%, rgba(45, 91, 255, .22), transparent 30%),
radial-gradient(circle at 100% 0%, rgba(14, 59, 117, .26), transparent 34%),
linear-gradient(180deg, #06142b 0%, #0a1f3f 28%, #eef2f8 28.1%, #eef2f8 100%);
padding-bottom: calc(116px + env(safe-area-inset-bottom));
}
.rxm-topbar {
margin-bottom: 12px;
}
.rxm-brand-logo,
.rxm-icon-badge,
.rxm-module-ico {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
color: #fff !important;
background: var(--rxm-metal) !important;
border: 1px solid rgba(255,255,255,.20) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 26px rgba(6,20,43,.18);
font-family: Inter, 'Segoe UI', system-ui, sans-serif;
font-weight: 950;
letter-spacing: -.02em;
}
.rxm-icon-badge {
width: 38px !important;
height: 38px !important;
border-radius: 14px !important;
font-size: 14px !important;
line-height: 1 !important;
}
.rxm-brand-logo,
.rxm-module-ico {
width: 42px;
height: 42px;
border-radius: 15px;
font-size: 13px;
}
.rxm-module-grid,
.rxm-launch-grid-2x2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.rxm-module-card,
.rxm-launch-card {
min-height: 128px;
border-radius: 22px;
padding: 14px;
background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,249,255,.94) 100%);
border: 1px solid rgba(184,204,232,.78);
box-shadow: 0 14px 34px rgba(7,27,62,.10);
color: var(--tx);
overflow: hidden;
}
.rxm-module-card small,
.rxm-launch-card small {
display: block;
margin-top: 8px;
color: #5e6f8a;
font-size: 11px;
line-height: 1.25;
min-height: 28px;
white-space: normal;
overflow: visible;
}
.rxm-module-card strong,
.rxm-launch-card b {
display: block;
max-width: 100%;
margin-top: 8px;
font-size: clamp(14px, 4vw, 18px);
line-height: 1.1;
white-space: normal;
overflow-wrap: anywhere;
}
.rxm-launch-card strong {
display: block;
margin-top: 10px;
font-size: 16px;
line-height: 1.1;
}
.rxm-page-title,
.rxm-section-card {
border-radius: 24px;
background: var(--rxm-card);
border-color: rgba(184,204,232,.72);
box-shadow: 0 16px 42px rgba(7,27,62,.09);
}
.rxm-page-title {
padding: 17px 16px;
}
.rxm-page-title h2 {
font-size: 22px;
line-height: 1.05;
letter-spacing: -.7px;
}
.rxm-page-title p {
max-width: 100%;
font-size: 12px;
line-height: 1.45;
}
.rxm-section-head {
align-items: center;
gap: 10px;
}
.rxm-section-head h3 {
font-size: 15px;
line-height: 1.15;
}
.rxm-section-head button,
.rxm-inline-add,
.rxm-primary-cta,
.rxm-filter-row button {
min-height: 42px;
border-radius: 15px;
}
.rxm-mobile-category-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.rxm-category-card {
min-height: 128px;
padding: 14px;
border-radius: 22px;
background: linear-gradient(180deg, #fff 0%, #f6f9ff 100%);
border: 1px solid rgba(184,204,232,.78);
box-shadow: 0 12px 30px rgba(7,27,62,.08);
text-align: left;
overflow: hidden;
}
.rxm-category-card strong {
display: block;
margin-top: 9px;
color: var(--hbg);
font-size: 14px;
line-height: 1.12;
min-height: 32px;
}
.rxm-category-card small,
.rxm-category-card b {
display: block;
margin-top: 7px;
white-space: normal;
overflow-wrap: anywhere;
}
.rxm-subcat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.rxm-subcat-grid h4 {
grid-column: 1 / -1;
margin: 4px 0 2px;
color: var(--hbg);
font-size: 13px;
letter-spacing: -.2px;
}
.rxm-subcat-grid button {
min-height: 88px;
padding: 12px;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(184,204,232,.82);
box-shadow: 0 9px 24px rgba(7,27,62,.07);
text-align: left;
}
.rxm-subcat-grid button strong {
display: block;
color: var(--hbg);
font-size: 13px;
line-height: 1.15;
}
.rxm-subcat-grid button small {
display: block;
margin-top: 6px;
color: #6c7b94;
font-size: 10px;
line-height: 1.25;
max-height: 26px;
overflow: hidden;
}
.rxm-mobile-card,
.rxm-recent-item,
.rxm-pay-card,
.rxm-agenda-mobile-card {
border-radius: 20px;
background: #fff;
border: 1px solid rgba(184,204,232,.78);
box-shadow: 0 12px 30px rgba(7,27,62,.08);
}
.rxm-mobile-card {
grid-template-columns: 1fr;
gap: 12px;
}
.rxm-mobile-card-side,
.rxm-agenda-mobile-card .rxm-mobile-card-side {
align-items: stretch;
text-align: left;
width: 100%;
}
.rxm-mobile-card-side b {
font-size: 17px;
text-align: left;
}
.rxm-mobile-actions,
.rxm-recent-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
width: 100%;
}
.rxm-mobile-actions button,
.rxm-recent-actions button {
width: 100%;
min-height: 40px;
border-radius: 14px;
}
.rxm-recent-item {
grid-template-columns: 1fr;
align-items: stretch;
gap: 10px;
padding: 13px;
}
.rxm-recent-item > b {
font-size: 16px;
}
.rxm-bottom-nav {
left: 10px;
right: 10px;
bottom: calc(10px + env(safe-area-inset-bottom));
border-radius: 26px;
padding: 8px;
gap: 4px;
background: rgba(255,255,255,.94);
border: 1px solid rgba(184,204,232,.86);
box-shadow: 0 20px 52px rgba(7,27,62,.20);
backdrop-filter: blur(18px);
}
.rxm-bottom-nav button {
border-radius: 18px;
min-width: 0;
}
.rxm-bottom-nav button span {
font-size: 14px;
line-height: 1;
}
.rxm-bottom-nav button strong {
font-size: 10px;
}
.rxm-nav-plus {
background: var(--rxm-metal) !important;
color: #fff !important;
box-shadow: 0 12px 30px rgba(6,20,43,.26);
}
.rxm-full-return { display: none !important; }
.rxm-more-grid button span:not(.rxm-icon-badge) {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 14px;
background: var(--rxm-metal);
color: #fff;
font-weight: 950;
font-size: 13px;
}
.rxm-card-channel--cartao p,
.rxm-card-channel--pdf p {
font-size: 12px;
line-height: 1.45;
color: #5e6f8a;
}
.rxm-sheet {
border-radius: 28px 28px 0 0;
background: linear-gradient(180deg, #fff 0%, #f7faff 100%);
}
.rxm-entry-tabs {
display: none;
}
.rxm-quick-chips {
gap: 7px;
overflow-x: auto;
padding-bottom: 4px;
}
.rxm-quick-chips button {
flex: 0 0 auto;
}
}
/* ═══════════════════════════════════════════════════════════
v2.2.62 — Correção estrutural mobile nativa
Remove fuga para desktop no celular, corrige textos cortados,
padroniza cards/ícones e transforma importação PDF em fluxo mobile.
═══════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
/* v2.2.64 — correção crítica: #rxMobileShell fica dentro de #app.
Não podemos ocultar o #app inteiro no mobile, senão a tela pós-login fica branca.
Ocultamos apenas as áreas desktop diretas e mantemos o shell mobile visível. */
body.rxm-mobile-viewport #app {
display: block !important;
}
body.rxm-mobile-viewport #app > .header,
body.rxm-mobile-viewport #app > .page,
body.rxm-mobile-viewport #app > .appShell {
display: none !important;
}
body.rxm-mobile-viewport #rxMobileShell {
display: block !important;
min-height: 100svh;
padding: calc(18px + env(safe-area-inset-top, 0px)) 14px calc(126px + env(safe-area-inset-bottom, 0px)) !important;
overflow-x: hidden;
}
body.rxm-mobile-viewport.rxm-full #rxMobileShell {
display: block !important;
}
body.rxm-mobile-viewport .rxm-content {
padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
overflow-x: hidden;
}
body.rxm-mobile-viewport .rxm-panel {
gap: 14px;
}
body.rxm-mobile-viewport .rxm-topbar {
position: sticky;
top: calc(8px + env(safe-area-inset-top, 0px));
z-index: 40;
margin: 0 0 14px;
border-radius: 20px;
background: rgba(5, 15, 34, .82);
backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,.12);
}
body.rxm-mobile-viewport .rxm-page-title {
padding: 18px 16px;
border-radius: 24px;
}
body.rxm-mobile-viewport .rxm-page-title h2 {
font-size: clamp(24px, 7vw, 34px);
letter-spacing: -1.3px;
}
body.rxm-mobile-viewport .rxm-page-title p {
font-size: 13px;
line-height: 1.42;
margin-top: 8px;
}
/* Cards principais: úteis, menores e sem texto cortado */
body.rxm-mobile-viewport .rxm-module-grid,
body.rxm-mobile-viewport .rxm-launch-grid-2x2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
body.rxm-mobile-viewport .rxm-module-card,
body.rxm-mobile-viewport .rxm-launch-card {
min-height: 116px !important;
padding: 14px !important;
border-radius: 24px !important;
align-content: start;
justify-items: start;
gap: 6px;
position: relative;
}
body.rxm-mobile-viewport .rxm-launch-card strong,
body.rxm-mobile-viewport .rxm-module-card small {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
body.rxm-mobile-viewport .rxm-launch-card strong {
font-size: 18px !important;
margin-top: 8px !important;
line-height: 1.05 !important;
}
body.rxm-mobile-viewport .rxm-launch-card small,
body.rxm-mobile-viewport .rxm-module-card em,
body.rxm-mobile-viewport .rxm-module-card small {
min-height: 0 !important;
font-size: 11px !important;
line-height: 1.25 !important;
color: #5e6f8a !important;
max-width: 100%;
}
body.rxm-mobile-viewport .rxm-launch-card b,
body.rxm-mobile-viewport .rxm-module-card strong {
font-size: clamp(13px, 4vw, 17px) !important;
max-width: 100%;
overflow-wrap: anywhere;
line-height: 1.1;
}
/* Ícones padronizados: sem emojis/estrelas e com tamanho único */
body.rxm-mobile-viewport .rxm-icon-badge,
body.rxm-mobile-viewport .rxm-module-ico,
body.rxm-mobile-viewport .rxm-brand-logo {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
border-radius: 15px !important;
display: inline-grid !important;
place-items: center !important;
font-size: 13px !important;
font-weight: 950 !important;
line-height: 1 !important;
color: #fff !important;
background: linear-gradient(145deg, #06142b, #102f61 58%, #1d57b8) !important;
border: 1px solid rgba(255,255,255,.18) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 26px rgba(6,20,43,.22) !important;
font-family: Inter, system-ui, sans-serif !important;
}
/* Lançar: cards e listas sem tabela compactada */
body.rxm-mobile-viewport .rxm-launch-subpanel {
margin-top: 0;
}
body.rxm-mobile-viewport .rxm-section-card,
body.rxm-mobile-viewport .rxm-mobile-card,
body.rxm-mobile-viewport .rxm-recent-item,
body.rxm-mobile-viewport .rxm-agenda-mobile-card,
body.rxm-mobile-viewport .rxm-pay-card {
border-radius: 22px !important;
}
body.rxm-mobile-viewport .rxm-section-head {
align-items: center;
gap: 10px;
}
body.rxm-mobile-viewport .rxm-section-head h3 {
font-size: 17px;
line-height: 1.08;
}
body.rxm-mobile-viewport .rxm-section-head button {
white-space: nowrap;
max-width: 48%;
overflow: hidden;
text-overflow: ellipsis;
}
body.rxm-mobile-viewport .rxm-filter-row,
body.rxm-mobile-viewport .rxm-filter-row-mini {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none;
}
body.rxm-mobile-viewport .rxm-filter-row button,
body.rxm-mobile-viewport .rxm-filter-row-mini button {
flex: 0 0 auto;
min-height: 38px;
padding: 0 13px;
}
body.rxm-mobile-viewport .rxm-mobile-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
body.rxm-mobile-viewport .rxm-category-card {
min-height: 112px !important;
padding: 13px !important;
display: grid;
grid-template-rows: auto auto auto auto;
align-content: start;
gap: 5px;
}
body.rxm-mobile-viewport .rxm-category-card strong {
min-height: auto !important;
font-size: 14px !important;
line-height: 1.12 !important;
white-space: normal !important;
word-break: normal;
overflow-wrap: anywhere;
}
body.rxm-mobile-viewport .rxm-category-card small,
body.rxm-mobile-viewport .rxm-category-card b {
font-size: 11px !important;
line-height: 1.22 !important;
white-space: normal !important;
overflow-wrap: anywhere;
}
body.rxm-mobile-viewport .rxm-subcat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
body.rxm-mobile-viewport .rxm-subcat-grid h4 {
grid-column: 1 / -1;
}
body.rxm-mobile-viewport .rxm-subcat-grid button {
min-height: 82px;
padding: 12px;
border-radius: 18px;
}
body.rxm-mobile-viewport .rxm-subcat-grid button strong,
body.rxm-mobile-viewport .rxm-subcat-grid button small {
white-space: normal;
overflow-wrap: anywhere;
}
body.rxm-mobile-viewport .rxm-mobile-card,
body.rxm-mobile-viewport .rxm-recent-item {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding: 14px;
}
body.rxm-mobile-viewport .rxm-mobile-meta {
gap: 6px;
}
body.rxm-mobile-viewport .rxm-mobile-meta span {
white-space: normal;
line-height: 1.15;
}
body.rxm-mobile-viewport .rxm-mobile-actions,
body.rxm-mobile-viewport .rxm-recent-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
body.rxm-mobile-viewport .rxm-mobile-actions button,
body.rxm-mobile-viewport .rxm-recent-actions button {
min-height: 42px;
font-size: 12px;
}
/* Agenda: trilha sem cards cortados e plural correto */
body.rxm-mobile-viewport .rxm-agenda-day-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(116px, 38vw);
gap: 10px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
padding: 2px 6px 8px;
margin-inline: -2px;
scrollbar-width: none;
}
body.rxm-mobile-viewport .rxm-agenda-day-rail button {
scroll-snap-align: start;
min-width: 0;
width: auto;
padding: 13px;
border-radius: 18px;
}
body.rxm-mobile-viewport .rxm-agenda-day-rail button small,
body.rxm-mobile-viewport .rxm-agenda-day-rail button em {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
body.rxm-mobile-viewport .rxm-agenda-mobile-card {
grid-template-columns: auto minmax(0, 1fr);
padding: 13px;
}
body.rxm-mobile-viewport .rxm-agenda-mobile-card .rxm-mobile-card-side {
grid-column: 1 / -1;
width: 100%;
}
/* PDF mobile: modal vira tela nativa, sem tabela desktop espremida */
body.rxm-mobile-viewport .rx-fatura-overlay {
z-index: 2200;
align-items: stretch !important;
justify-content: stretch !important;
padding: 0 !important;
background: rgba(6, 20, 43, .72) !important;
backdrop-filter: blur(14px);
}
body.rxm-mobile-viewport .rx-fatura-modal {
width: 100vw !important;
max-width: none !important;
height: 100svh !important;
max-height: none !important;
margin: 0 !important;
border-radius: 0 !important;
display: grid !important;
grid-template-rows: auto 1fr auto;
background: linear-gradient(180deg, #f8fbff 0%, #eef3fb 100%) !important;
}
body.rxm-mobile-viewport .rx-fatura-head {
padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 14px !important;
background: linear-gradient(145deg, #06142b, #0a2348 55%, #123b75) !important;
color: #fff !important;
border-bottom: 0 !important;
}
body.rxm-mobile-viewport .rx-fatura-head h2,
body.rxm-mobile-viewport .rx-fatura-head p,
body.rxm-mobile-viewport .rx-fatura-kicker {
color: #fff !important;
}
body.rxm-mobile-viewport .rx-fatura-body {
padding: 14px !important;
overflow-y: auto !important;
min-height: 0;
}
body.rxm-mobile-viewport .rx-fatura-upload,
body.rxm-mobile-viewport .rx-fatura-microcopy,
body.rxm-mobile-viewport .rx-fatura-status,
body.rxm-mobile-viewport .rx-fatura-preview,
body.rxm-mobile-viewport .rx-fat-audit-card,
body.rxm-mobile-viewport .rx-fat-import-summary,
body.rxm-mobile-viewport .rx-fat-details-card,
body.rxm-mobile-viewport .rx-fat-row {
border-radius: 20px !important;
}
body.rxm-mobile-viewport .rx-fat-row {
display: grid !important;
grid-template-columns: auto 1fr !important;
gap: 10px !important;
align-items: start !important;
padding: 12px !important;
overflow: hidden;
}
body.rxm-mobile-viewport .rx-fat-row > * {
min-width: 0;
}
body.rxm-mobile-viewport .rx-fat-row-title,
body.rxm-mobile-viewport .rx-fat-row-note {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
body.rxm-mobile-viewport .rx-fatura-actions {
padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
background: rgba(248,251,255,.96) !important;
border-top: 1px solid rgba(184,204,232,.72) !important;
}
body.rxm-mobile-viewport .rx-fatura-actions .primary {
grid-column: 1 / -1;
}
/* Formulário mobile: não extrapolar a tela */
body.rxm-mobile-viewport .rxm-sheet-overlay[aria-hidden="false"],
body.rxm-mobile-viewport .rxm-sheet-overlay:not([hidden]) {
z-index: 2100;
}
body.rxm-mobile-viewport .rxm-sheet {
max-height: min(92svh, 780px);
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr;
}
body.rxm-mobile-viewport .rxm-form {
overflow-y: auto;
padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
}
/* Bottom nav: nunca cobrir cards finais */
body.rxm-mobile-viewport .rxm-bottom-nav {
z-index: 1300;
left: 10px !important;
right: 10px !important;
bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
max-width: calc(100vw - 20px);
}
body.rxm-mobile-viewport .rxm-bottom-nav button span {
overflow: hidden;
text-overflow: ellipsis;
}
body.rxm-mobile-viewport .rxm-full-return,
body.rxm-mobile-viewport .rx-side-note {
display: none !important;
}
}
/* ═══════════════════════════════════════════════════════════
v2.2.65 — Hotfix mobile: sobreposições, cards e navegação
Camada CSS-only: não altera desktop, pagamentos, admin ou dados.
═══════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
body.rxm-mobile-viewport,
body.rxm-mobile-viewport #rxMobileShell {
overflow-x: hidden !important;
}
body.rxm-mobile-viewport #rxMobileShell {
padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
padding-bottom: calc(154px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Header no fluxo normal: não cobre títulos e cards ao rolar */
body.rxm-mobile-viewport .rxm-topbar {
position: relative !important;
top: auto !important;
z-index: 20 !important;
margin: 0 0 12px !important;
min-height: 58px !important;
padding: 8px 10px !important;
border-radius: 20px !important;
}
body.rxm-mobile-viewport .rxm-content,
body.rxm-mobile-viewport .rxm-panel {
padding-bottom: calc(166px + env(safe-area-inset-bottom, 0px)) !important;
overflow-x: hidden !important;
}
body.rxm-mobile-viewport .rxm-page-title,
body.rxm-mobile-viewport .rxm-hero-card,
body.rxm-mobile-viewport .rxm-section-card {
max-width: 100% !important;
overflow: hidden !important;
}
body.rxm-mobile-viewport .rxm-page-title h2 {
font-size: clamp(24px, 7.2vw, 32px) !important;
line-height: 1.02 !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
body.rxm-mobile-viewport .rxm-page-title p,
body.rxm-mobile-viewport .rxm-hero-card p {
font-size: 12.5px !important;
line-height: 1.42 !important;
max-width: 100% !important;
}
/* Cards do painel inicial e da aba Lançar: 2x por linha, compactos e legíveis */
body.rxm-mobile-viewport .rxm-module-grid,
body.rxm-mobile-viewport .rxm-launch-grid-2x2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
align-items: stretch !important;
}
body.rxm-mobile-viewport .rxm-module-card,
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
min-height: 108px !important;
max-height: none !important;
padding: 12px !important;
gap: 6px !important;
border-radius: 22px !important;
text-align: left !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
}
body.rxm-mobile-viewport .rxm-module-card > span,
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card > span {
grid-row: auto !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
border-radius: 13px !important;
margin: 0 0 4px !important;
font-size: 12px !important;
}
body.rxm-mobile-viewport .rxm-module-card small,
body.rxm-mobile-viewport .rxm-module-card em,
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card small {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
color: #65748d !important;
font-size: 11px !important;
line-height: 1.22 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
overflow-wrap: normal !important;
}
body.rxm-mobile-viewport .rxm-module-card strong,
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card strong,
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card b {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
color: #06152f !important;
line-height: 1.08 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
text-overflow: clip !important;
}
body.rxm-mobile-viewport .rxm-module-card strong,
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card b {
font-size: clamp(14px, 4vw, 17px) !important;
font-variant-numeric: tabular-nums !important;
}
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card strong {
font-size: 17px !important;
font-weight: 950 !important;
}
/* Evita a quebra vertical de valores como R$ 14.000,00 */
body.rxm-mobile-viewport [id^="rxmLaunch"],
body.rxm-mobile-viewport #rxmEnt,
body.rxm-mobile-viewport #rxmSai,
body.rxm-mobile-viewport #rxmReserva,
body.rxm-mobile-viewport #rxmDividasDash {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
/* Lista de lançamentos e cartões: botões não podem vazar para fora */
body.rxm-mobile-viewport .rxm-mobile-card,
body.rxm-mobile-viewport .rxm-recent-item,
body.rxm-mobile-viewport .rxm-agenda-mobile-card {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 10px !important;
width: 100% !important;
overflow: hidden !important;
}
body.rxm-mobile-viewport .rxm-mobile-card-main,
body.rxm-mobile-viewport .rxm-mobile-card-side,
body.rxm-mobile-viewport .rxm-mobile-actions {
min-width: 0 !important;
width: 100% !important;
}
body.rxm-mobile-viewport .rxm-mobile-card-side b {
display: block !important;
max-width: 100% !important;
font-size: clamp(18px, 6vw, 25px) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body.rxm-mobile-viewport .rxm-mobile-actions,
body.rxm-mobile-viewport .rxm-recent-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.rxm-mobile-viewport .rxm-mobile-actions button,
body.rxm-mobile-viewport .rxm-recent-actions button,
body.rxm-mobile-viewport .rxm-section-head button {
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Canal cartão/faturas: CTA curto e sem truncar informação importante */
body.rxm-mobile-viewport .rxm-card-channel .rxm-section-head {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.rxm-mobile-viewport .rxm-card-channel .rxm-section-head button {
width: 100% !important;
max-width: none !important;
min-height: 44px !important;
}
/* Agenda mobile: sem cards cortados e sem conteúdo sob a bottom nav */
body.rxm-mobile-viewport .rxm-agenda-day-rail {
grid-auto-columns: minmax(118px, 39vw) !important;
padding: 2px 4px 10px !important;
margin: 0 !important;
scroll-padding-left: 4px !important;
}
body.rxm-mobile-viewport .rxm-agenda-day-rail button {
min-height: 126px !important;
}
body.rxm-mobile-viewport .rxm-agenda-day-rail button small,
body.rxm-mobile-viewport .rxm-agenda-day-rail button em {
max-width: 100% !important;
white-space: normal !important;
line-height: 1.18 !important;
}
body.rxm-mobile-viewport #rxm-panel-agenda,
body.rxm-mobile-viewport #rxm-panel-inicio,
body.rxm-mobile-viewport #rxm-panel-lancar,
body.rxm-mobile-viewport #rxm-panel-resumo,
body.rxm-mobile-viewport #rxm-panel-mais,
body.rxm-mobile-viewport #rxm-panel-cartoes,
body.rxm-mobile-viewport #rxm-panel-pagamentos {
padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
}
body.rxm-mobile-viewport .rxm-bottom-nav {
height: 66px !important;
padding: 8px !important;
bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
border-radius: 24px !important;
}
body.rxm-mobile-viewport .rxm-bottom-nav button {
height: 48px !important;
}
body.rxm-mobile-viewport .rxm-bottom-nav .rxm-nav-plus {
height: 58px !important;
margin-top: -22px !important;
}
}
@media (max-width: 380px) {
body.rxm-mobile-viewport .rxm-module-grid,
body.rxm-mobile-viewport .rxm-launch-grid-2x2,
body.rxm-mobile-viewport .rxm-mobile-category-grid,
body.rxm-mobile-viewport .rxm-subcat-grid {
gap: 8px !important;
}
body.rxm-mobile-viewport .rxm-module-card,
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card,
body.rxm-mobile-viewport .rxm-category-card {
padding: 11px !important;
border-radius: 20px !important;
}
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card strong {
font-size: 15.5px !important;
}
}
/* ═══════════════════════════════════════════════════════════
v2.2.66 — Ajustes mobile: cartões, plurais e espaçamentos
Foco: mobile only; desktop preservado.
═══════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
body.rxm-mobile-viewport .rxm-mobile-chart-card {
margin-bottom: 18px !important;
}
body.rxm-mobile-viewport .rxm-status-grid-compact {
margin-top: 18px !important;
gap: 14px !important;
}
/* Reserva ganha destaque natural e ocupa a largura de dois cards na aba Lançar. */
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card-wide,
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card.reserva {
grid-column: 1 / -1 !important;
min-height: 104px !important;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
grid-template-rows: auto auto !important;
align-items: center !important;
column-gap: 12px !important;
}
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card.reserva > span {
grid-row: 1 / 3 !important;
margin: 0 !important;
}
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card.reserva strong,
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card.reserva small {
grid-column: 2 !important;
}
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card.reserva b {
grid-column: 3 !important;
grid-row: 1 / 3 !important;
text-align: right !important;
font-size: clamp(18px, 5.4vw, 24px) !important;
}
/* O canal extra de cartão na aba Lançar foi removido do HTML; esta regra protege versões em cache. */
body.rxm-mobile-viewport #rxm-panel-lancar > .rxm-card-channel--cartao {
display: none !important;
}
body.rxm-mobile-viewport .rxm-card-actions-inline {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
width: 100% !important;
}
body.rxm-mobile-viewport .rxm-card-actions-inline button {
width: 100% !important;
max-width: none !important;
min-height: 44px !important;
white-space: nowrap !important;
}
body.rxm-mobile-viewport .rxm-empty-actions {
display: grid !important;
gap: 10px !important;
}
body.rxm-mobile-viewport .rxm-empty-actions span {
color: #64748b;
line-height: 1.35;
}
body.rxm-mobile-viewport .rxm-empty-actions button {
min-height: 44px;
border-radius: 16px;
border: 1px solid rgba(8, 31, 67, .12);
background: #eef4ff;
color: #092454;
font-weight: 900;
}
body.rxm-mobile-viewport .rxm-empty-actions button:last-child {
background: linear-gradient(145deg, #06204b, #123f87);
color: #fff;
}
/* Mais respiro entre blocos de categorias e painéis seguintes. */
body.rxm-mobile-viewport .rxm-mobile-category-grid,
body.rxm-mobile-viewport .rxm-card-list {
margin-bottom: 14px !important;
}
}
/* =============================================================
V2.2.67 — Ajuste mobile: CTA contextual e navegação menos intrusiva
============================================================= */
@media (max-width: 820px) {
body.rxm-mobile-viewport #rxMobileShell {
padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
}
body.rxm-mobile-viewport .rxm-content,
body.rxm-mobile-viewport .rxm-panel {
padding-bottom: calc(178px + env(safe-area-inset-bottom, 0px)) !important;
}
body.rxm-mobile-viewport .rxm-bottom-nav {
height: 62px !important;
left: 14px !important;
right: 14px !important;
bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
border-radius: 24px !important;
padding: 7px !important;
gap: 6px !important;
background: rgba(5, 15, 34, .92) !important;
border-color: rgba(255,255,255,.16) !important;
box-shadow: 0 14px 38px rgba(7,27,62,.32) !important;
}
body.rxm-mobile-viewport .rxm-bottom-nav button {
height: 46px !important;
border-radius: 16px !important;
color: rgba(255,255,255,.58) !important;
}
body.rxm-mobile-viewport .rxm-bottom-nav button.ativo:not(.rxm-nav-plus) {
background: rgba(238,243,255,.96) !important;
color: var(--rx) !important;
}
body.rxm-mobile-viewport .rxm-bottom-nav .rxm-nav-plus {
height: 56px !important;
margin-top: -18px !important;
border-radius: 20px !important;
background: linear-gradient(145deg, #0a2a5e, #245fff) !important;
box-shadow: 0 14px 30px rgba(36,95,255,.36) !important;
color: #fff !important;
}
body.rxm-mobile-viewport .rxm-launch-subpanel .rxm-section-head {
align-items: center !important;
gap: 12px !important;
}
body.rxm-mobile-viewport #rxmLedgerActionBtn {
flex: 0 0 auto;
min-width: 108px;
max-width: 132px;
min-height: 44px;
padding: 10px 14px !important;
border-radius: 18px !important;
background: linear-gradient(145deg, #eef3ff, #e6edf8) !important;
color: var(--rx) !important;
box-shadow: inset 0 0 0 1px rgba(184,204,232,.7);
white-space: normal !important;
line-height: 1.08 !important;
}
body.rxm-mobile-viewport .rxm-ledger-insight {
margin: -2px 0 12px;
padding: 12px;
border-radius: 20px;
background: linear-gradient(180deg, #f8fbff, #eef4ff);
border: 1px solid rgba(184,204,232,.82);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
body.rxm-mobile-viewport .rxm-ledger-insight[hidden] { display: none !important; }
body.rxm-mobile-viewport .rxm-ledger-insight-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
body.rxm-mobile-viewport .rxm-ledger-insight-head strong {
color: var(--hbg);
font-size: 13px;
font-weight: 950;
}
body.rxm-mobile-viewport .rxm-ledger-insight-head button {
border: 0;
border-radius: 999px;
padding: 7px 10px;
background: rgba(255,255,255,.9);
color: var(--cz);
font: 850 11px/1 'Segoe UI', system-ui, sans-serif;
}
body.rxm-mobile-viewport .rxm-ledger-mini-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 10px;
}
body.rxm-mobile-viewport .rxm-ledger-mini-grid div {
min-width: 0;
border-radius: 14px;
padding: 10px 8px;
background: rgba(255,255,255,.82);
border: 1px solid rgba(221,225,231,.86);
}
body.rxm-mobile-viewport .rxm-ledger-mini-grid span,
body.rxm-mobile-viewport .rxm-ledger-bars span {
display: block;
color: var(--cz);
font-size: 9px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .45px;
}
body.rxm-mobile-viewport .rxm-ledger-mini-grid strong,
body.rxm-mobile-viewport .rxm-ledger-bars strong {
display: block;
color: var(--hbg);
font-size: 12px;
font-weight: 950;
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.rxm-mobile-viewport .rxm-ledger-mini-grid strong.pos { color: var(--vd); }
body.rxm-mobile-viewport .rxm-ledger-mini-grid strong.neg { color: var(--vm); }
body.rxm-mobile-viewport .rxm-ledger-bars {
display: grid;
gap: 8px;
}
body.rxm-mobile-viewport .rxm-ledger-bars article > div {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
margin-bottom: 5px;
}
body.rxm-mobile-viewport .rxm-ledger-bars i {
display: block;
height: 9px;
overflow: hidden;
border-radius: 999px;
background: rgba(10,42,94,.08);
}
body.rxm-mobile-viewport .rxm-ledger-bars em {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #0a2a5e, #245fff);
}
body.rxm-mobile-viewport .rxm-ledger-bars em.warn {
background: linear-gradient(90deg, #b45309, #ef9d28);
}
body.rxm-mobile-viewport .rxm-ledger-bars small {
display: block;
color: var(--tx2);
font-size: 11px;
margin-top: 4px;
}
}
/* ═══════════════════════════════════════════════
v2.2.69 — Mobile final polish
- Cartões CC como módulo/redirecionador
- Cards com botão X seguro
- Voltar interno e foco visual dos painéis
- Inserção manual de compra no cartão sem status por item
═══════════════════════════════════════════════ */
@media (max-width: 820px) {
body.rxm-mobile-viewport .rxm-section-head-nav {
grid-template-columns: auto 1fr;
justify-content: flex-start;
gap: 10px;
}
body.rxm-mobile-viewport .rxm-back-btn {
width: 40px;
height: 40px;
border-radius: 14px;
border: 1px solid rgba(10,42,94,.12);
background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,246,255,.88));
color: #0a2a5e;
font-size: 20px;
font-weight: 950;
display: inline-grid;
place-items: center;
box-shadow: 0 10px 24px rgba(5,18,42,.10);
flex: 0 0 auto;
}
body.rxm-mobile-viewport .rxm-panel-focus {
animation: rxmPanelFocusPulse 1.15s ease-out;
}
@keyframes rxmPanelFocusPulse {
0% { box-shadow: 0 0 0 0 rgba(36,95,255,.0), 0 18px 45px rgba(7,20,44,.08); }
24% { box-shadow: 0 0 0 4px rgba(36,95,255,.10), 0 18px 45px rgba(7,20,44,.10); }
100% { box-shadow: 0 0 0 0 rgba(36,95,255,.0), 0 18px 45px rgba(7,20,44,.08); }
}
body.rxm-mobile-viewport .rxm-mobile-card,
body.rxm-mobile-viewport .rxm-recent-item {
position: relative;
padding-top: 16px;
}
body.rxm-mobile-viewport .rxm-card-x {
position: absolute;
top: 9px;
right: 9px;
width: 30px;
height: 30px;
border: 0;
border-radius: 11px;
background: rgba(15,23,42,.06);
color: #667085;
font-size: 17px;
font-weight: 900;
line-height: 1;
display: inline-grid;
place-items: center;
z-index: 2;
}
body.rxm-mobile-viewport .rxm-card-x:active {
transform: scale(.96);
background: rgba(185,28,28,.10);
color: #991b1b;
}
body.rxm-mobile-viewport .rxm-category-card.is-redirect {
border-color: rgba(10,42,94,.20);
background: linear-gradient(145deg, rgba(10,42,94,.98), rgba(21,58,115,.94));
color: #fff;
box-shadow: 0 16px 34px rgba(10,42,94,.20);
}
body.rxm-mobile-viewport .rxm-category-card.is-redirect .rxm-icon-badge {
background: rgba(255,255,255,.14);
color: #fff;
border-color: rgba(255,255,255,.18);
}
body.rxm-mobile-viewport .rxm-category-card.is-redirect strong,
body.rxm-mobile-viewport .rxm-category-card.is-redirect small,
body.rxm-mobile-viewport .rxm-category-card.is-redirect b {
color: #fff;
}
body.rxm-mobile-viewport .rxm-card-items-mini {
list-style: none;
margin: 9px 0 0;
padding: 0;
display: grid;
gap: 6px;
}
body.rxm-mobile-viewport .rxm-card-items-mini li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 8px;
padding: 7px 9px;
border: 1px solid rgba(10,42,94,.08);
border-radius: 12px;
background: rgba(255,255,255,.66);
}
body.rxm-mobile-viewport .rxm-card-items-mini span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #14213d;
font-size: 12px;
font-weight: 800;
}
body.rxm-mobile-viewport .rxm-card-items-mini em {
color: #667085;
font-size: 11px;
font-style: normal;
font-weight: 800;
white-space: nowrap;
}
body.rxm-mobile-viewport .rxm-card-items-mini strong {
color: #0a2a5e;
font-size: 12px;
font-weight: 950;
white-space: nowrap;
}
body.rxm-mobile-viewport [data-rxm-form-section="cartao_item"] .rxm-form-info {
background: linear-gradient(145deg, rgba(10,42,94,.08), rgba(36,95,255,.05));
}
body.rxm-mobile-viewport [data-rxm-form-section="cartao_item"] .rxm-form-row {
grid-template-columns: 1.25fr .7fr .7fr;
}
}
/* v2.2.72 — Sync mobile operacional: pull refresh, dívidas e reserva em cards */
@media (max-width: 820px) {
.rxm-pull-refresh {
position: sticky;
top: 0;
z-index: 25;
margin: -42px auto 8px;
width: max-content;
max-width: calc(100% - 32px);
padding: 8px 14px;
border-radius: 999px;
background: rgba(15, 23, 42, .88);
color: #fff;
font-size: 12px;
font-weight: 800;
letter-spacing: -.01em;
box-shadow: 0 16px 34px rgba(15, 23, 42, .22);
opacity: 0;
transform: translateY(0);
transition: opacity .18s ease, transform .18s ease;
pointer-events: none;
}
.rxm-pull-refresh.show { opacity: 1; }
.rxm-mobile-kpi-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 12px 0;
}
.rxm-mobile-kpi-row article {
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 18px;
padding: 12px;
background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,248,252,.92));
box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}
.rxm-mobile-kpi-row span {
display: block;
font-size: 11px;
color: #64748b;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 4px;
}
.rxm-mobile-kpi-row strong {
display: block;
font-size: 15px;
color: #0f172a;
line-height: 1.15;
}
.rxm-mobile-record-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding-right: 42px !important;
}
.rxm-mobile-record-card b {
font-size: 15px;
color: #0f172a;
white-space: nowrap;
}
.rxm-mobile-record-card small {
color: #64748b;
font-weight: 700;
}
.rxm-reserve-mobile-bar {
height: 12px;
border-radius: 999px;
background: rgba(15, 23, 42, .08);
overflow: hidden;
margin: 8px 0 14px;
}
.rxm-reserve-mobile-bar span {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, #0f766e, #14b8a6);
transition: width .25s ease;
}
.rxm-mini-month-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px 10px;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 16px;
padding: 11px 12px;
background: #fff;
}
.rxm-mini-month-card span,
.rxm-mini-month-card small { color: #64748b; font-size: 12px; font-weight: 700; }
.rxm-mini-month-card strong { color: #0f172a; font-size: 14px; }
.rxm-card-actions-mobile {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 12px;
}
.rxm-card-actions-mobile button {
width: 100%;
justify-content: center;
}
.rxm-launch-subpanel.rxm-panel-focus,
.rxm-section-card.rxm-panel-focus {
outline: 2px solid rgba(37, 99, 235, .28);
box-shadow: 0 0 0 6px rgba(37, 99, 235, .08), 0 18px 48px rgba(15, 23, 42, .10);
}
}
/* v2.2.73 — curadoria visual/operacional pós-teste controlado */
@media (max-width: 820px) {
body.rxm-mobile-viewport .rxm-debt-mobile-card {
grid-template-columns: 1fr !important;
align-items: stretch !important;
gap: 12px !important;
padding: 16px 54px 16px 16px !important;
border-radius: 24px !important;
overflow: visible !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-main {
display: grid !important;
gap: 4px !important;
min-width: 0 !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-main span {
color: #64748b !important;
font-size: 11px !important;
font-weight: 900 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-main strong {
display: block !important;
color: #06152f !important;
font-size: clamp(18px, 5vw, 24px) !important;
line-height: 1.08 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-main small {
color: #65748d !important;
font-size: 12px !important;
font-weight: 750 !important;
line-height: 1.3 !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-value b {
display: block !important;
color: #07142c !important;
font-size: clamp(22px, 7vw, 32px) !important;
font-weight: 950 !important;
white-space: nowrap !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-card .rxm-recent-actions {
grid-template-columns: 1fr !important;
margin-top: 2px !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-card .rxm-recent-actions button {
min-height: 48px !important;
border-radius: 17px !important;
background: #eef4ff !important;
color: #092d6d !important;
font-size: 14px !important;
}
body.rxm-mobile-viewport #rxmReservaPanel [data-rxm-action="abrir-lancamento"][data-kind="reserva"] {
background: linear-gradient(135deg, #0a2a5e, #1f5bff) !important;
color: #fff !important;
border: 0 !important;
box-shadow: 0 16px 34px rgba(31, 91, 255, .28) !important;
font-weight: 950 !important;
}
body.rxm-mobile-viewport #rxmReservaPanel [data-rxm-action="mobile-zerar-reserva"] {
background: #f4f7fb !important;
color: #0f172a !important;
}
}
/* Agenda desktop: painel lateral sem ações amontoadas */
.rx-agenda-v2 .rx-agenda-detail {
grid-template-columns: 1fr !important;
gap: 12px !important;
align-items: stretch !important;
}
.rx-agenda-v2 .rx-agenda-detail-main strong {
max-width: 100% !important;
white-space: normal !important;
line-height: 1.18 !important;
}
.rx-agenda-v2 .rx-agenda-detail-side {
width: 100% !important;
align-items: stretch !important;
flex-direction: column !important;
gap: 10px !important;
}
.rx-agenda-v2 .rx-agenda-detail-side b {
text-align: left !important;
font-size: 15px !important;
}
.rx-agenda-v2 .rx-agenda-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
}
.rx-agenda-v2 .rx-agenda-actions button {
width: 100% !important;
min-height: 40px !important;
justify-content: center !important;
text-align: center !important;
}
/* Dívidas desktop: lista de parcelas com data correta e sem poluição visual */
.rx-debt-installment {
grid-template-columns: minmax(0,1fr) auto !important;
gap: 10px !important;
}
.rx-debt-installment strong {
grid-column: 1 / -1;
justify-self: end;
}
/* v2.2.74 — Curadoria mobile premium e navegação funcional */
@media (max-width: 820px) {
body.rxm-mobile-viewport .rxm-page-title-nav {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px;
}
body.rxm-mobile-viewport .rxm-status-grid-home {
margin: 12px 0 10px !important;
}
body.rxm-mobile-viewport .rxm-status-grid-home .rxm-stat {
border: 0;
appearance: none;
-webkit-appearance: none;
text-align: left;
position: relative;
min-height: 96px;
padding: 18px 16px !important;
cursor: pointer;
}
body.rxm-mobile-viewport .rxm-status-grid-home .rxm-stat em {
display: block;
margin-top: 8px;
color: #64748b;
font-size: 11px;
font-weight: 850;
font-style: normal;
letter-spacing: -.01em;
}
body.rxm-mobile-viewport .rxm-status-grid-home .rxm-stat:active,
body.rxm-mobile-viewport .rxm-module-card:active,
body.rxm-mobile-viewport .rxm-more-grid button:active,
body.rxm-mobile-viewport .rxm-launch-card:active {
transform: translateY(1px) scale(.992);
}
body.rxm-mobile-viewport .rxm-smart-strip {
margin-bottom: 12px !important;
}
body.rxm-mobile-viewport .rxm-module-grid {
margin-top: 12px !important;
}
body.rxm-mobile-viewport .rxm-mobile-chart-card {
margin-top: 12px !important;
}
body.rxm-mobile-viewport .rxm-launch-title {
margin-bottom: 12px !important;
}
body.rxm-mobile-viewport #rxmLaunchHome {
position: relative;
margin-bottom: 14px;
}
body.rxm-mobile-viewport #rxm-panel-lancar > .rxm-launch-grid {
margin-top: 0 !important;
}
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card {
min-height: 116px !important;
padding: 16px !important;
justify-content: flex-start !important;
gap: 9px !important;
}
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card b {
display: none !important;
}
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card strong {
font-size: clamp(18px, 5vw, 22px) !important;
line-height: 1.05 !important;
}
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card small {
font-size: 13px !important;
line-height: 1.2 !important;
}
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card-wide,
body.rxm-mobile-viewport .rxm-launch-grid-2x2 .rxm-launch-card.reserva {
min-height: 92px !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-card--compact {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px 12px !important;
padding: 15px !important;
border-radius: 22px !important;
background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(243,248,255,.96)) !important;
border: 1px solid rgba(190,207,235,.42) !important;
box-shadow: 0 14px 30px rgba(7,20,44,.09) !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-card--compact .rxm-debt-mobile-main {
gap: 2px !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-card--compact .rxm-debt-mobile-main span {
font-size: 10px !important;
letter-spacing: .07em !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-card--compact .rxm-debt-mobile-main strong {
font-size: clamp(16px, 4.6vw, 20px) !important;
line-height: 1.1 !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-card--compact .rxm-debt-mobile-main small {
font-size: 11px !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-card--compact .rxm-debt-mobile-value {
text-align: right;
}
body.rxm-mobile-viewport .rxm-debt-mobile-card--compact .rxm-debt-mobile-value b {
font-size: clamp(17px, 5vw, 22px) !important;
line-height: 1.05 !important;
}
body.rxm-mobile-viewport .rxm-debt-mobile-actions {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 2px;
}
body.rxm-mobile-viewport .rxm-debt-mobile-actions button {
min-height: 42px;
border-radius: 15px;
border: 1px solid rgba(10,42,94,.12);
background: #eef4ff;
color: #092d6d;
font-weight: 900;
font-size: 13px;
}
body.rxm-mobile-viewport .rxm-debt-mobile-actions button.danger {
background: rgba(15,23,42,.05);
color: #667085;
}
body.rxm-mobile-viewport .rxm-toast {
left: 18px !important;
right: 18px !important;
bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
width: auto !important;
min-height: auto !important;
padding: 12px 16px !important;
border-radius: 22px !important;
font-size: 13px !important;
box-shadow: 0 18px 40px rgba(0,0,0,.22) !important;
}
body.rxm-mobile-viewport .rxm-more-grid button,
body.rxm-mobile-viewport .rxm-module-card,
body.rxm-mobile-viewport .rxm-launch-card,
body.rxm-mobile-viewport .rxm-smart-strip button,
body.rxm-mobile-viewport .rxm-status-grid-home .rxm-stat {
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
body.rxm-mobile-viewport .rxm-content {
scroll-behavior: smooth;
overscroll-behavior-y: contain;
}
}
/* v2.2.76 — Curadoria final mobile + múltiplos cartões */
@media (max-width: 820px) {
body.rxm-mobile-viewport .rxm-content {
padding-bottom: calc(172px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Home: transformar módulos em atalhos, não em mini-dashboard */
body.rxm-mobile-viewport .rxm-module-grid {
gap: 12px !important;
margin-top: 14px !important;
}
body.rxm-mobile-viewport .rxm-module-card {
min-height: 92px !important;
padding: 16px !important;
border-radius: 24px !important;
align-content: center !important;
box-shadow: 0 14px 34px rgba(7, 20, 44, .10) !important;
}
body.rxm-mobile-viewport .rxm-module-card strong {
display: none !important;
}
body.rxm-mobile-viewport .rxm-module-card small {
color: #07142c !important;
font-size: clamp(18px, 5vw, 22px) !important;
font-weight: 950 !important;
line-height: 1.05 !important;
letter-spacing: -.03em !important;
}
body.rxm-mobile-viewport .rxm-module-card em {
color: #6b778c !important;
font-size: 13px !important;
font-weight: 750 !important;
margin-top: 2px !important;
}
body.rxm-mobile-viewport .rxm-primary-cta {
min-height: 74px !important;
border-radius: 24px !important;
margin-top: 14px !important;
}
/* Lançar: resumo compacto no topo, módulos em seguida e lista abaixo */
body.rxm-mobile-viewport .rxm-launch-overview {
padding: 18px !important;
border-radius: 26px !important;
margin-bottom: 14px !important;
}
body.rxm-mobile-viewport .rxm-section-head-compact {
gap: 10px !important;
align-items: center !important;
margin-bottom: 10px !important;
}
body.rxm-mobile-viewport .rxm-section-head-compact h3 {
font-size: clamp(20px, 5.8vw, 26px) !important;
line-height: 1.03 !important;
}
body.rxm-mobile-viewport #rxmLedgerActionBtn {
min-height: 44px !important;
padding: 0 16px !important;
border-radius: 18px !important;
background: #eef4ff !important;
color: #092d6d !important;
box-shadow: none !important;
}
body.rxm-mobile-viewport .rxm-ledger-insight-compact {
display: grid !important;
gap: 12px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.rxm-mobile-viewport .rxm-ledger-mini-grid-compact {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.rxm-mobile-viewport .rxm-ledger-mini-grid-compact div {
padding: 12px 10px !important;
border-radius: 17px !important;
background: rgba(255,255,255,.82) !important;
border: 1px solid rgba(180, 196, 220, .38) !important;
min-width: 0 !important;
}
body.rxm-mobile-viewport .rxm-ledger-mini-grid-compact span {
display: block !important;
font-size: 10px !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: #6b778c !important;
font-weight: 950 !important;
margin-bottom: 4px !important;
}
body.rxm-mobile-viewport .rxm-ledger-mini-grid-compact strong {
display: block !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: clamp(13px, 3.7vw, 16px) !important;
color: #07142c !important;
}
body.rxm-mobile-viewport .rxm-ledger-bars-compact {
display: grid !important;
gap: 10px !important;
}
body.rxm-mobile-viewport .rxm-ledger-bars-compact article {
display: grid !important;
gap: 6px !important;
}
body.rxm-mobile-viewport .rxm-ledger-bars-compact article > div {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
color: #07142c !important;
font-weight: 900 !important;
}
body.rxm-mobile-viewport .rxm-ledger-bars-compact span {
color: #667085 !important;
font-size: 11px !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
body.rxm-mobile-viewport .rxm-ledger-bars-compact i {
height: 10px !important;
border-radius: 999px !important;
background: rgba(15,23,42,.08) !important;
overflow: hidden !important;
}
body.rxm-mobile-viewport .rxm-ledger-bars-compact em {
display: block !important;
height: 100% !important;
border-radius: inherit !important;
background: linear-gradient(90deg, #0a2a5e, #1f5bff) !important;
}
body.rxm-mobile-viewport .rxm-ledger-bars-compact em.warn {
background: linear-gradient(90deg, #b85b00, #f59e0b) !important;
}
body.rxm-mobile-viewport .rxm-launch-list-section {
margin-top: 14px !important;
padding: 18px !important;
border-radius: 26px !important;
}
body.rxm-mobile-viewport .rxm-launch-list-section .rxm-filter-row-mini {
margin: 8px 0 14px !important;
}
body.rxm-mobile-viewport .rxm-launch-grid-2x2 {
margin-top: 12px !important;
}
/* Cartão/Faturas: fluxo menos duplicado e foco na fatura escolhida */
body.rxm-mobile-viewport .rxm-card-channel--pdf {
padding: 18px !important;
border-radius: 26px !important;
}
body.rxm-mobile-viewport .rxm-card-channel--pdf .rxm-section-head {
margin-bottom: 12px !important;
}
body.rxm-mobile-viewport .rxm-pdf-flow {
gap: 8px !important;
margin: 10px 0 12px !important;
}
body.rxm-mobile-viewport .rxm-pdf-flow span {
min-height: 44px !important;
border-radius: 16px !important;
padding: 8px 10px !important;
font-size: 12px !important;
}
body.rxm-mobile-viewport .rxm-card-channel--pdf p {
font-size: 13px !important;
line-height: 1.45 !important;
color: #667085 !important;
}
body.rxm-mobile-viewport .rxm-mobile-card-cartao {
padding: 20px 18px !important;
border-radius: 28px !important;
}
body.rxm-mobile-viewport .rxm-mobile-card-cartao .rxm-mobile-card-main strong {
font-size: clamp(19px, 5.2vw, 24px) !important;
}
body.rxm-mobile-viewport .rxm-mobile-card-cartao .rxm-mobile-actions {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
body.rxm-mobile-viewport .rxm-mobile-card-cartao .rxm-mobile-actions button {
min-height: 52px !important;
border-radius: 18px !important;
}
/* Lista de lançamentos: mais respiro antes da bottom-nav */
body.rxm-mobile-viewport #rxmLancamentosMesCards,
body.rxm-mobile-viewport #rxmCartoesCards,
body.rxm-mobile-viewport #rxmDividasCards,
body.rxm-mobile-viewport #rxmReservaHistoricoCards {
padding-bottom: 28px !important;
}
}
/* v2.2.81 — UX final: sync discreto, atalhos limpos e ajuste de densidade */
@media (max-width: 820px) {
body.rxm-mobile-viewport .rxm-toast.compact {
left: 50% !important;
right: auto !important;
width: auto !important;
max-width: calc(100vw - 56px) !important;
min-height: 0 !important;
padding: 9px 14px !important;
border-radius: 999px !important;
transform: translate(-50%, 10px) !important;
font-size: 12px !important;
letter-spacing: .01em !important;
box-shadow: 0 12px 28px rgba(7, 20, 44, .22) !important;
white-space: nowrap !important;
}
body.rxm-mobile-viewport .rxm-toast.compact.show {
transform: translate(-50%, 0) !important;
}
body.rxm-mobile-viewport .rxm-toast.error {
background: #8f1d18 !important;
}
body.rxm-mobile-viewport .rxm-toast.success {
background: var(--vd) !important;
}
body.rxm-mobile-viewport #rxmPullRefresh {
font-size: 11px !important;
opacity: .82 !important;
}
body.rxm-mobile-viewport .rxm-card-channel--pdf .rxm-section-head {
align-items: flex-start !important;
}
body.rxm-mobile-viewport .rxm-card-channel--pdf p {
margin-top: 10px !important;
font-size: 14px !important;
line-height: 1.45 !important;
}
body.rxm-mobile-viewport .rxm-mobile-chart-card {
margin-top: 14px !important;
}
}
/* v2.2.83 — sync silencioso + botões de pagamento com semântica visual */
@media (max-width: 820px) {
.rxm-pull-refresh,
.rxm-pull-refresh.show {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
transform: none !important;
}
body.rxm-mobile-viewport .rxm-mobile-card-saida .rxm-mobile-actions button[data-rxm-action="toggle-pago"]:not(.is-done),
body.rxm-mobile-viewport .rxm-agenda-mobile-card.saida .rxm-mobile-actions button[data-rxm-action="toggle-pago"]:not(.is-done),
body.rxm-mobile-viewport .rxm-recent-item.saida .rxm-recent-actions button[data-rxm-action="toggle-pago"]:not(.is-done),
body.rxm-mobile-viewport .rxm-pay-btn:not(.is-paid) {
background: linear-gradient(145deg, #f06565, #dc3f3f) !important;
color: #fff !important;
border-color: rgba(220, 63, 63, .30) !important;
box-shadow: 0 10px 24px rgba(220, 63, 63, .18) !important;
}
body.rxm-mobile-viewport .rxm-mobile-card-saida .rxm-mobile-actions button[data-rxm-action="toggle-pago"].is-done,
body.rxm-mobile-viewport .rxm-agenda-mobile-card.saida .rxm-mobile-actions button[data-rxm-action="toggle-pago"].is-done,
body.rxm-mobile-viewport .rxm-recent-item.saida .rxm-recent-actions button[data-rxm-action="toggle-pago"].is-done,
body.rxm-mobile-viewport .rxm-pay-btn.is-paid {
background: linear-gradient(145deg, #22c55e, #16a34a) !important;
color: #fff !important;
border-color: rgba(22, 163, 74, .30) !important;
box-shadow: 0 10px 24px rgba(22, 163, 74, .16) !important;
}
}
/* =============================================================
v2.2.86 — CTA de adicionar cartão/fatura sem microtexto
Ajuste visual seguro: botão chama/reaproveita faturas vazias existentes.
============================================================= */
@media (max-width: 820px) {
body.rxm-mobile-viewport #rxm-panel-cartoes .rxm-card-actions-inline {
grid-template-columns: 1fr !important;
width: min(100%, 260px) !important;
margin-left: auto !important;
}
body.rxm-mobile-viewport #rxm-panel-cartoes .rxm-card-add-primary,
body.rxm-mobile-viewport #rxm-panel-cartoes .rxm-empty-actions .rxm-card-add-primary {
min-height: 48px !important;
border: 1px solid rgba(96, 165, 250, .34) !important;
border-radius: 18px !important;
background: linear-gradient(145deg, #06204b 0%, #0d3b8f 58%, #2563eb 100%) !important;
color: #fff !important;
box-shadow: 0 16px 32px rgba(37, 99, 235, .24), inset 0 1px 0 rgba(255,255,255,.18) !important;
font-weight: 950 !important;
letter-spacing: .01em !important;
}
body.rxm-mobile-viewport #rxm-panel-cartoes .rxm-card-add-primary:active {
transform: translateY(1px) scale(.99);
}
/* v2.2.86: botão em destaque sem microtexto explicativo. */
}