/* ========================================================================== cliniX — MODO ESCURO (por TOKENS, não inversão) Ativado com [data-theme="dark"] no (toggle global + localStorage). Como clinix-overrides.css remapeia TUDO (--xt-* e os --cx-* extras) para os ~20 tokens-base --cx-*, redefinir esses tokens aqui re-tematiza o app inteiro. Cores pensadas pra contraste/legibilidade — paleta "Confiança Calorosa" no escuro: fundo morno quase-preto (nunca preto puro), teal/coral mais claros. Os poucos --xt-* NÃO remapeados (semânticos/overlays) recebem valor dark aqui. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; /* ---------- Grounds — morno quase-preto, leve tom teal (nunca preto puro) ---------- */ --cx-paper: #10201c; /* fundo principal */ --cx-card: #182421; /* cards sobre o fundo */ /* Superfície "branca" (selects, modais, gutters, SIDEBAR do partial…). Nunca é definida no claro (cai no fallback #fff); no escuro precisa virar card, senão essas superfícies — inclusive a barra lateral — ficam brancas. */ --cx-white: #182421; --cx-rule: #2c3a35; /* linhas divisórias / contornos */ --cx-rule-soft: #232f2b; /* ---------- Ink — texto claro morno (contraste AA sobre os grounds) ---------- */ --cx-ink: #eef3f0; /* texto principal */ --cx-ink-soft: #bcc8c2; /* parágrafo corrido */ --cx-ink-faint: #8b968f; /* labels, meta, legendas */ --cx-ink-mute: #6c766f; /* ---------- Teal — accent mais claro pra brilhar no escuro ---------- */ --cx-teal: #35c1a7; /* botões/ícones/links */ --cx-teal-700: #63d9c4; /* ênfase e hover: teal MAIS claro no escuro */ --cx-teal-100: #16302a; /* fundo suave de chip/card teal (tint escuro) */ --cx-teal-50: #16251f; /* trilho dos toggles (modalidade/pagamento) — verde escuro, não branco */ /* ---------- Coral — AÇÃO ---------- */ --cx-coral: #ff7d6b; --cx-coral-700: #ff9484; /* hover de ação (mais claro no escuro) */ --cx-coral-100: #3a211d; /* fundo suave de ação (tint escuro) */ /* ---------- Semânticos (texto claro + fundo escuro tonal) ---------- */ --cx-success: #4fd083; --cx-success-bg: #12291c; --cx-danger: #ff7168; --cx-danger-bg: #331a18; --cx-warn: #e4bb54; --cx-warn-bg: #2d2713; /* ---------- Sombras — mais profundas no escuro ---------- */ --cx-shadow-card: 0 4px 14px rgba(0,0,0,0.45); --cx-shadow-float: 0 14px 40px rgba(0,0,0,0.60); --cx-shadow-coral: 0 6px 16px rgba(255,125,107,0.28); /* ---------- --xt-* NÃO remapeados no overrides (semânticos/overlays/code) ---------- */ --xt-success: #4fd083; --xt-success-bg: #12291c; --xt-warn: #e4bb54; --xt-warn-bg: #2d2713; --xt-info: #6fa8ff; --xt-info-bg: #16233a; --xt-alt: #89aadd; --xt-alt-bg: #1a2230; --xt-code-bg: #1a2421; --xt-signal-border: rgba(53,193,167,0.35); --xt-overlay-xs: rgba(255,255,255,0.05); --xt-overlay-sm: rgba(255,255,255,0.08); --xt-overlay-md: rgba(255,255,255,0.13); --xt-shadow-xs: 0 1px 3px rgba(0,0,0,0.40); --xt-shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --xt-shadow-md: 0 14px 40px rgba(0,0,0,0.60); /* Header frosted (barra do topo do landing/login) */ --cx-header-bg: rgba(16,32,28,0.82); /* Painel do PACIENTE — tokens próprios --d-* (têm valores claros): remapeia. */ --d-paper: var(--cx-paper); --d-white: var(--cx-card); --d-ink: var(--cx-ink); --d-soft: var(--cx-ink-soft); --d-faint: var(--cx-ink-faint); --d-rule: var(--cx-rule); --d-rule2: var(--cx-rule-soft); --d-surface: #1c2723; --d-signal: var(--cx-teal); --d-signal2: var(--cx-teal-700); --d-action: var(--cx-coral); --d-action2: var(--cx-coral-700); --d-success: var(--cx-success); --d-warn: var(--cx-warn); --d-info: #6fa8ff; } /* Fundo/opacidade da página garantidos via token (caso body não use --cx-paper). */ :root[data-theme="dark"] body { background-color: var(--cx-paper); color: var(--cx-ink); } /* ---------- Toggle flutuante do tema (em TODA tela, via base.html) ---------- */ .cx-theme-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 70; width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--cx-card); color: var(--cx-ink-soft); border: 1px solid var(--cx-rule); box-shadow: var(--cx-shadow-card); cursor: pointer; padding: 0; font-family: inherit; transition: color .15s, border-color .15s, background .15s, transform .15s; } .cx-theme-toggle:hover { color: var(--cx-teal); border-color: var(--cx-teal); transform: translateY(-1px); } .cx-theme-toggle svg { width: 20px; height: 20px; display: block; } .cx-theme-toggle .cx-ico-moon { display: block; } .cx-theme-toggle .cx-ico-sun { display: none; } :root[data-theme="dark"] .cx-theme-toggle .cx-ico-moon { display: none; } :root[data-theme="dark"] .cx-theme-toggle .cx-ico-sun { display: block; } @media print { .cx-theme-toggle { display: none; } } /* ── Controles flutuantes vs. sidebar fixa ──────────────────────────────── O toggle de tema e o botão "ver tutorial" moram no canto inferior ESQUERDO (ótimo nas telas públicas). Nas telas de painel a esquerda é a NAVEGAÇÃO fixa (.dash-sidebar / .admin-sidebar) e os botões cobririam os itens — então ali eles vão pro canto inferior DIREITO, sobre a área de conteúdo. */ body:has(.dash-sidebar) .cx-theme-toggle, body:has(.admin-sidebar) .cx-theme-toggle, body:has(.dash-sidebar) .cx-tour-replay, body:has(.admin-sidebar) .cx-tour-replay { left: auto; right: 16px; } /* Exceção: no assistente o canto inferior direito é o botão Enviar do composer. Reserva um respiro à direita pra barra de digitação não ficar sob os botões. */ body:has(.asst-page) .asst-composer { padding-right: 74px; } /* ---------- Namespaces de paleta POR-PÁGINA (clones claros) → --cx dark ---------- */ /* Telas internas: agenda, mensagens, pacientes, sessões, recepcionistas, admin, availability. */ :root[data-theme="dark"] { --a-paper:var(--cx-paper); --a-white:var(--cx-card); --a-ink:var(--cx-ink); --a-soft:var(--cx-ink-soft); --a-faint:var(--cx-ink-faint); --a-mute:var(--cx-ink-mute); --a-rule:var(--cx-rule); --a-rule2:var(--cx-rule-soft); --a-surface:#1c2723; --a-signal:var(--cx-teal); --a-signal2:var(--cx-teal-700); --a-action:var(--cx-coral); --a-action2:var(--cx-coral-700); --a-danger:var(--cx-danger); --a-success:var(--cx-success); --a-warn:var(--cx-warn); --a-info:#6fa8ff; --adm-paper:var(--cx-paper); --adm-white:var(--cx-card); --adm-ink:var(--cx-ink); --adm-soft:var(--cx-ink-soft); --adm-faint:var(--cx-ink-faint); --adm-mute:var(--cx-ink-mute); --adm-rule:var(--cx-rule); --adm-rule2:var(--cx-rule-soft); --adm-surface:#1c2723; --adm-signal:var(--cx-teal); --adm-signal2:var(--cx-teal-700); --adm-action:var(--cx-coral); --adm-action2:var(--cx-coral-700); --adm-danger:var(--cx-danger); --adm-success:var(--cx-success); --adm-warn:var(--cx-warn); --adm-info:#6fa8ff; --av-bg:var(--cx-paper); --av-paper:var(--cx-paper); --av-white:var(--cx-card); --av-ink:var(--cx-ink); --av-soft:var(--cx-ink-soft); --av-faint:var(--cx-ink-faint); --av-mute:var(--cx-ink-mute); --av-rule:var(--cx-rule); --av-rule2:var(--cx-rule-soft); --av-surface:#1c2723; --av-signal:var(--cx-teal); --av-signal2:var(--cx-teal-700); --av-action:var(--cx-coral); --av-action2:var(--cx-coral-700); --av-danger:var(--cx-danger); --av-success:var(--cx-success); --av-warn:var(--cx-warn); --av-info:#6fa8ff; --cal-paper:var(--cx-paper); --cal-white:var(--cx-card); --cal-ink:var(--cx-ink); --cal-soft:var(--cx-ink-soft); --cal-faint:var(--cx-ink-faint); --cal-mute:var(--cx-ink-mute); --cal-rule:var(--cx-rule); --cal-rule2:var(--cx-rule-soft); --cal-surface:#1c2723; --cal-signal:var(--cx-teal); --cal-signal2:var(--cx-teal-700); --cal-action:var(--cx-coral); --cal-action2:var(--cx-coral-700); --cal-danger:var(--cx-danger); --cal-success:var(--cx-success); --cal-warn:var(--cx-warn); --cal-info:#6fa8ff; --m-paper:var(--cx-paper); --m-white:var(--cx-card); --m-ink:var(--cx-ink); --m-soft:var(--cx-ink-soft); --m-faint:var(--cx-ink-faint); --m-mute:var(--cx-ink-mute); --m-rule:var(--cx-rule); --m-rule2:var(--cx-rule-soft); --m-surface:#1c2723; --m-signal:var(--cx-teal); --m-signal2:var(--cx-teal-700); --m-action:var(--cx-coral); --m-action2:var(--cx-coral-700); --m-danger:var(--cx-danger); --m-success:var(--cx-success); --m-warn:var(--cx-warn); --m-info:#6fa8ff; --pl-paper:var(--cx-paper); --pl-white:var(--cx-card); --pl-ink:var(--cx-ink); --pl-soft:var(--cx-ink-soft); --pl-faint:var(--cx-ink-faint); --pl-mute:var(--cx-ink-mute); --pl-rule:var(--cx-rule); --pl-rule2:var(--cx-rule-soft); --pl-surface:#1c2723; --pl-signal:var(--cx-teal); --pl-signal2:var(--cx-teal-700); --pl-action:var(--cx-coral); --pl-action2:var(--cx-coral-700); --pl-danger:var(--cx-danger); --pl-success:var(--cx-success); --pl-warn:var(--cx-warn); --pl-info:#6fa8ff; --s-paper:var(--cx-paper); --s-white:var(--cx-card); --s-ink:var(--cx-ink); --s-soft:var(--cx-ink-soft); --s-faint:var(--cx-ink-faint); --s-mute:var(--cx-ink-mute); --s-rule:var(--cx-rule); --s-rule2:var(--cx-rule-soft); --s-surface:#1c2723; --s-signal:var(--cx-teal); --s-signal2:var(--cx-teal-700); --s-action:var(--cx-coral); --s-action2:var(--cx-coral-700); --s-danger:var(--cx-danger); --s-success:var(--cx-success); --s-warn:var(--cx-warn); --s-info:#6fa8ff; --sel-paper:var(--cx-paper); --sel-white:var(--cx-card); --sel-ink:var(--cx-ink); --sel-soft:var(--cx-ink-soft); --sel-faint:var(--cx-ink-faint); --sel-mute:var(--cx-ink-mute); --sel-rule:var(--cx-rule); --sel-rule2:var(--cx-rule-soft); --sel-surface:#1c2723; --sel-signal:var(--cx-teal); --sel-signal2:var(--cx-teal-700); --sel-action:var(--cx-coral); --sel-action2:var(--cx-coral-700); --sel-danger:var(--cx-danger); --sel-success:var(--cx-success); --sel-warn:var(--cx-warn); --sel-info:#6fa8ff; } /* ---------- Agenda do médico (FullCalendar) no escuro ---------- */ /* Janela de disponibilidade (.fc-bg-event) era cinza claro sólido → tint teal sutil. */ :root[data-theme="dark"] #main-cal .fc-bg-event { background-color: rgba(99,217,196,0.10) !important; } /* Linhas da grade eram rgba(0,0,0,…) → somem no escuro. Vira rgba branco sutil. */ :root[data-theme="dark"] #main-cal .fc-timegrid-slots .fc-timegrid-slot { border-top-color: rgba(255,255,255,0.10) !important; } :root[data-theme="dark"] #main-cal .fc-timegrid-slots .fc-timegrid-slot-minor { border-top-color: rgba(255,255,255,0.04) !important; } :root[data-theme="dark"] #main-cal .fc-timegrid-slots .fc-timegrid-slot[data-time$=":30:00"] { border-top-color: rgba(255,255,255,0.07) !important; } :root[data-theme="dark"] .fc-timeGridWeek-view .fc-timegrid-slot-lane, :root[data-theme="dark"] .fc-timeGridDay-view .fc-timegrid-slot-lane { background: rgba(255,255,255,0.03) !important; } /* Bordas de células/cabeçalho/scrollgrid do FullCalendar (default claro) → rule dark. */ :root[data-theme="dark"] #main-cal .fc-theme-standard td, :root[data-theme="dark"] #main-cal .fc-theme-standard th, :root[data-theme="dark"] #main-cal .fc-scrollgrid, :root[data-theme="dark"] #main-cal .fc-scrollgrid td, :root[data-theme="dark"] #main-cal .fc-col-header-cell { border-color: var(--cx-rule) !important; } /* Paleta dos EVENTOS da agenda (definida clara no professional_calendar.html; sem redefinir aqui, as cores claras somem no escuro — em especial o BLOQUEIO, que era cinza #616161 num fundo quase invisível). Versões mais claras/legíveis. */ :root[data-theme="dark"] { --c-consulta: #5b9bff; --c-consulta-bg: rgba(91,155,255,.16); --c-retorno: #5fd08a; --c-retorno-bg: rgba(95,208,138,.16); --c-telemed: #c07be0; --c-telemed-bg: rgba(192,123,224,.16); --c-urgencia: #ff7168; --c-urgencia-bg: rgba(255,113,104,.16); --c-procedimento: #e0b15a; --c-procedimento-bg: rgba(224,177,90,.16); --c-bloqueio: #aab4ae; --c-bloqueio-bg: rgba(170,180,174,.18); } /* ---------- Barra lateral do médico/recepcionista (partial _pro_sidebar + sidebar inline do dashboard — mesmos nomes de classe) no escuro ---------- */ /* Hover dos itens de menu era #f0ede6 (bege claro) → overlay claro sutil. */ :root[data-theme="dark"] .nav-btn:hover { background: var(--xt-overlay-sm, rgba(255,255,255,.08)); color: var(--cx-ink); } /* Fundo da foto/placeholder do avatar era bege claro (#e8e6df). */ :root[data-theme="dark"] .avatar-img, :root[data-theme="dark"] .avatar-placeholder { background: #1c2723; } /* Skeleton de carregamento (shimmer) usava gradientes claros → gradiente escuro. */ :root[data-theme="dark"] .ps-skel, :root[data-theme="dark"] #pro-sidebar.ps-loading #ps-avatar-placeholder, :root[data-theme="dark"] #pro-sidebar.ps-loading .sidebar-name, :root[data-theme="dark"] #pro-sidebar.ps-loading .sidebar-crm { background-image: linear-gradient(90deg, #1c2723 20%, #263430 40%, #1c2723 60%) !important; }