/* ============================================================= VendasPay — Modo NOTURNO total (sem gradientes) ------------------------------------------------------------- Ativado via [data-theme="dark"] no . Mantém apenas a cor primária #ff6b1a (identidade da marca). Tudo o mais: - Backgrounds vão pra escuro - Gradientes viram cor sólida - Bordas mais sutis - Textos com contraste WCAG AA ============================================================= */ :root[data-theme="dark"] { /* Superfícies — escalada de profundidade */ --vp-bg: #0e1620; --vp-bg-elevated: #16202d; --vp-surface: #1a2532; --vp-surface-alt: #1f2a39; --vp-surface-soft: #16202d; --vp-border: #2a3849; --vp-border-strong: #3a485b; /* Textos */ --vp-text: #e6eaf0; --vp-text-muted: #8e9dad; /* Tonalidades neutras invertidas (claras viram escuras) */ --vp-n50: #16202d; --vp-n100: #1f2a39; --vp-n200: #2a3849; --vp-n300: #3a485b; --vp-n400: #62758a; --vp-n500: #8e9dad; --vp-n600: #b4becb; --vp-n700: #d0d8e0; --vp-n800: #e6eaf0; --vp-n900: #f4f7fb; /* Status com fundo translúcido pra contrastar no escuro */ --vp-success-100: rgba(15,159,110,.16); --vp-warn-100: rgba(217,119,6,.16); --vp-danger-100: rgba(220,38,38,.16); --vp-info-100: rgba(37,99,235,.16); /* Primária — fundos translúcidos pra cards laranjas no escuro */ --vp-primary-50: rgba(255,107,26,.10); --vp-primary-100: rgba(255,107,26,.18); --vp-primary-200: rgba(255,107,26,.30); /* PDV tokens — herdam superfícies invertidas */ --pdv-bg: #0e1620; --pdv-card: #1a2532; --pdv-border: #2a3849; --pdv-border-2: #243040; --pdv-text: #e6eaf0; --pdv-muted: #8e9dad; --pdv-muted-2: #8e9dad; --pdv-ring: rgba(255,107,26,.30); --pdv-shadow: 0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30); --pdv-shadow-md: 0 4px 14px rgba(0,0,0,.40); --pdv-shadow-lg: 0 12px 30px rgba(0,0,0,.50); } /* ──────────── BODY E LAYOUT GLOBAL ──────────── */ [data-theme="dark"] body { background: var(--vp-bg); color: var(--vp-text); } /* ──────────── INPUTS E TEXTAREAS ──────────── */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .vp-input, [data-theme="dark"] .pdv-input { background: var(--vp-surface) !important; color: var(--vp-text); border-color: var(--vp-border); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder, [data-theme="dark"] .vp-input::placeholder { color: var(--vp-text-muted); opacity: .65; } [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); } /* Search inputs com background image (lupa SVG) — força fundo escuro */ [data-theme="dark"] .pdv-cat__search { background-color: var(--vp-surface) !important; } /* ──────────── CARDS / SUPERFÍCIES ──────────── */ [data-theme="dark"] .vp-card, [data-theme="dark"] .vp-form-section, [data-theme="dark"] .vp-modal-box, [data-theme="dark"] .pdv-cart, [data-theme="dark"] .pdv-cat, [data-theme="dark"] .pdv-header, [data-theme="dark"] .pdv-item, [data-theme="dark"] .pdv-prd, [data-theme="dark"] .pdv-chip, [data-theme="dark"] .bank-tx, [data-theme="dark"] .adm-card, [data-theme="dark"] .vp-sidebar, [data-theme="dark"] .vp-topbar, [data-theme="dark"] .vp-bottomnav, [data-theme="dark"] .vp-menu-sheet { background: var(--vp-surface) !important; color: var(--vp-text); border-color: var(--vp-border); } /* Cards "fundo cinza claro" (zonas de input) viram fundo escuro 1 nível abaixo */ [data-theme="dark"] .pdv-ident, [data-theme="dark"] .pdv-cart__tabs { background: var(--vp-bg) !important; border-color: var(--vp-border); } /* Linhas, separators, dividers */ [data-theme="dark"] hr, [data-theme="dark"] .pdv-cart__header, [data-theme="dark"] .pdv-cart__footer { border-color: var(--vp-border) !important; } /* ──────────── REMOVER TODOS OS GRADIENTES ──────────── */ [data-theme="dark"] [class*="-bar"], [data-theme="dark"] .pdv-cart-bar, [data-theme="dark"] .vp-topbar, [data-theme="dark"] .vp-bottomnav, [data-theme="dark"] .vp-bg-light, [data-theme="dark"] .vp-shell-banner { background-image: none !important; } /* Cards com gradiente claro (avisos, alertas) — vira tom escuro suave */ [data-theme="dark"] [style*="linear-gradient"] { background-image: none !important; } /* Especificos identificados no CSS principal */ [data-theme="dark"] .pdv-cat__avulsa, [data-theme="dark"] .pdv-cart__cta, [data-theme="dark"] .pdv-cart-bar__cta { background: var(--vp-primary) !important; background-image: none !important; } [data-theme="dark"] .pdv-cat__avulsa:hover, [data-theme="dark"] .pdv-cart__cta:hover, [data-theme="dark"] .pdv-cart-bar__cta:hover { background: var(--vp-primary-600) !important; } /* Cards com fundo amarelo claro (warns/alerts antigos) */ [data-theme="dark"] [style*="rgba(255, 255, 255"], [data-theme="dark"] [style*="rgba(255,255,255"] { background-image: none !important; } /* PDV cards de produto: faixa lateral colorida fica, fundo vira escuro */ [data-theme="dark"] .pdv-prd { background: var(--vp-surface) !important; } [data-theme="dark"] .pdv-prd__nome, [data-theme="dark"] .pdv-prd__preco { color: var(--vp-text); } [data-theme="dark"] .pdv-prd__add { background: var(--vp-border) !important; color: var(--vp-text-muted); } [data-theme="dark"] .pdv-prd:hover .pdv-prd__add { background: var(--vp-primary) !important; color: #fff; } /* ──────────── BOTÕES ──────────── */ [data-theme="dark"] .vp-btn--secondary { background: var(--vp-surface-alt); color: var(--vp-text); border-color: var(--vp-border); } [data-theme="dark"] .vp-btn--secondary:hover { background: var(--vp-n100); } [data-theme="dark"] .vp-btn--ghost { color: var(--vp-text); background: transparent; } [data-theme="dark"] .vp-btn--ghost:hover { background: var(--vp-surface-alt); } /* ──────────── TABELAS ──────────── */ [data-theme="dark"] table { color: var(--vp-text); } [data-theme="dark"] table thead tr { background: var(--vp-surface-alt) !important; border-color: var(--vp-border); } [data-theme="dark"] table thead th { color: var(--vp-text-muted) !important; } [data-theme="dark"] table tbody tr { border-color: var(--vp-border) !important; } [data-theme="dark"] table tbody tr:hover { background: var(--vp-surface-alt); } /* ──────────── SIDEBAR (links, avatar, etc) ──────────── */ [data-theme="dark"] .vp-sidebar__link { color: var(--vp-text-muted); background: transparent; } [data-theme="dark"] .vp-sidebar__link:hover { color: var(--vp-text); background: var(--vp-surface-alt); } [data-theme="dark"] .vp-sidebar__link.is-active { color: var(--vp-primary); background: var(--vp-primary-50); } [data-theme="dark"] .vp-sidebar__user { background: var(--vp-surface-alt); border-color: var(--vp-border); } [data-theme="dark"] .vp-sidebar__user-avatar { background: var(--vp-primary); color: #fff; } /* ──────────── BOTTOM NAV (mobile) ──────────── */ [data-theme="dark"] .vp-bottomnav { background: var(--vp-surface) !important; border-top: 1px solid var(--vp-border); } [data-theme="dark"] .vp-bottomnav__item { color: var(--vp-text-muted); } [data-theme="dark"] .vp-bottomnav__item.is-active { color: var(--vp-primary); } [data-theme="dark"] .vp-bottomnav__fab { background: var(--vp-primary); } /* ──────────── CARRINHO DO PDV NO MOBILE (fullscreen) ──────────── */ [data-theme="dark"] .pdv-cart.is-mobile-open .pdv-cart__header, [data-theme="dark"] .pdv-cart.is-mobile-open .pdv-cart__footer { background: var(--vp-surface) !important; border-color: var(--vp-border); } [data-theme="dark"] .pdv-cart.is-mobile-open .pdv-cart__list { background: var(--vp-bg) !important; } /* ──────────── CHIP CLIENTE SELECIONADO ──────────── */ [data-theme="dark"] .pdv-cli-chip { background: rgba(255,107,26,.12) !important; border-color: var(--vp-primary); } [data-theme="dark"] .pdv-cli-chip__info strong { color: var(--vp-text); } [data-theme="dark"] .pdv-cli-chip__info small { color: var(--vp-primary-200); } [data-theme="dark"] .pdv-cli-chip button { color: var(--vp-text-muted); } [data-theme="dark"] .pdv-cli-chip button:hover { background: rgba(255,255,255,.06); color: var(--vp-danger); } /* ──────────── MENU SHEET (cards do menu hamburger mobile) ──────────── */ [data-theme="dark"] .vp-menu-sheet__item { background: var(--vp-surface-alt) !important; border-color: var(--vp-border) !important; color: var(--vp-text) !important; } [data-theme="dark"] .vp-menu-sheet__item:hover { background: var(--vp-primary-50) !important; border-color: var(--vp-primary) !important; color: var(--vp-primary) !important; } [data-theme="dark"] .vp-menu-sheet__item.is-active { background: var(--vp-primary-100) !important; border-color: var(--vp-primary) !important; color: var(--vp-primary) !important; } [data-theme="dark"] .vp-menu-sheet__label { color: inherit; } /* ──────────── MODAL DE CONFIRMAÇÃO (vpConfirm) ──────────── */ [data-theme="dark"] .vp-confirm__dialog { background: var(--vp-surface) !important; border: 1px solid var(--vp-border); box-shadow: 0 20px 50px rgba(0,0,0,.55); } [data-theme="dark"] .vp-confirm__title { color: var(--vp-text) !important; } [data-theme="dark"] .vp-confirm__message { color: var(--vp-text-muted) !important; } [data-theme="dark"] .vp-confirm__icon { background: var(--vp-primary-50) !important; color: var(--vp-primary); } [data-theme="dark"] .vp-confirm--success .vp-confirm__icon { background: rgba(15,159,110,.18) !important; color: #6ee7b7; } [data-theme="dark"] .vp-confirm--danger .vp-confirm__icon { background: rgba(220,38,38,.18) !important; color: #fca5a5; } [data-theme="dark"] .vp-confirm--warn .vp-confirm__icon { background: rgba(217,119,6,.18) !important; color: #fcd34d; } [data-theme="dark"] .vp-confirm--info .vp-confirm__icon { background: rgba(37,99,235,.18) !important; color: #93c5fd; } [data-theme="dark"] .vp-confirm__actions { border-top: 1px solid var(--vp-border); background: var(--vp-bg-elevated); } [data-theme="dark"] .vp-confirm__input { background: var(--vp-bg-elevated); border-color: var(--vp-border); color: var(--vp-text); } /* Botão Sair no menu sheet — atenuado no dark pra não brilhar demais */ [data-theme="dark"] .vp-menu-sheet__logout { background: rgba(220,38,38,.10) !important; border-color: rgba(220,38,38,.30) !important; color: #fca5a5 !important; } [data-theme="dark"] .vp-menu-sheet__logout:hover { background: rgba(220,38,38,.20) !important; } /* Toggle tema do sheet no dark — fundo ainda mais escuro pra destoar do sair */ [data-theme="dark"] .vp-theme-toggle--sheet { background: var(--vp-surface-alt) !important; border-color: var(--vp-border) !important; color: var(--vp-text); } [data-theme="dark"] .vp-theme-toggle--sheet:hover { background: var(--vp-bg-elevated) !important; } /* ──────────── TELA DE LOGIN ──────────── */ [data-theme="dark"] body.vp-auth, [data-theme="dark"] .vp-auth { background: var(--vp-bg) !important; background-image: radial-gradient(1200px 600px at -10% -20%, rgba(255,107,26,.10), transparent 60%), radial-gradient(1000px 500px at 110% 120%, rgba(255,146,72,.06), transparent 58%) !important; } [data-theme="dark"] .vp-auth__panel { background: var(--vp-surface) !important; border-color: var(--vp-border) !important; color: var(--vp-text); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-theme="dark"] .vp-auth__title { color: var(--vp-text); } [data-theme="dark"] .vp-auth__sub { color: var(--vp-text-muted); } [data-theme="dark"] .vp-auth__trust { color: var(--vp-text-muted); border-top-color: var(--vp-border); } [data-theme="dark"] .vp-auth__eyebrow { background: var(--vp-primary-50); color: var(--vp-primary); } /* Aside laranja/azul mantém visual de marketing — só ajusta texto */ [data-theme="dark"] .vp-auth__aside-card { background: radial-gradient(circle at top right, rgba(255,255,255,.08), transparent 28%), linear-gradient(145deg, #0a1a2c 0%, #112743 52%, #1a3a5e 100%) !important; } /* Logos de auth — usa o swap padrão (.vp-logo--light / --dark) */ .vp-auth__brand img.vp-auth__logo.vp-logo--dark { display: none; } [data-theme="dark"] .vp-auth__brand img.vp-auth__logo.vp-logo--light { display: none; } [data-theme="dark"] .vp-auth__brand img.vp-auth__logo.vp-logo--dark { display: block; } /* Inputs do login no dark */ [data-theme="dark"] .vp-auth input, [data-theme="dark"] .vp-auth__panel input { background: var(--vp-bg-elevated) !important; color: var(--vp-text); border-color: var(--vp-border); } /* ──────────── DASHBOARD — bank-quick e vp-kpi ──────────── */ [data-theme="dark"] .bank-quick__btn { background: var(--vp-surface) !important; background-image: none !important; border-color: var(--vp-border); color: var(--vp-text); } [data-theme="dark"] .bank-quick__btn:hover { background: var(--vp-surface-alt) !important; border-color: var(--vp-primary); color: var(--vp-primary); } [data-theme="dark"] .bank-quick__icon { background: var(--vp-primary-50) !important; background-image: none !important; color: var(--vp-primary); } [data-theme="dark"] .bank-quick__label { color: var(--vp-text); } [data-theme="dark"] .vp-kpi { background: var(--vp-surface) !important; background-image: none !important; border-color: var(--vp-border); color: var(--vp-text); } [data-theme="dark"] .vp-kpi__icon { background: var(--vp-surface-alt) !important; background-image: none !important; color: var(--vp-text); } [data-theme="dark"] .vp-kpi__icon.is-info { background: rgba(37,99,235,.18) !important; color: #93c5fd; } [data-theme="dark"] .vp-kpi__icon.is-success { background: rgba(15,159,110,.18) !important; color: #6ee7b7; } [data-theme="dark"] .vp-kpi__icon.is-warn { background: rgba(217,119,6,.18) !important; color: #fcd34d; } [data-theme="dark"] .vp-kpi__icon.is-danger { background: rgba(220,38,38,.18) !important; color: #fca5a5; } [data-theme="dark"] .vp-kpi__label { color: var(--vp-text-muted); } [data-theme="dark"] .vp-kpi__value { color: var(--vp-text); } [data-theme="dark"] .vp-kpi__delta { color: var(--vp-text-muted); } /* "Cobranças no mês" / "Em aberto" (2 cards menores embaixo) */ [data-theme="dark"] .bank-tx, [data-theme="dark"] .bank-tx-row { background: var(--vp-surface) !important; background-image: none !important; border-color: var(--vp-border); color: var(--vp-text); } [data-theme="dark"] .bank-tx-row__title, [data-theme="dark"] .bank-tx-row__valor { color: var(--vp-text); } [data-theme="dark"] .bank-tx-row__sub { color: var(--vp-text-muted); } [data-theme="dark"] .bank-tx-row:hover { background: var(--vp-surface-alt) !important; } /* ──────────── TELA /clientes — Card de resultado da busca ──────────── */ [data-theme="dark"] .res-card { background: var(--vp-surface) !important; color: var(--vp-text); border-color: var(--vp-border); box-shadow: 0 1px 3px rgba(0,0,0,.30); } [data-theme="dark"] .res-card__nome { color: var(--vp-text) !important; } [data-theme="dark"] .res-card__sub { color: var(--vp-text-muted) !important; } [data-theme="dark"] .res-card__dados { background: var(--vp-bg-elevated) !important; color: var(--vp-text); border: 1px solid var(--vp-border); } [data-theme="dark"] .res-card__dados strong { color: var(--vp-text) !important; } [data-theme="dark"] .res-card__aviso { background: rgba(217,119,6,.16) !important; color: #fcd34d; border-left-color: var(--vp-warn); } /* ──────────── TELA /cobranca-detalhe — Cards de detalhe ──────────── */ [data-theme="dark"] .det-qr-card, [data-theme="dark"] .det-card, [data-theme="dark"] .det-paid-hero { background: var(--vp-surface) !important; border-color: var(--vp-border); color: var(--vp-text); } [data-theme="dark"] .det-amount, [data-theme="dark"] .det-amount-label, [data-theme="dark"] .det-section-title { color: var(--vp-text); } /* "Esta cobrança não pode mais ser paga." em cancelada */ [data-theme="dark"] .det-qr-card p, [data-theme="dark"] .det-qr-card small { color: var(--vp-text-muted); } /* Caixa de itens da cobrança */ [data-theme="dark"] .det-card .det-item, [data-theme="dark"] .det-itens-list, [data-theme="dark"] [class*="det-item"] { background: var(--vp-surface-alt) !important; border-color: var(--vp-border); } [data-theme="dark"] .det-status-badge { background: var(--vp-surface-alt); color: var(--vp-text); } /* "Ver detalhes técnicos ▾" — bloco branco com info técnica */ [data-theme="dark"] details summary, [data-theme="dark"] details { background: var(--vp-surface) !important; color: var(--vp-text); border-color: var(--vp-border); } /* ──────────── FORM CLIENTE — Box "Origem dos dados" ──────────── */ [data-theme="dark"] #origem-display { background: var(--vp-surface) !important; border-color: var(--vp-border) !important; color: var(--vp-text); } [data-theme="dark"] #origem-display small { color: var(--vp-text-muted); } /* Badge de origem dentro do #origem-display — bg laranja claro em light precisa virar laranja translúcido escuro em dark */ [data-theme="dark"] #origem-badge { filter: brightness(.92); } /* ──────────── Backgrounds claros genéricos (catch-all) ──────────── */ /* Cobre qualquer card com #f9fafb ou rgb similar que ficou claro */ [data-theme="dark"] [style*="#f9fafb"], [data-theme="dark"] [style*="#f3f4f6"], [data-theme="dark"] [style*="#fafbfc"] { background-color: var(--vp-bg-elevated) !important; color: var(--vp-text); } /* ──────────── BADGES / PILLS / ALERTAS ──────────── */ [data-theme="dark"] .vp-alert--info, [data-theme="dark"] .vp-alert--success, [data-theme="dark"] .vp-alert--warning, [data-theme="dark"] .vp-alert--danger { background: var(--vp-surface-alt); color: var(--vp-text); } /* Inputs com sombras coloridas (focus laranja) — mantém visual em ambos os temas */ [data-theme="dark"] input:focus, [data-theme="dark"] .vp-input:focus, [data-theme="dark"] .pdv-input:focus, [data-theme="dark"] .pdv-ident input[type="text"]:focus { border-color: var(--vp-primary) !important; box-shadow: 0 0 0 4px var(--pdv-ring) !important; } /* Sombras gerais — no escuro, sombra deve ser mais forte/opaca */ [data-theme="dark"] .pdv-cart, [data-theme="dark"] .pdv-cat, [data-theme="dark"] .pdv-header, [data-theme="dark"] .vp-modal-box { box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3); } /* Toggle theme — sun visível, moon escondida */ [data-theme="dark"] .vp-theme-toggle .icon-sun { display: inline-flex; } [data-theme="dark"] .vp-theme-toggle .icon-moon { display: none; } /* ──────────── LOGO swap (light ↔ dark) ──────────── */ /* Por padrão a light aparece e a dark some. No data-theme="dark" inverte. Force display:block + height fixo pra ambas terem mesmo footprint visual. */ .vp-sidebar__brand img.vp-logo, .vp-topbar img.vp-topbar__logo { display: none; height: auto; width: 100%; max-width: 150px; object-fit: contain; } .vp-sidebar__brand img.vp-logo--light, .vp-topbar img.vp-topbar__logo.vp-logo--light { display: block; } [data-theme="dark"] .vp-sidebar__brand img.vp-logo--light, [data-theme="dark"] .vp-topbar img.vp-topbar__logo.vp-logo--light { display: none; } [data-theme="dark"] .vp-sidebar__brand img.vp-logo--dark, [data-theme="dark"] .vp-topbar img.vp-topbar__logo.vp-logo--dark { display: block; } /* ──────────── LISTAGEM DE COBRANÇAS — linha cancelada ──────────── No light usa #fef2f2 (rosa claro) pra destacar. No dark precisa ser um tom escuro avermelhado pra manter o sinal sem destoar. */ [data-theme="dark"] .cob-row.is-cancelada { background: rgba(220,38,38,.10) !important; } [data-theme="dark"] .cob-row.is-cancelada:hover { background: rgba(220,38,38,.18) !important; } /* Valor da cobrança cancelada — antes ficava cinza claro sobre rosa, agora continua atenuado mas legível no fundo escuro. */ [data-theme="dark"] .cob-row.is-cancelada .cob-row__val, [data-theme="dark"] .cob-row.is-cancelada strong { color: var(--vp-text-muted); } /* Badges de status no dark — fundos translúcidos */ [data-theme="dark"] .cob-status-mini.cancelada { background: rgba(220,38,38,.18); color: #fca5a5; } [data-theme="dark"] .cob-status-mini.paga { background: rgba(15,159,110,.20); color: #6ee7b7; } [data-theme="dark"] .cob-status-mini.ativa { background: rgba(37,99,235,.20); color: #93c5fd; } [data-theme="dark"] .cob-status-mini.expirada { background: rgba(217,119,6,.20); color: #fcd34d; } [data-theme="dark"] .cob-status-mini.devolvida { background: rgba(220,38,38,.18); color: #fca5a5; } [data-theme="dark"] .cob-status-mini.removida_psp { background: rgba(255,255,255,.06); color: #d0d8e0; } [data-theme="dark"] .cob-status-mini.manual { background: rgba(217,119,6,.20); color: #fcd34d; } /* ──────────── REMOVE GRADIENTES "GENÉRICOS" no light que possam vir do CSS antigo ──────────── Estes selectors são uma rede de segurança caso algum componente legado ainda tenha gradiente inline ou de classe. Sobrescreve com !important pra garantir. */ [data-theme="dark"] .vp-card, [data-theme="dark"] .vp-shell, [data-theme="dark"] .vp-page, [data-theme="dark"] main { background-image: none !important; } /* Sidebar — fundo cinza claro vira escuro */ [data-theme="dark"] .vp-sidebar { background: var(--vp-surface) !important; border-right-color: var(--vp-border); } [data-theme="dark"] .vp-sidebar__brand, [data-theme="dark"] .vp-sidebar__meta { background: transparent; } [data-theme="dark"] .vp-sidebar__section-label { color: var(--vp-text-muted); } /* ──────────── PIN input (OTP boxes) ──────────── */ [data-theme="dark"] .vp-pin-box { background: var(--vp-bg-elevated); border-color: var(--vp-border); color: var(--vp-text); } [data-theme="dark"] .vp-pin-box:focus { background: var(--vp-surface); border-color: var(--vp-primary); box-shadow: 0 0 0 3px var(--vp-primary-50); } [data-theme="dark"] .vp-pin-box.is-filled { background: var(--vp-surface); border-color: var(--vp-border-strong); } /* ──────────── Linhas de transação canceladas/devolvidas no dashboard ──────────── */ [data-theme="dark"] .bank-tx-row.is-cancelada, [data-theme="dark"] .bank-tx-row.is-devolvida { background: rgba(220,38,38,.10) !important; } [data-theme="dark"] .bank-tx-row.is-cancelada:hover, [data-theme="dark"] .bank-tx-row.is-devolvida:hover { background: rgba(220,38,38,.18) !important; } [data-theme="dark"] .bank-tx-row.is-cancelada .bank-tx-row__title, [data-theme="dark"] .bank-tx-row.is-devolvida .bank-tx-row__title { color: #fca5a5; } /* ──────────── Dev-mode modal (admin/debug PIN) ──────────── */ [data-theme="dark"] .vp-dev-modal { background: var(--vp-surface); box-shadow: 0 20px 60px rgba(0,0,0,.6); } [data-theme="dark"] .vp-dev-modal__header { background: rgba(217,119,6,.16) !important; background-image: none !important; border-bottom-color: var(--vp-border); } [data-theme="dark"] .vp-dev-modal__header h3 { color: #fcd34d; } [data-theme="dark"] .vp-dev-modal__close { color: var(--vp-text-muted); } [data-theme="dark"] .vp-dev-modal__close:hover { color: var(--vp-text); } [data-theme="dark"] .vp-dev-info { background: var(--vp-bg-elevated); border-color: var(--vp-border); } [data-theme="dark"] .vp-dev-info__row + .vp-dev-info__row { border-top-color: var(--vp-border); } [data-theme="dark"] .vp-dev-info__value--success { color: #6ee7b7; } [data-theme="dark"] .vp-dev-info__value--warn { color: #fcd34d; } [data-theme="dark"] .vp-dev-info__disponivel { background: rgba(15,159,110,.16); border-color: rgba(15,159,110,.40); } [data-theme="dark"] .vp-dev-info__disponivel-label, [data-theme="dark"] .vp-dev-info__disponivel-valor { color: #6ee7b7; } [data-theme="dark"] .vp-dev-field__input { background: var(--vp-bg-elevated); border-color: var(--vp-border); color: var(--vp-text); } [data-theme="dark"] .vp-dev-field__quick button { background: var(--vp-surface-alt); border-color: var(--vp-border); color: var(--vp-text); } [data-theme="dark"] .vp-dev-field__quick button:hover { background: var(--vp-bg-elevated); } [data-theme="dark"] .vp-dev-field--pin { background: rgba(217,119,6,.14) !important; background-image: none !important; border-color: rgba(217,119,6,.40); } [data-theme="dark"] .vp-dev-field--pin .vp-dev-field__label { color: #fcd34d; } [data-theme="dark"] .vp-dev-pin { background: var(--vp-bg-elevated); border-color: rgba(217,119,6,.50); color: var(--vp-text); } [data-theme="dark"] .vp-dev-pin:focus { border-color: #fcd34d; } [data-theme="dark"] .vp-dev-msg.is-erro { background: rgba(220,38,38,.16); color: #fca5a5; border-color: rgba(220,38,38,.40); } [data-theme="dark"] .vp-dev-msg.is-ok { background: rgba(15,159,110,.16); color: #6ee7b7; border-color: rgba(15,159,110,.40); } [data-theme="dark"] .vp-dev-modal__footer { background: var(--vp-bg-elevated); border-top-color: var(--vp-border); } [data-theme="dark"] .vp-dev-modal__btn-cancelar { background: var(--vp-surface-alt); border-color: var(--vp-border); color: var(--vp-text); } [data-theme="dark"] .vp-dev-modal__btn-cancelar:hover { background: var(--vp-bg-elevated); }