/* ================================================================ DocsyAI — Dark Mode Applies when: System dark preference: @media prefers-color-scheme: dark ================================================================ */ /* ── 1. CSS VARIABLE OVERRIDES ── */ :root[data-theme="dark"] { --dark: #f0f0f0; --dark-mid: #e0e0e0; --dark-side: #0a0a0a; --gray: #a0a0a0; --gray-light: #111111; --gray-border: #2e2e2e; --white: #1a1a1a; --error: #f87171; --success: #34d399; --warn: #fbbf24; color-scheme: dark; } /* Respeita preferência do sistema quando nenhuma preferência foi salva */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dark: #f0f0f0; --dark-mid: #e0e0e0; --dark-side: #0a0a0a; --gray: #a0a0a0; --gray-light: #111111; --gray-border: #2e2e2e; --white: #1a1a1a; --error: #f87171; --success: #34d399; --warn: #fbbf24; color-scheme: dark; } } /* Também aplica via media query quando sistema é dark e nenhuma preferência foi salva */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dark: #f0f0f0; --dark-mid: #e0e0e0; --dark-side: #0a0a0a; --gray: #a0a0a0; --gray-light: #111111; --gray-border: #2e2e2e; --white: #1a1a1a; --error: #f87171; --success: #34d399; --warn: #fbbf24; color-scheme: dark; } } /* ── 2. TOPBAR ── */ [data-theme="dark"] .topbar { background: #161616; border-bottom-color: #2e2e2e; } /* ── 3. SIDEBAR ── */ [data-theme="dark"] .sidebar { background: #0a0a0a; } [data-theme="dark"] .sidebar__logo { border-bottom-color: rgba(255,255,255,.08); } [data-theme="dark"] .sidebar__footer { border-top-color: rgba(255,255,255,.08); } [data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,.05); } /* ── 4. METRIC CARDS ── */ [data-theme="dark"] .metric-card { background: #1a1a1a; border-color: #2e2e2e; } [data-theme="dark"] .ic--teal { background: #134e4a; color: var(--teal-light); } [data-theme="dark"] .ic--purple { background: #2e1065; color: #a78bfa; } [data-theme="dark"] .ic--blue { background: #1a1a2e; color: #60a5fa; } [data-theme="dark"] .delta--up { background: #064e3b; color: #34d399; } [data-theme="dark"] .delta--neutral { background: #1c1c1c; color: #a0a0a0; } [data-theme="dark"] .t-badge { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); } /* ── 5. TIMELINE ── */ [data-theme="dark"] .timeline-card { background: #1a1a1a; border-color: #2e2e2e; } [data-theme="dark"] .timeline-card__header { border-bottom-color: #2e2e2e; } [data-theme="dark"] .timeline-item { border-bottom-color: #2e2e2e; } [data-theme="dark"] .timeline-item:hover { background: #242424; } [data-theme="dark"] .tl-icon--login { background: #1a1a2e; color: #60a5fa; } [data-theme="dark"] .tl-icon--registro { background: #064e3b; color: #34d399; } [data-theme="dark"] .tl-icon--upload { background: #44370a; color: #fbbf24; } [data-theme="dark"] .tl-icon--extracao { background: #2e1065; color: #a78bfa; } [data-theme="dark"] .tl-icon--success { background: #064e3b; color: #34d399; } [data-theme="dark"] .tl-icon--warning { background: #44370a; color: #fbbf24; } [data-theme="dark"] .btn-visualizar { background: #242424; border-color: #2e2e2e; color: #f0f0f0; } [data-theme="dark"] .btn-visualizar:hover { background: #1a1a1a; border-color: var(--teal); color: var(--teal-light); } /* ── 5b. TIMELINE FILTERS ── */ [data-theme="dark"] .timeline-filters { background: #111111; border-bottom-color: #2e2e2e; } [data-theme="dark"] .tl-filter-input, [data-theme="dark"] .tl-filter-select, [data-theme="dark"] .tl-filter-date { background: #1a1a1a; border-color: #2e2e2e; color: #f0f0f0; } [data-theme="dark"] .tl-filter-input:focus, [data-theme="dark"] .tl-filter-select:focus, [data-theme="dark"] .tl-filter-date:focus { border-color: var(--teal); } [data-theme="dark"] .tl-filter-clear { background: #1a1a1a; border-color: #2e2e2e; color: #a0a0a0; } [data-theme="dark"] .tl-filter-clear:hover { border-color: var(--teal); color: var(--teal-light); } /* ── 6. HISTORY TABLE (créditos) ── */ [data-theme="dark"] .history-card { background: #1a1a1a; border-color: #2e2e2e; } [data-theme="dark"] .history-table thead tr { background: #111111; border-bottom-color: #2e2e2e; } [data-theme="dark"] .history-table td { border-bottom-color: #2e2e2e; } [data-theme="dark"] .history-table tr:hover td { background: #242424 !important; } [data-theme="dark"] .badge-credit { background: #064e3b; color: #34d399; } [data-theme="dark"] .badge-debit { background: #450a0a; color: #f87171; } [data-theme="dark"] .badge-batch { background: #2e1065; color: #a78bfa; } /* ── 7. PAYMENT ── */ [data-theme="dark"] .banner { background: #134e4a !important; border-color: var(--teal) !important; color: #ccfbf1 !important; } [data-theme="dark"] .pkg-card { background: #1a1a1a; border-color: #2e2e2e; } [data-theme="dark"] .pkg-card:hover { border-color: var(--teal); box-shadow: 0 8px 24px rgba(13,148,136,.15); } [data-theme="dark"] .pkg-card.selected { background: #134e4a !important; border-color: var(--teal) !important; } [data-theme="dark"] .pkg-card.selected::after { background: var(--teal); } [data-theme="dark"] .pkg-value { color: #f0f0f0; } [data-theme="dark"] .pkg-per { color: #a0a0a0; } [data-theme="dark"] .pay-box { background: #1a1a1a; border-color: #2e2e2e; } [data-theme="dark"] .pay-summary { border-bottom-color: #2e2e2e; } [data-theme="dark"] .custom-input-wrap { background: #242424; border-color: #2e2e2e; } [data-theme="dark"] .pkg-card.selected .custom-input-wrap { border-color: var(--teal); } [data-theme="dark"] .custom-input { color: #f0f0f0; background: transparent; } [data-theme="dark"] .custom-prefix { color: #a0a0a0; } /* ── 8. PAYMENT SUCCESS ── */ [data-theme="dark"] .card { background: #1a1a1a; border-color: #2e2e2e; } [data-theme="dark"] .icon-wrap { background: #064e3b !important; color: #34d399 !important; } [data-theme="dark"] .icon-pending { background: #44370a !important; color: #fbbf24 !important; } [data-theme="dark"] .balance-box { background: #134e4a !important; border-color: var(--teal) !important; } [data-theme="dark"] .balance-box__label { color: #34d399 !important; } [data-theme="dark"] .balance-box__value { color: var(--teal-light) !important; } [data-theme="dark"] .btn-outline { border-color: #2e2e2e; color: #f0f0f0; background: transparent; } [data-theme="dark"] .btn-outline:hover { background: #242424; } /* ── 9. MODAIS ── */ [data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.88); } [data-theme="dark"] .modal-card { background: #1a1a1a; border-color: #2e2e2e; } [data-theme="dark"] .modal-card--warn { border-top-color: #fbbf24; } [data-theme="dark"] .close-btn { color: #a0a0a0; } [data-theme="dark"] .close-btn:hover { color: #f87171; } [data-theme="dark"] .no-credits-icon { background: #44370a; } [data-theme="dark"] .upload-opt-card { background: #1a1a1a; border-color: #2e2e2e; } [data-theme="dark"] .upload-opt-card:hover { border-color: var(--teal); background: #134e4a !important; box-shadow: 0 8px 24px rgba(13,148,136,.2); } [data-theme="dark"] .upload-opt-card:hover .opt-icon { background: #0d2e2a; color: var(--teal-light); } [data-theme="dark"] .batch-split > div[style*="border-right"] { border-right-color: #2e2e2e !important; } /* ── 10. EXTRACT PAGE ── */ [data-theme="dark"] .upload-zone { background: #1a1a1a; border-color: #2e2e2e; } [data-theme="dark"] .upload-zone:hover, [data-theme="dark"] .upload-zone.dragover { background: #134e4a !important; border-color: var(--teal); } [data-theme="dark"] #preview-body, [data-theme="dark"] .preview-placeholder { background: #111111 !important; } [data-theme="dark"] .result-panel__header { background: #1a1a1a; border-bottom-color: #2e2e2e; } [data-theme="dark"] .cat-header { background: #111111 !important; border-bottom-color: #2e2e2e !important; color: #a0a0a0; } [data-theme="dark"] .field-row { border-bottom-color: #2e2e2e !important; } [data-theme="dark"] .field-label { color: #a0a0a0; } [data-theme="dark"] .field-input { background: #242424 !important; border-color: #2e2e2e !important; color: #f0f0f0 !important; } [data-theme="dark"] .field-input:focus { border-color: var(--teal) !important; } [data-theme="dark"] .field-conf.high { background: #064e3b; color: #34d399; } [data-theme="dark"] .field-conf.medium { background: #44370a; color: #fbbf24; } [data-theme="dark"] .field-conf.low { background: #450a0a; color: #f87171; } [data-theme="dark"] .meta-badge { background: #242424; color: #a0a0a0; } [data-theme="dark"] .meta-badge--conf { background: #064e3b; color: #34d399; } /* ── 11. BATCH EXTRACT PAGE ── */ [data-theme="dark"] .upload-zone__btn { background: #242424; border-color: #2e2e2e; color: #f0f0f0; } [data-theme="dark"] .upload-zone__btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; } [data-theme="dark"] .status--pending { background: #242424; color: #a0a0a0; } [data-theme="dark"] .status--processing { background: #1a1a2e; color: #60a5fa; } [data-theme="dark"] .status--success { background: #064e3b; color: #34d399; } [data-theme="dark"] .status--error { background: #450a0a; color: #f87171; } [data-theme="dark"] .queue-item { border-bottom-color: #2e2e2e; } [data-theme="dark"] .batch-row { border-color: #2e2e2e; } [data-theme="dark"] .batch-row:hover { background: #242424 !important; border-color: var(--teal-light) !important; } [data-theme="dark"] .batch-row.active { background: #134e4a !important; border-color: var(--teal) !important; } [data-theme="dark"] .batch-row__meta { color: #a0a0a0; } [data-theme="dark"] .batch-doc-item { border-color: #2e2e2e; } [data-theme="dark"] .batch-doc-item:hover { background: #242424; border-color: var(--teal-light); } [data-theme="dark"] .batch-doc-item.active { background: #134e4a; border-color: var(--teal); } [data-theme="dark"] .batch-doc-item__icon { background: #242424; color: #a0a0a0; } [data-theme="dark"] .batch-doc-item.active .batch-doc-item__icon { background: #134e4a; color: var(--teal-light); } [data-theme="dark"] #batch-doc-preview { background: #111111 !important; } [data-theme="dark"] #batch-doc-fields { border-color: #2e2e2e !important; } /* ── 12. LOGIN PAGE ── */ [data-theme="dark"] .auth-left { background: #0d0d0d !important; } [data-theme="dark"] .auth-left__content { color: #f0f0f0; } [data-theme="dark"] .auth-left__logo .text, [data-theme="dark"] .auth-left__title { color: #fff; } [data-theme="dark"] .auth-right { background: #1a1a1a !important; border-left-color: #2e2e2e; } [data-theme="dark"] .tab-bar { background: #111111; border-color: #2e2e2e; } [data-theme="dark"] .tab-btn { color: #a0a0a0; } [data-theme="dark"] .tab-btn.active { background: #1a1a1a; color: #f0f0f0; } [data-theme="dark"] .form-group label { color: #f0f0f0; } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group input:focus { background: #242424 !important; color: #f0f0f0; } [data-theme="dark"] .form-group input::placeholder { color: #666666; } [data-theme="dark"] .toggle-pass { color: #666666; } [data-theme="dark"] .toggle-pass:hover { color: #a0a0a0; } [data-theme="dark"] .divider { color: #2e2e2e; } [data-theme="dark"] .divider::before, [data-theme="dark"] .divider::after { background: #2e2e2e; } /* ── 13. INPUTS GLOBAIS ── */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: #242424; border-color: #2e2e2e; color: #f0f0f0; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #666666; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus { border-color: var(--teal); background: #242424; } /* ── 14. ALERTAS ── */ [data-theme="dark"] .alert--error { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; } [data-theme="dark"] .alert--success { background: #064e3b; color: #6ee7b7; border-color: #065f46; } /* ── 15. SCROLLBAR ── */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #111111; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2e2e2e; border-radius: 3px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #444444; } /* ── 16. SIDEBAR — ESTILOS BASE ── */ .sidebar { background: #111827; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; } .sidebar__logo { display: flex; align-items: center; gap: 10px; padding: 24px 20px; border-bottom: 1px solid rgba(255, 255, 255, .07); text-decoration: none; } .sidebar__logo .icon { width: 24px; height: 24px; color: #14b8a6; display: flex; align-items: center; justify-content: center; } .sidebar__logo .icon svg { width: 24px; height: 24px; stroke-width: 2; } .sidebar__logo .text { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.5px; } .sidebar__nav { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 500; color: #94a3b8; cursor: pointer; border: none; background: transparent; width: 100%; transition: all .15s; } .nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; } .nav-item.active { background: rgba(13, 148, 136, .15); color: #14b8a6; } .nav-item .ni { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .nav-item .ni svg { width: 18px; height: 18px; stroke-width: 2; } .logout-btn svg { width: 16px; height: 16px; stroke-width: 2; } .sidebar__footer { padding: 16px; border-top: 1px solid rgba(255, 255, 255, .07); } .user-chip { display: flex; align-items: center; gap: 10px; } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #0d9488; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; } .user-chip__info { flex: 1; min-width: 0; } .user-chip__name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-chip__role { font-size: 11px; color: #64748b; } .user-chip__balance { font-size: 11px; color: #14b8a6; font-weight: 600; margin-top: 1px; } .logout-btn { background: none; border: none; cursor: pointer; color: #64748b; font-size: 16px; padding: 4px; transition: color .15s; } .logout-btn:hover { color: #ef4444; } /* ── 16b. SIDEBAR COMPACTA (aplica sobre a base, sem flash) ── */ /* Largura e clip imediatos — sem dependência de JS */ .sidebar { width: 64px !important; overflow: hidden; } .sidebar .sidebar__logo { justify-content: center; padding: 20px 8px; } .sidebar .sidebar__logo img { height: 24px !important; } .sidebar .sidebar__logo .text { display: none !important; } .sidebar .sidebar__nav { padding: 12px 6px; } .sidebar .nav-item { justify-content: center; padding: 10px 0; } .sidebar .nav-item .nav-label { display: none; } .sidebar .nav-item .ni { margin: 0; } /* Tooltip ao hover — ativo após JS setar overflow:visible na sidebar */ .sidebar .nav-item { position: relative; } .sidebar .nav-item::after { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #1e293b; color: #fff; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 200; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); } .sidebar .nav-item:hover::after { opacity: 1; } /* Footer compacto — classes usadas pela maioria das páginas */ .sidebar .user-chip { justify-content: center; gap: 0; flex-direction: column; align-items: center; } .sidebar .user-chip__info { display: none !important; } .sidebar .logout-btn { padding: 6px; margin-top: 4px; } .sidebar .theme-toggle { padding: 6px; margin-top: 4px; } /* Footer compacto — classes específicas do admin.html */ .sidebar .sidebar__user { justify-content: center; gap: 0; flex-direction: column; align-items: center; } .sidebar .sidebar__user-info { display: none !important; } .sidebar .sidebar__logout { padding: 6px; margin-top: 4px; background: none; border: none; cursor: pointer; color: #64748b; transition: color .15s; } .sidebar .sidebar__logout:hover { color: #ef4444; } /* Logo sub-título (admin.html usa .sidebar__logo-sub em vez de .text) */ .sidebar .sidebar__logo-sub { display: none !important; } /* Desloca o conteúdo principal (.main ou .main-content conforme a página) */ .main, .main-content { margin-left: 64px !important; } /* Mobile: sidebar sai de tela via transform, conteúdo ocupa largura total */ @media (max-width: 768px) { .main, .main-content { margin-left: 0 !important; } } /* ── 17. BOTÃO TOGGLE NA SIDEBAR (tema) ── */ .theme-toggle { background: none; border: none; cursor: pointer; color: #666666; padding: 4px; transition: color .15s; display: flex; align-items: center; justify-content: center; } .theme-toggle:hover { color: var(--teal-light); } .theme-toggle svg { width: 16px; height: 16px; stroke-width: 2; } /* ── 18. BOTÃO TOGGLE FLUTUANTE (páginas sem sidebar) ── */ .theme-toggle-float { position: fixed; top: 16px; right: 16px; z-index: 9999; width: 38px; height: 38px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--gray-border); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gray); transition: all .2s; box-shadow: 0 2px 10px rgba(0,0,0,.12); } .theme-toggle-float:hover { border-color: var(--teal); color: var(--teal); } .theme-toggle-float svg { width: 17px; height: 17px; stroke-width: 2; } /* ── 18. INDEX / LANDING PAGE ── */ [data-theme="dark"] .nav { background: rgba(10,10,10,.95) !important; border-bottom-color: #2e2e2e; } [data-theme="dark"] .nav__mobile { background: #111111; border-bottom-color: #2e2e2e; box-shadow: 0 8px 24px rgba(0,0,0,.4); } [data-theme="dark"] .nav__mobile a { border-bottom-color: #2e2e2e; } [data-theme="dark"] .nav__burger span { background: #f0f0f0; } [data-theme="dark"] .nav__theme-btn { border-color: #2e2e2e; color: #a0a0a0; } [data-theme="dark"] .nav__theme-btn:hover { border-color: var(--teal); color: var(--teal-light); } /* Hero */ [data-theme="dark"] .hero__grid { background-image: linear-gradient(rgba(13,148,136,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(13,148,136,.07) 1px, transparent 1px); } [data-theme="dark"] .doc-card--main { background: #1a1a1a !important; border-color: #2e2e2e !important; box-shadow: 0 16px 48px rgba(0,0,0,.5); } [data-theme="dark"] .floating-chip { background: #1a1a1a !important; border-color: #2e2e2e !important; color: #e0e0e0; } [data-theme="dark"] .skeleton { background: linear-gradient(90deg, #2e2e2e 25%, #3a3a3a 50%, #2e2e2e 75%); background-size: 200% 100%; } /* Feature cards (landing) */ [data-theme="dark"] .feature-card { border-color: #2e2e2e !important; } [data-theme="dark"] .feature-card:hover { border-color: var(--teal) !important; } [data-theme="dark"] .bar { background: #2e2e2e; } /* Doc type cards */ [data-theme="dark"] .doc-type-card { background: #1a1a1a !important; border-color: #2e2e2e !important; } [data-theme="dark"] .doc-type-card:hover { border-color: var(--teal-light) !important; } [data-theme="dark"] .doc-type-card__tags span { background: #134e4a; color: #5eead4; } /* Steps */ [data-theme="dark"] .step__connector { background: linear-gradient(90deg, var(--teal), #2e2e2e); } /* Pricing */ [data-theme="dark"] .pricing-card { background: #1a1a1a !important; border-color: #2e2e2e !important; } [data-theme="dark"] .pricing-card:hover { border-color: var(--teal) !important; } [data-theme="dark"] .pricing-card--featured { background: #134e4a !important; border-color: var(--teal) !important; transform: scale(1.04); } [data-theme="dark"] .pricing-card--featured .pricing-card__name, [data-theme="dark"] .pricing-card--featured .pricing-card__price, [data-theme="dark"] .pricing-card--featured .pricing-card__period, [data-theme="dark"] .pricing-card--featured ul li { color: #f0f0f0 !important; } [data-theme="dark"] .pricing-card__name, [data-theme="dark"] .pricing-card__period { color: #a0a0a0 !important; } /* Logo pills */ [data-theme="dark"] .logo-pill { background: #1a1a1a; border-color: #2e2e2e; color: #a0a0a0; } /* CTA dark section */ [data-theme="dark"] .cta-dark { background: #0a0a0a; } [data-theme="dark"] .cta-dark__inner h2 { color: #f0f0f0; } [data-theme="dark"] .cta-dark__inner p { color: #94a3b8; } /* Footer */ [data-theme="dark"] .footer { background: #0a0a0a; border-top-color: #2e2e2e; } [data-theme="dark"] .footer__bottom { border-top-color: #2e2e2e; } [data-theme="dark"] .footer__brand .logo-text { color: #f0f0f0; } [data-theme="dark"] .footer__brand p { color: #64748b; } [data-theme="dark"] .footer__col h5 { color: #f0f0f0; } [data-theme="dark"] .footer__col a { color: #64748b; } [data-theme="dark"] .footer__col a:hover { color: #f0f0f0; } [data-theme="dark"] .footer__bottom .container { color: #475569; }