/* ============================================================ cdr_brand_theme.css — Identidade visual Grupo CDR para o CEDAR ------------------------------------------------------------ Manual da Marca CDR: símbolo do cedro + círculo (segurança, acolhimento, confiabilidade). Dourado #B3864F · Marrom #785533. ESTRATÉGIA (não-invasiva): carregado DEPOIS de styles.css, este arquivo (1) sobrescreve os design tokens de :root e (2) redefine cirurgicamente os componentes de alto impacto. NÃO edita styles.css. PRESERVA cores semânticas clínicas/operacionais: verde = ok/concluído/colono · vermelho = erro/crítico âmbar = atenção/pendência · azul = EDA/informação Kill-switch visual: desliga os overrides. (o addon respeita localStorage['CEDAR_BRAND_DISABLED']='1') ============================================================ */ /* ════════════════ 1. DESIGN TOKENS (paleta CDR) ════════════════ */ :root:not([data-cdr-theme="off"]) { /* superfícies / fundos — quentes e claros (sistema leve) */ --bg: #FBFAF8; --surface: #FFFFFF; --surface-2: #F6F0EA; /* superfície secundária */ --surface-3: #FAF7F2; /* texto */ --ink: #2B211B; /* texto principal */ --ink-soft: #6F6258; /* texto secundário */ /* linhas / bordas */ --line: #E6D8C8; /* borda suave da marca */ --line-strong: #D8C4AC; /* MARCA — marrom primário + dourado de destaque */ --brand: #785533; /* primary */ --brand-hover: #66462B; /* primary hover */ --brand-dark: #4A3221; /* marrom escuro — faixa de navegação do hub */ --brand-darker: #38261A; /* hover/bordas sobre a faixa escura */ --brand-light: #F4EADF; /* soft background da marca */ --brand-ink: #FFFFFF; /* texto sobre a marca */ --accent: #B3864F; /* dourado de destaque */ --accent-hover: #9E7542; /* aliases usados por componentes pontuais */ --brand-soft: #F4EADF; /* sombras refinadas (mais suaves, menos "frias") */ --shadow-sm: 0 1px 2px rgba(43,33,27,.06); --shadow-md: 0 2px 10px rgba(43,33,27,.08); /* footer institucional */ --cdr-footer-h: 22px; /* ── Tokens CDR nomeados (aliases p/ clareza e uso futuro) ── */ --cdr-primary: #785533; --cdr-primary-hover: #66462B; --cdr-accent: #B3864F; --cdr-accent-hover: #9E7542; --cdr-bg: #FAF7F2; --cdr-bg-soft: #FCFAF7; --cdr-surface: #FFFFFF; --cdr-surface-soft: #F6F0EA; --cdr-border: #E6D8C8; --cdr-border-soft: #EFE6DB; --cdr-border-row: #E9DED2; --cdr-text: #2B211B; --cdr-text-muted: #6F6258; --cdr-neutral-border: #D8D2CB; --cdr-neutral-text: #5C5148; /* cores semânticas: PRESERVADAS (não redefinir --ok/--warn/--danger/--eda/--colono) */ } /* corpo: leve aquecimento do fundo */ body { background: var(--bg); color: var(--ink); } /* ════════════════ 2. TOPBAR (fundo branco + marca) ════════════════ */ /* Spec: fundo branco, borda inferior #E6D8C8, logo CDR à esquerda, módulo ativo em texto forte. A topbar mantém ~52px de altura (o cálculo calc(100vh - 52px) das telas depende disso). */ :root:not([data-cdr-theme="off"]) .topbar { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(43,33,27,.02); } /* contexto do paciente legível sobre branco */ :root:not([data-cdr-theme="off"]) .tb-nome { color: var(--ink); } :root:not([data-cdr-theme="off"]) .tb-data { color: var(--ink-soft); } :root:not([data-cdr-theme="off"]) .tb-tipo-pill { background: var(--brand); color: #fff; } /* pills de status: muted vira creme da marca; ok/warn semânticos preservados */ :root:not([data-cdr-theme="off"]) .tb-pill--muted { background: var(--brand-light); color: var(--brand); } /* botões translúcidos (brancos sobre escuro) → neutros legíveis sobre branco */ :root:not([data-cdr-theme="off"]) .tb-btn--back, :root:not([data-cdr-theme="off"]) .tb-btn--pdf, :root:not([data-cdr-theme="off"]) .tb-btn--more { background: var(--surface-2); color: var(--ink); } :root:not([data-cdr-theme="off"]) .tb-btn--back:hover, :root:not([data-cdr-theme="off"]) .tb-btn--pdf:hover, :root:not([data-cdr-theme="off"]) .tb-btn--more:hover { background: var(--brand-light); color: var(--brand); } /* save/sign/new/exame: mantêm cor semântica (azul/verde/âmbar) — legíveis sobre branco */ /* divisores dos módulos: suaves na cor da marca */ :root:not([data-cdr-theme="off"]) .tb-modules { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } /* botão de módulo ATIVO em marrom da marca (era #1e293b slate) */ :root:not([data-cdr-theme="off"]) .tb-btn.tb-btn--module { border-color: var(--line-strong); color: var(--ink); } :root:not([data-cdr-theme="off"]) .tb-btn.tb-btn--module:hover { background: var(--brand-light); border-color: var(--accent); color: var(--brand); } :root:not([data-cdr-theme="off"]) .tb-btn.tb-btn--module.active { background: var(--brand); color: #fff; border-color: var(--brand); } /* ════════ 2b. FAIXA ESCURA do hub (direita, a partir do botão Agenda) ════════ .tb-modules concentra TODA a navegação à direita (módulos + chip do usuário). Vira uma faixa marrom-escura que destaca o hub e o separa do conteúdo. Os controles internos passam a ter texto claro (creme/branco) para boa leitura. */ :root:not([data-cdr-theme="off"]) .tb-modules { background: var(--brand-dark); align-self: stretch; margin: -6px -14px -6px 8px; /* preenche a altura e encosta na borda direita */ padding: 0 14px; border: none; border-radius: 12px 0 0 12px; gap: 6px; } /* botões de módulo "fantasma" (legíveis sobre o marrom escuro) */ :root:not([data-cdr-theme="off"]) .tb-modules .tb-btn.tb-btn--module { background: rgba(255,255,255,.08); color: #F4EADF; border: 1px solid rgba(255,255,255,.22); } :root:not([data-cdr-theme="off"]) .tb-modules .tb-btn.tb-btn--module:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); color: #ffffff; } :root:not([data-cdr-theme="off"]) .tb-modules .tb-btn.tb-btn--module.active { background: var(--brand-light); color: var(--brand); border-color: var(--brand-light); } /* botão "Agenda" (home) = destaque dourado, legível sobre a faixa (vence o inline) */ :root:not([data-cdr-theme="off"]) .tb-modules #btn_agenda { background: var(--accent) !important; border-color: var(--accent) !important; color: #3A2718 !important; font-weight: 700; } :root:not([data-cdr-theme="off"]) .tb-modules #btn_agenda:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } /* chip do usuário dentro da faixa: pílula translúcida + texto claro (NÃO mexe no .cuc-menu, que é um popover sobre fundo branco) */ :root:not([data-cdr-theme="off"]) .tb-modules .cedar-user-chip .cuc-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); } :root:not([data-cdr-theme="off"]) .tb-modules .cedar-user-chip .cuc-btn:hover { background: rgba(255,255,255,.18); } :root:not([data-cdr-theme="off"]) .tb-modules .cuc-meta, :root:not([data-cdr-theme="off"]) .tb-modules .cuc-meta *, :root:not([data-cdr-theme="off"]) .tb-modules .cuc-caret { color: #F4EADF; } /* ── Lockup da marca (injetado pelo addon como 1º item da .topbar) ── flex:0 0 auto → NÃO encolhe (a topbar é densa; evita sobreposição). */ .cdr-brand-lockup { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 2px; margin-right: 6px; border-right: 1px solid var(--line); flex: 0 0 auto; max-width: 320px; user-select: none; } .cdr-brand-lockup .cdr-brand-symbol { flex: 0 0 auto; display: inline-flex; } .cdr-brand-lockup .cdr-brand-symbol img, .cdr-brand-lockup .cdr-brand-symbol svg { height: 32px; width: 32px; display: block; } .cdr-mod-name { display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line); font-weight: 700; font-size: 13px; letter-spacing: .2px; color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; } .cdr-mod-name::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--accent); display: inline-block; flex: 0 0 auto; } /* menu recolhido (rail collapsed) ou tela estreita → só o símbolo do cedro */ :root[data-rail="collapsed"] .cdr-brand-lockup .cdr-brand-full { display: none; } @media (max-width: 980px) { .cdr-brand-lockup .cdr-brand-full { display: none; } } /* ════════════════ 3. SIDEBAR / NAVEGAÇÃO ════════════════ */ /* Spec: item ativo com fundo suave #F4EADF, indicador lateral #B3864F, texto #785533. Preserva o indicador operacional EDA(azul)/Colono(verde). */ :root:not([data-cdr-theme="off"]) .nav-item.active { background: var(--brand-light); color: var(--brand); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); } /* segmentos EDA/Colono ativos: mantêm a borda lateral colorida (operacional) */ :root:not([data-cdr-theme="off"]) .nav-item.tab-eda.active, :root:not([data-cdr-theme="off"]) .nav-item.tab-colono.active { box-shadow: none; } :root:not([data-cdr-theme="off"]) .nav-item.tab-eda.active { border-left: 3px solid var(--eda); } :root:not([data-cdr-theme="off"]) .nav-item.tab-colono.active { border-left: 3px solid var(--colono); } :root:not([data-cdr-theme="off"]) .nav-item:hover { background: var(--surface-2); } /* ════════════════ 4. BOTÕES ════════════════ */ /* primário = marrom da marca (apenas ações principais) */ :root:not([data-cdr-theme="off"]) .btn-primary, :root:not([data-cdr-theme="off"]) .btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; } :root:not([data-cdr-theme="off"]) .btn-primary:hover, :root:not([data-cdr-theme="off"]) .btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); filter: none; } /* utilitário: botão de destaque secundário (borda dourada, texto marrom) */ .cdr-btn-accent { height: 36px; min-height: 38px; padding: 0 14px; border-radius: var(--radius-sm); background: #fff; border: 1.5px solid var(--accent); color: var(--brand); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .cdr-btn-accent:hover { background: var(--brand-light); border-color: var(--accent-hover); } .cdr-btn-primary { height: 36px; min-height: 38px; padding: 0 16px; border-radius: var(--radius-sm); background: var(--brand); border: 1px solid var(--brand); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease; } .cdr-btn-primary:hover { background: var(--brand-hover); } /* ════════════════ 5. INPUTS / FOCO ════════════════ */ /* Spec: foco com anel discreto dourado #B3864F (era anel azul) */ :root:not([data-cdr-theme="off"]) input:focus, :root:not([data-cdr-theme="off"]) select:focus, :root:not([data-cdr-theme="off"]) textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(179,134,79,.18); } /* ════════════════ 6. CARDS / TÍTULOS DE SEÇÃO ════════════════ */ /* títulos de bloco em marrom da marca (sem virar decorativo) */ :root:not([data-cdr-theme="off"]) .block h2, :root:not([data-cdr-theme="off"]) .card-head, :root:not([data-cdr-theme="off"]) .les-header h2, :root:not([data-cdr-theme="off"]) .usec-head h3 { color: var(--brand); } /* cabeçalho de configurações: faixa creme da marca */ :root:not([data-cdr-theme="off"]) .cfg-head { color: var(--brand); background: var(--brand-light); border-bottom: 1px solid var(--line); } /* ════════════════ 7. BADGES INSTITUCIONAIS ════════════════ */ /* badge da marca: creme + marrom (status semânticos NÃO usam isto) */ .cdr-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--brand-light); color: var(--brand); font-size: 11px; font-weight: 700; line-height: 1.7; border: 1px solid var(--line); } .cdr-badge--accent { background: var(--accent); color: #fff; border-color: var(--accent); } /* ════════════════ 8. MODAIS / DIÁLOGOS (acento de cabeçalho) ════════════════ */ :root:not([data-cdr-theme="off"]) .ag-modal-head h3, :root:not([data-cdr-theme="off"]) .vig-modal-head h3, :root:not([data-cdr-theme="off"]) .tpl-modal-head h3 { color: var(--brand); } /* ════════════════ 9. LOGIN (tela institucional) ════════════════ */ :root:not([data-cdr-theme="off"]) .cedar-login-overlay { background: radial-gradient(1200px 500px at 50% -10%, rgba(179,134,79,.10), transparent 60%), linear-gradient(180deg, #FBFAF8 0%, #F4EADF 100%); } :root:not([data-cdr-theme="off"]) .cedar-login-card { border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(43,33,27,.16); border-radius: 16px; } /* logo da marca injetada acima do título; some o texto-marca antigo */ :root:not([data-cdr-theme="off"]) .cedar-login-brand { display: none; } .cdr-login-logo { display: flex; justify-content: center; margin-bottom: 14px; } .cdr-login-logo img, .cdr-login-logo svg { height: 56px; width: auto; } :root:not([data-cdr-theme="off"]) .cedar-login-user:hover { border-color: var(--accent); background: var(--brand-light); } :root:not([data-cdr-theme="off"]) .cedar-login-go, :root:not([data-cdr-theme="off"]) .cedar-login-card .cedar-login-go { background: var(--brand); } :root:not([data-cdr-theme="off"]) .cedar-login-go:hover { background: var(--brand-hover); } /* ════════════════ 10. BLOCO INSTITUCIONAL (Config / Sobre) ════════════════ */ .cdr-about { margin: 4px 0 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(420px 200px at 100% 0%, rgba(179,134,79,.08), transparent 70%), linear-gradient(180deg, #FFFFFF 0%, var(--surface-3) 100%); display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .cdr-about__logo { flex: 0 0 auto; } .cdr-about__logo svg, .cdr-about__logo img { height: 76px; width: auto; } .cdr-about__info { flex: 1 1 280px; min-width: 240px; } .cdr-about__title { font-size: 20px; font-weight: 800; color: var(--brand); margin: 0 0 2px; letter-spacing: .3px; } .cdr-about__sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; } .cdr-about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 8px 18px; } .cdr-about__item { font-size: 12.5px; color: var(--ink); } .cdr-about__item b { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-hover); margin-bottom: 1px; } .cdr-about__motto { margin-top: 14px; font-style: italic; font-weight: 300; color: var(--ink-soft); font-size: 13px; } .cdr-about__motto small { display:block; font-style: normal; font-weight: 400; font-size: 11px; color: var(--accent-hover); margin-top: 2px; } /* marca d'água discreta do cedro (cabeçalhos de dashboard/agenda) — 3–6% */ .cdr-leaf-watermark { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 120px; height: 120px; opacity: .05; pointer-events: none; z-index: 0; } /* ════════════════ 11. FOOTER INSTITUCIONAL (lema CDR) ════════════════ */ /* "Bonum facientes infatigabiles" — base da cultura do Grupo CDR. Fonte fina, discreta, fixa no rodapé; legível mas sem competir. */ .cdr-footer { position: fixed; left: 0; right: 0; bottom: 0; height: var(--cdr-footer-h); z-index: 40; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(251,250,248,0) 0%, var(--surface-3) 55%); border-top: 1px solid var(--line); pointer-events: none; } .cdr-footer__text { font-weight: 300; font-size: 11.5px; letter-spacing: 1.2px; color: var(--ink-soft); font-style: italic; } .cdr-footer__text b { font-weight: 500; font-style: normal; color: var(--accent-hover); } /* abre espaço para o footer nas telas de altura fixa (não cobre conteúdo) */ :root:not([data-cdr-theme="off"]) #screen_agenda.active, :root:not([data-cdr-theme="off"]) #screen_exame.active, :root:not([data-cdr-theme="off"]) #screen_mestres.active, :root:not([data-cdr-theme="off"]) #screen_vigilancia.active, :root:not([data-cdr-theme="off"]) #screen_config.active, :root:not([data-cdr-theme="off"]) #screen_banco.active, :root:not([data-cdr-theme="off"]) #screen_consultas.active, :root:not([data-cdr-theme="off"]) .layout { height: calc(100vh - 52px - var(--cdr-footer-h)); } /* ════════════════════════════════════════════════════════════════ REFINO v2 (2026-06-28) — hierarquia, contraste e SEPARAÇÃO DE NÍVEIS Foco na Agenda (tela de maior uso). Só apresentação; nenhuma lógica. ════════════════════════════════════════════════════════════════ */ /* ── Config = botão de ÍCONE de toolbar (quadrado, engrenagem centralizada) ── Próximo ao avatar; engrenagem SVG perfeitamente centrada; sem texto/pill. Geometria forçada (!important) p/ não colapsar de altura nem virar "pill". */ :root:not([data-cdr-theme="off"]) .tb-modules #btn_goto_config { order: 5; box-sizing: border-box !important; width: 36px !important; height: 36px !important; min-width: 36px !important; flex: 0 0 36px !important; padding: 0 !important; font-size: 0 !important; /* esconde o texto "⚙ Configurações" */ line-height: 0 !important; background-color: #FBFAF8 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23785533'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54A.48.48 0 0014 2h-4a.48.48 0 00-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.05 8.47a.49.49 0 00.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.04.24.23.41.47.41h4c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 00-.12-.61l-2.01-1.58zM12 15.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 19px 19px !important; border: 1px solid #D8C7B5 !important; border-radius: 8px !important; box-shadow: none !important; } :root:not([data-cdr-theme="off"]) .tb-modules #btn_goto_config::before { content: none !important; } :root:not([data-cdr-theme="off"]) .tb-modules #btn_goto_config:hover { background-color: #F4EADF !important; border-color: #D8C7B5 !important; } :root:not([data-cdr-theme="off"]) .tb-modules #btn_goto_config:active { background-color: #ECDDC9 !important; } :root:not([data-cdr-theme="off"]) .tb-modules #btn_goto_config:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(179,134,79,.45) !important; } :root:not([data-cdr-theme="off"]) #cedar_user_chip { order: 6; } /* ════ NÍVEL 2 — Cabeçalho da página (título + ações) ════ */ :root:not([data-cdr-theme="off"]) #screen_agenda .ag-header { padding: 20px 20px 14px; align-items: flex-start; } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-title { font-size: 26px; font-weight: 800; letter-spacing: -.2px; color: var(--brand); } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-date-display { color: var(--cdr-text-muted); font-weight: 600; } /* ════ NÍVEL 3 — Faixa de indicadores (KPIs) ════ */ :root:not([data-cdr-theme="off"]) #screen_agenda .ag-kpi-bar { margin: 0 20px 14px; padding: 12px 14px; background: var(--cdr-bg-soft); border: 1px solid var(--cdr-border); border-radius: 12px; gap: 10px; } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-kpi { background: var(--cdr-surface); border: 1.5px solid var(--cdr-border-soft); box-shadow: var(--shadow-sm); } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-kpi:hover, :root:not([data-cdr-theme="off"]) #screen_agenda .ag-kpi.active { border-color: var(--accent); background: var(--brand-light); } /* ════ NÍVEL 4 — Filtros / navegação local (toolbar) ════ */ :root:not([data-cdr-theme="off"]) #screen_agenda .ag-toolbar { margin: 0 20px 12px; padding: 10px 12px; background: var(--cdr-surface); border: 1px solid var(--cdr-border); border-radius: 10px; border-bottom: 1px solid var(--cdr-border); /* anula a borda-base inferior solta */ } /* abas de período mais visíveis */ :root:not([data-cdr-theme="off"]) #screen_agenda .ag-tab { border: 1px solid transparent; color: var(--cdr-neutral-text); } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-tab:hover { background: var(--cdr-surface-soft); } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-tab--active { background: var(--brand); color: #fff; border-color: var(--brand); } /* inputs do toolbar com borda neutra clara */ :root:not([data-cdr-theme="off"]) #screen_agenda .ag-date-input, :root:not([data-cdr-theme="off"]) #screen_agenda .ag-search-input, :root:not([data-cdr-theme="off"]) #screen_agenda .ag-sort-select { border: 1px solid var(--cdr-neutral-border); border-radius: 8px; } /* abas Exames / Consultas mais nítidas */ :root:not([data-cdr-theme="off"]) #screen_agenda .ag-cons-tabs { margin: 0 20px; border-bottom: 1px solid var(--cdr-border); } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-ctab--active { color: var(--brand); border-bottom: 2px solid var(--accent); font-weight: 700; } /* ════ NÍVEL 5 — Lista de pacientes ════ */ :root:not([data-cdr-theme="off"]) #screen_agenda .ag-body { padding: 0 20px 8px; } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-turno-head { border-bottom: 1px solid var(--cdr-border); } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-turno-label { color: var(--brand); } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row { padding: 11px 14px; margin-bottom: 8px; gap: 12px; border: 1px solid var(--cdr-border-row); border-left-width: 4px; border-radius: 10px; box-shadow: var(--shadow-sm); } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row:hover { background: var(--cdr-bg-soft); box-shadow: 0 2px 8px rgba(43,33,27,.10); border-color: var(--cdr-border); } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-nome { font-size: 14px; } /* ════ BADGES / status mais fortes e escaneáveis ════ */ :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-tipo, :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-status, :root:not([data-cdr-theme="off"]) #screen_agenda .ag-flag { padding: 3px 9px; font-size: 10.5px; font-weight: 700; border-radius: 6px; border: 1px solid transparent; line-height: 1.5; } /* tipo de exame (operacional: EDA azul, COLONO verde, dual roxo) — reforço de borda */ :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-tipo[data-t="EDA"] { border-color: #bfdbfe; } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-tipo[data-t="COLONO"] { border-color: #a7f3d0; } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-tipo[data-t="EDA+COLONO"] { border-color: #ddd6fe; } /* flags (Sem assin. / Sem PDF) — texto mais forte + borda */ :root:not([data-cdr-theme="off"]) #screen_agenda .ag-flag--sig { background: #fef3c7; color: #92400e; border-color: #fcd34d; } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-flag--pdf { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-status--green { background: #d1fae5; color: #065f46; border-color: #86efac; } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-status--amber { background: #fef3c7; color: #92400e; border-color: #fcd34d; } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-status--red { background: #fee2e2; color: #991b1b; border-color: #fca5a5; } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-status--grey { background: #f1f0ee; color: #5c5148; border-color: #ddd6cf; } /* ════ BOTÕES (.ag-btn) — hierarquia clara + estados ════ */ /* base = NEUTRO (branco, borda, texto quente). Ex.: "Buscar paciente" */ :root:not([data-cdr-theme="off"]) #screen_agenda .ag-btn, :root:not([data-cdr-theme="off"]) .ag-modal .ag-btn, :root:not([data-cdr-theme="off"]) .ag-drawer .ag-btn { min-height: 38px; padding: 9px 16px; font-weight: 600; background: var(--cdr-surface); border: 1px solid var(--cdr-neutral-border); color: var(--cdr-neutral-text); } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-btn:hover { background: var(--cdr-surface-soft); } /* PRIMÁRIO = marrom (Novo agendamento / Novo exame / Abrir exame / Salvar) */ :root:not([data-cdr-theme="off"]) .ag-btn--primary { background: var(--brand) !important; border: 1px solid var(--brand) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(43,33,27,.18); } :root:not([data-cdr-theme="off"]) .ag-btn--primary:hover { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; } :root:not([data-cdr-theme="off"]) .ag-btn--primary:active { background: #573a23 !important; } /* SECUNDÁRIO = creme (Agenda Terapêutica) */ :root:not([data-cdr-theme="off"]) .ag-btn--terap { background: var(--brand-light) !important; border: 1.5px solid var(--accent) !important; color: var(--brand) !important; } :root:not([data-cdr-theme="off"]) .ag-btn--terap:hover { background: #ECDDC9 !important; border-color: var(--accent-hover) !important; } :root:not([data-cdr-theme="off"]) .ag-btn--terap .ag-terap-badge-n { background: var(--brand); color: #fff; } /* SUCESSO (Assinar) e PERIGO (excluir) = semânticos preservados */ :root:not([data-cdr-theme="off"]) .ag-btn--success { background: #059669 !important; border: 1px solid #059669 !important; color: #fff !important; } :root:not([data-cdr-theme="off"]) .ag-btn--success:hover { background: #047857 !important; } :root:not([data-cdr-theme="off"]) .ag-btn--danger { background: #dc2626 !important; border: 1px solid #dc2626 !important; color: #fff !important; } :root:not([data-cdr-theme="off"]) .ag-btn--danger:hover { background: #b91c1c !important; } /* OUTLINE refinado (paginação, drawer, modal "Cancelar") */ :root:not([data-cdr-theme="off"]) .ag-btn--outline { background: var(--cdr-surface); border: 1px solid var(--cdr-neutral-border); color: var(--cdr-neutral-text); } :root:not([data-cdr-theme="off"]) .ag-btn--outline:hover { background: var(--cdr-surface-soft); border-color: var(--accent); } /* foco acessível: anel dourado em todos os ag-btn */ :root:not([data-cdr-theme="off"]) .ag-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(179,134,79,.40); } /* DESTAQUE do botão "Abrir" na linha (1ª ação outline) */ :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-actions .ag-btn--outline:first-child { background: var(--brand-light); border: 1.5px solid var(--accent); color: var(--brand); font-weight: 700; } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-actions .ag-btn--outline:first-child:hover { background: var(--brand); color: #fff; border-color: var(--brand); } /* "×" excluir na linha: vermelho semântico, porém discreto (não disputa com Abrir) */ :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-actions .ag-btn--danger { background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; width: 28px; padding: 0; } :root:not([data-cdr-theme="off"]) #screen_agenda .ag-row-actions .ag-btn--danger:hover { background: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; } /* ════════════════ 2c. TOPBAR — ajustes 2026-07-03 (decisão Dr. Marconi) ════════════════ (1) STATUS/AUTOSAVE fora do topbar: o pill #autosave_state ("rascunho", "Final. (AP)", "salvo hh:mm"…) sai da barra. O status do exame já aparece como badge no cabeçalho do próprio exame (não se perde nada). (2) UNIFICA a lateral direita: antes o justify-content:space-between jogava as ações (Salvar/Assinar/PDF/Novo/⋯) para a borda, deixando um VÃO BRANCO entre a faixa marrom da navegação e os botões (o "outra cor, estranho"). Agora navegação + ações formam UMA faixa marrom contínua, encostada na borda direita, sem vão. (3) COMPACTA levemente para caber sem transbordar (nada de Novo/⋯ cortados). */ /* (1) — remove o pill de status/autosave do topbar */ :root:not([data-cdr-theme="off"]) #autosave_state { display: none !important; } /* (2) — acaba o vão: nav (+ ações) viram um bloco único colado à direita */ :root:not([data-cdr-theme="off"]) .topbar { justify-content: flex-start; } :root:not([data-cdr-theme="off"]) .tb-modules { margin-left: auto; } /* ações do exame (.tb-right, visível só na tela de exame) = mesma faixa marrom */ :root:not([data-cdr-theme="off"]) .tb-right { background: var(--brand-dark); align-self: stretch; margin: -6px -14px -6px 0; /* preenche a altura e encosta na borda direita */ padding: 0 12px; gap: 6px; } /* na tela de exame a navegação não é mais o último item → encosta nas ações (sem "vazar" os 14px que a faziam alcançar a borda quando era a última). :has() é progressivo — sem suporte, cai no overlap marrom-sobre-marrom (invisível). */ :root:not([data-cdr-theme="off"]) body:has(#screen_exame.active) .tb-modules { margin-right: 0; border-radius: 12px 0 0 12px; } /* botões neutros das ações (◐ toggle de contexto, PDF ▾, ⋯) legíveis sobre o marrom */ :root:not([data-cdr-theme="off"]) .tb-right .tb-btn--pdf, :root:not([data-cdr-theme="off"]) .tb-right .tb-btn--more { background: rgba(255,255,255,.08); color: #F4EADF; border: 1px solid rgba(255,255,255,.22); } :root:not([data-cdr-theme="off"]) .tb-right .tb-btn--pdf:hover, :root:not([data-cdr-theme="off"]) .tb-right .tb-btn--more:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.45); } /* Salvar (azul) / Assinar (verde) / Novo (âmbar) mantêm a cor semântica — destacam sobre a faixa (como o "Agenda" dourado já faz na navegação) */ :root:not([data-cdr-theme="off"]) .tb-right .tb-btn--save, :root:not([data-cdr-theme="off"]) .tb-right .tb-btn--sign, :root:not([data-cdr-theme="off"]) .tb-right .tb-btn--new { border: 1px solid rgba(0,0,0,.12); } /* (3) — compactação leve p/ caber em telas médias sem cortar botões */ :root:not([data-cdr-theme="off"]) .tb-modules .tb-btn.tb-btn--module { padding: 5px 9px; } :root:not([data-cdr-theme="off"]) .tb-right .tb-btn { padding: 5px 10px; } /* Telas mais estreitas (< 1400px): recolhe o rótulo do módulo (fica só o cedro) e aperta um pouco mais os espaçamentos, garantindo que nada seja cortado. */ @media (max-width: 1400px) { :root:not([data-cdr-theme="off"]) .cdr-brand-lockup .cdr-brand-full { display: none; } :root:not([data-cdr-theme="off"]) .tb-modules { gap: 4px; padding: 0 10px; } :root:not([data-cdr-theme="off"]) .tb-modules .tb-btn.tb-btn--module { padding: 5px 8px; } :root:not([data-cdr-theme="off"]) .tb-right { padding: 0 8px; gap: 4px; } :root:not([data-cdr-theme="off"]) .tb-right .tb-btn { padding: 5px 8px; } } /* ════════════════ 12b. RESPONSIVE FIX PACK — 2026-07-04 ════════════════ Bug (vídeo): a faixa de navegação da direita (.tb-modules = módulos + Visão:Master + engrenagem + chip do usuário) é flex nowrap de itens incompressíveis SEM min-width:0, dentro de .topbar nowrap SEM overflow. Em telas estreitas ela transborda e, sendo sticky (z-index:50), flutua sobre o conteúdo; e empurra a página (scroll horizontal). Decisão do Dr.: QUEBRAR EM 2 LINHAS. Só CSS, aditivo, preserva IDs/classes. (TBMODULES-01 · TBMODULES-02 · TOPBAR-OVERFLOW-04) */ /* header não gera scroll horizontal global porque a topbar agora QUEBRA em 2 linhas (flex-wrap abaixo). NÃO usar overflow:clip/hidden aqui — pela regra do CSS, overflow-x:clip força overflow-y a recortar também, cortando os MENUS que descem do topbar (chip do usuário .cuc-menu, PDF ▾, ⋯). max-width:100vw fica só como rede de segurança contra transbordo horizontal. */ :root:not([data-cdr-theme="off"]) header.topbar { max-width: 100vw; } /* cluster direito encolhe e quebra internamente em vez de transbordar */ :root:not([data-cdr-theme="off"]) .tb-modules { flex-wrap: wrap; min-width: 0; row-gap: 4px; justify-content: flex-end; } :root:not([data-cdr-theme="off"]) .tb-left { min-width: 0; } /* abaixo de 1450px o topbar deixa de ser nowrap rígido (min-height:48px vira piso) e as faixas marrons centralizam ao ganhar altura — nunca flutuam */ @media (max-width: 1450px) { :root:not([data-cdr-theme="off"]) .topbar { flex-wrap: wrap; row-gap: 4px; height: auto; } :root:not([data-cdr-theme="off"]) .tb-modules { margin-top: 0; margin-bottom: 0; align-self: center; } :root:not([data-cdr-theme="off"]) .tb-right { margin-top: 0; margin-bottom: 0; align-self: center; flex-wrap: wrap; min-width: 0; } } /* compacta os rótulos dos módulos (reduz texto, não corta) antes de apertar */ @media (max-width: 1200px) { :root:not([data-cdr-theme="off"]) .tb-modules .tb-btn.tb-btn--module { padding: 5px 8px; min-width: 0; } } @media (max-width: 1050px) { :root:not([data-cdr-theme="off"]) .tb-modules .tb-btn.tb-btn--module { padding: 5px 7px; font-size: 11px; } } /* ════════════════ 12c. ANTI-FLASH DE BOOT — 2026-07-04 ════════════════ Os addons injetam os botões do topbar (nav + chip) e blocos da Agenda DEPOIS da 1ª pintura → "pisca/redimensiona" nos primeiros ms ao recarregar. Enquanto não tem .cedar-booted, escondemos esses blocos; o cedar_bootcloak_addon.js adiciona .cedar-booted quando tudo montou, e eles aparecem já prontos com um fade curto. Kill-switch: localStorage.cedar_bootcloak_disabled='1'. Fade acontece UMA vez no boot (a classe fica permanente) — navegar depois NÃO refaz o fade. Escondemos o CONTEÚDO do topbar (.topbar > *), mantendo a BARRA visível (sem buraco) enquanto os botões montam escondidos. v5 (2026-07-05): o addon revela quando os MARCOS existem (chip do usuário, botões/abas/barra dos addons carregados) com teto de 800ms — por isso o backstop CSS subiu p/ 1.2s (deve exceder o teto). + #ag_cons_tabs coberto. */ @keyframes cds-boot-safe { to { opacity: 1; } } html:not(.cedar-booted) .topbar > *, html:not(.cedar-booted) #screen_agenda .ag-header, html:not(.cedar-booted) #screen_agenda .ag-toolbar, html:not(.cedar-booted) #screen_agenda #ag_cons_tabs, html:not(.cedar-booted) #screen_agenda .agr-bar { opacity: 0; animation: cds-boot-safe .01s linear 1.2s forwards; /* backstop: revela sozinho se o JS não marcar .cedar-booted (> teto de 800ms do addon) */ } html.cedar-booted .topbar > *, html.cedar-booted #screen_agenda .ag-header, html.cedar-booted #screen_agenda .ag-toolbar, html.cedar-booted #screen_agenda #ag_cons_tabs, html.cedar-booted #screen_agenda .agr-bar { opacity: 1; /* revelação INSTANTÂNEA (sem fade) — decisão do Dr. */ } /* nunca esconder na impressão */ @media print { .topbar > *, #screen_agenda .ag-header, #screen_agenda .ag-toolbar, #screen_agenda #ag_cons_tabs, #screen_agenda .agr-bar { opacity: 1 !important; animation: none !important; } } /* respeita quem prefere menos movimento (revela sem fade perceptível) */ @media (prefers-reduced-motion: reduce) { html.cedar-booted .topbar > *, html.cedar-booted #screen_agenda .ag-header, html.cedar-booted #screen_agenda .ag-toolbar, html.cedar-booted #screen_agenda .agr-bar { transition: none; } } /* ════════════════ 12. IMPRESSÃO ════════════════ */ /* nada da cromia/cromos da marca deve atrapalhar laudos impressos */ @media print { .cdr-footer, .cdr-brand-lockup, .cdr-mod-name, .cdr-leaf-watermark { display: none !important; } }