/* ============================================================ CDA Cloud — Tema CLARO/ESCURO (auto + manual) VERSION: 2026.06.14 - Padrão: segue o sistema (prefers-color-scheme) via cdanuv-theme.js, que grava data-theme="light|dark" + data-bs-theme no . - Usuário pode forçar Auto/Claro/Escuro pelo botão flutuante (canto inf. dir.). - Bootstrap 5.3 escurece sozinho por data-bs-theme; aqui cobrimos as superfícies CUSTOM (login, brand-top, relatórios rel-*, agentes agt-*). ============================================================ */ /* ---- Variáveis semânticas (CLARO = estado atual do site) ---- */ :root { --cdat-bg: #eef2f7; --cdat-surface: #ffffff; --cdat-surface-2: #f8fafc; --cdat-surface-3: #f1f5f9; --cdat-border: #e2e8f0; --cdat-border-2: #cbd5e1; --cdat-text: #1e293b; --cdat-text-2: #475569; --cdat-muted: #64748b; --cdat-accent: #1a56db; --cdat-tint: #e8f0fe; --cdat-tint-bd: #c7d7fd; } /* ---- ESCURO ---- */ html[data-theme="dark"] { --cdat-bg: #0b1220; --cdat-surface: #1e293b; --cdat-surface-2: #18243a; --cdat-surface-3: #24344b; --cdat-border: #334155; --cdat-border-2: #475569; --cdat-text: #e5edf7; --cdat-text-2: #c2cede; --cdat-muted: #93a3b8; --cdat-accent: #3b82f6; --cdat-tint: #1d2c4d; --cdat-tint-bd: #2c4a82; color-scheme: dark; } /* ====================== APLICAÇÃO NO ESCURO ====================== */ /* Base */ html[data-theme="dark"] body { background: var(--cdat-bg) !important; color: var(--cdat-text); } html[data-theme="dark"] .login-container { background: transparent !important; color: var(--cdat-text); } html[data-theme="dark"] hr { border-color: var(--cdat-border) !important; } html[data-theme="dark"] a { color: var(--cdat-accent); } /* Cards / superfícies brancas */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .login-card, html[data-theme="dark"] .login-container.bg-white, html[data-theme="dark"] .card { background: var(--cdat-surface) !important; color: var(--cdat-text); border-color: var(--cdat-border) !important; } /* Cabeçalho (brand-top) */ html[data-theme="dark"] .brand-top { background: var(--cdat-surface) !important; border-bottom-color: var(--cdat-border) !important; } html[data-theme="dark"] .brand-top-name-main { color: var(--cdat-text) !important; } html[data-theme="dark"] .brand-top-name-sub { color: var(--cdat-muted) !important; } html[data-theme="dark"] .brand-top-user { background: var(--cdat-surface-3) !important; border-color: var(--cdat-border) !important; color: var(--cdat-text-2) !important; } html[data-theme="dark"] .brand-top-user svg { fill: var(--cdat-muted); } html[data-theme="dark"] .btn-brand-rel { background: var(--cdat-tint) !important; color: #93b4fb !important; } html[data-theme="dark"] .btn-brand-rel:hover { background: #24386a !important; } /* Formulários */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .rel-filtro-group input[type="date"], html[data-theme="dark"] .rel-filtro-group input[type="number"], html[data-theme="dark"] .agt-form-row input, html[data-theme="dark"] .agt-edit-box input, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--cdat-surface-2) !important; border-color: var(--cdat-border-2) !important; color: var(--cdat-text) !important; } html[data-theme="dark"] ::placeholder { color: var(--cdat-muted); opacity: 1; } /* ===== Relatórios ===== */ html[data-theme="dark"] .rel-header { border-bottom-color: var(--cdat-border) !important; } html[data-theme="dark"] .rel-tab { background: var(--cdat-surface-3) !important; color: var(--cdat-text-2) !important; } html[data-theme="dark"] .rel-tab:hover { background: var(--cdat-border) !important; } /* .rel-tab-ativa mantém o azul */ html[data-theme="dark"] .rel-filtros { background: var(--cdat-surface-2) !important; border-color: var(--cdat-border) !important; } html[data-theme="dark"] .rel-filtro-group label { color: var(--cdat-muted) !important; } html[data-theme="dark"] .rel-total { color: var(--cdat-text-2) !important; } html[data-theme="dark"] .rel-pag-info { color: var(--cdat-muted) !important; } html[data-theme="dark"] .rel-vazio { color: var(--cdat-muted) !important; } html[data-theme="dark"] .rel-table-wrap { border-color: var(--cdat-border) !important; } html[data-theme="dark"] .rel-table { background: var(--cdat-surface) !important; } html[data-theme="dark"] .rel-table thead th { background: var(--cdat-surface-3) !important; color: var(--cdat-muted) !important; border-bottom-color: var(--cdat-border) !important; } html[data-theme="dark"] .rel-table tbody tr:nth-child(even) { background: var(--cdat-surface-2) !important; } html[data-theme="dark"] .rel-table tbody tr:active { background: #24386a !important; } html[data-theme="dark"] .rel-table td { color: var(--cdat-text-2) !important; border-bottom-color: var(--cdat-border) !important; } html[data-theme="dark"] .rel-col-ticket { color: var(--cdat-text) !important; } /* Paginação */ html[data-theme="dark"] .btn-rel-pag { background: var(--cdat-surface-3) !important; color: var(--cdat-text-2) !important; } html[data-theme="dark"] .btn-rel-pag:hover:not(:disabled) { background: var(--cdat-border) !important; } /* Detalhe do ticket/RFID */ html[data-theme="dark"] #rel-det-conteudo, html[data-theme="dark"] .rel-det-info, html[data-theme="dark"] .rel-det-campo span { color: var(--cdat-text); } html[data-theme="dark"] .rel-det-campo label, html[data-theme="dark"] .rel-det-foto-label { color: var(--cdat-muted) !important; } html[data-theme="dark"] .rel-det-numticket { color: var(--cdat-text) !important; } html[data-theme="dark"] .rel-det-sem-foto { background: var(--cdat-surface-2) !important; color: var(--cdat-muted) !important; border-color: var(--cdat-border) !important; } html[data-theme="dark"] .rel-det-info, html[data-theme="dark"] .rel-det-foto-wrap { background: var(--cdat-surface) !important; border-color: var(--cdat-border) !important; } /* "LOCAL" chip e títulos do voucher */ html[data-theme="dark"] .login-container h5.text-success, html[data-theme="dark"] .login-container h5.mb-5.text-dark { background: var(--cdat-tint) !important; border-color: var(--cdat-border-2) !important; color: var(--cdat-text) !important; } html[data-theme="dark"] .login-container h5.text-success::before, html[data-theme="dark"] .login-container h5.mb-5.text-dark::before { background: var(--cdat-surface-3) !important; color: var(--cdat-text) !important; } html[data-theme="dark"] .login-container hr { border-color: var(--cdat-border) !important; } /* ===== Agentes / listas ===== */ html[data-theme="dark"] .agt-title { color: var(--cdat-text) !important; } html[data-theme="dark"] .agt-form { background: var(--cdat-surface-2) !important; border-color: var(--cdat-border) !important; } html[data-theme="dark"] .agt-form-hint, html[data-theme="dark"] .agt-vazio, html[data-theme="dark"] .agt-lista th { color: var(--cdat-muted) !important; } html[data-theme="dark"] .agt-lista th, html[data-theme="dark"] .agt-lista td { border-bottom-color: var(--cdat-border) !important; } html[data-theme="dark"] .agt-lista td { color: var(--cdat-text-2) !important; } html[data-theme="dark"] .btn-agt-mini { background: var(--cdat-surface-3) !important; border-color: var(--cdat-border-2) !important; color: var(--cdat-text-2) !important; } /* Texto utilitário Bootstrap que assume fundo claro */ html[data-theme="dark"] .text-dark { color: var(--cdat-text) !important; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--cdat-muted) !important; } /* Caixas de DESTAQUE com fundo claro FIXO (abonar #E0FFFF, cobranca #F5F5F5): no tema ESCURO o fundo escurece e as letras ficam claras (no claro fica como era). */ html[data-theme="dark"] div[style*="#E0FFFF"], html[data-theme="dark"] div[style*="#F5F5F5"] { background-color: var(--cdat-surface-3) !important; color: var(--cdat-text) !important; border-radius: 8px; } html[data-theme="dark"] div[style*="#E0FFFF"] .text-dark, html[data-theme="dark"] div[style*="#F5F5F5"] .text-dark { color: var(--cdat-text) !important; } /* ====================== BOTÃO FLUTUANTE DE TEMA ====================== */ #cda-theme-btn { position: fixed; right: 14px; bottom: 14px; z-index: 4000; display: inline-flex; align-items: center; gap: .4rem; background: var(--cdat-surface); color: var(--cdat-text); border: 1px solid var(--cdat-border); border-radius: 999px; padding: .45rem .8rem; font: 600 .85rem/1 'Segoe UI', system-ui, sans-serif; box-shadow: 0 4px 16px rgba(0,0,0,.22); cursor: pointer; -webkit-tap-highlight-color: transparent; } #cda-theme-btn:hover { border-color: var(--cdat-border-2); } #cda-theme-btn .cda-theme-ic { font-size: 1rem; line-height: 1; } @media (max-width: 600px) { #cda-theme-btn { right: 10px; bottom: 10px; padding: .5rem .55rem; } #cda-theme-btn .cda-theme-tx { display: none; } }