/* Neumann Partners · Design System * Paleta: Deep Navy (#0B2A4A) → Medium Blue (#3365A0) * Filosofia: Enterprise medical consulting · Clean · Minimalista */ :root { --color-bg: #FFFFFF; --color-bg-subtle: #F5F7FA; --color-bg-muted: #EFEFEF; --color-surface: #FFFFFF; --color-border: #E5E7EB; --color-border-strong: #D1D5DB; /* Marca · gradiente de navy a azul-médio */ --brand-deep: #0B2A4A; /* Navy profundo (início do gradiente) */ --brand-mid: #1E4876; /* Navy médio (centro do gradiente) */ --brand-light: #3365A0; /* Azul médio (final do gradiente) */ --brand-gradient: linear-gradient(135deg, #0B2A4A 0%, #1E4876 50%, #3365A0 100%); /* Tokens de UI derivados da marca */ --color-primary: #1E4A7C; /* Azul corporativo · botões, ações */ --color-primary-hover: #153C64; --color-primary-subtle: #EEF4FC; --color-primary-text: #0F2D4D; --color-text: #212121; --color-text-secondary: #4B5563; --color-text-muted: #6B7280; --color-text-inverse: #FFFFFF; --color-success: #047857; --color-success-bg: #ECFDF5; --color-warning: #B45309; --color-warning-bg: #FFFBEB; --color-danger: #B91C1C; --color-danger-bg: #FEF2F2; --color-info: #1D4ED8; --color-info-bg: #EFF6FF; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04); --shadow-md: 0 2px 8px rgba(17, 24, 39, 0.06); --shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.08); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sidebar-width: 240px; --topbar-height: 56px; --subnav-height: 48px; } /* Anna 2026-05-01 . densidade da interface controla espacamento global * compacta: 90% do padrao . cabe mais conteudo * normal: padrao * confortavel: 110% . mais arejada, melhor pra telas grandes / leitura. */ html.density-compact { --density-scale: 0.9; } html.density-normal { --density-scale: 1; } html.density-comfortable { --density-scale: 1.1; } html.density-compact .card-body, html.density-compact .modal-body { padding: calc(14px * var(--density-scale, 1)); } html.density-compact .table td, html.density-compact .table th { padding: calc(8px * var(--density-scale, 1)) calc(10px * var(--density-scale, 1)); } html.density-comfortable .card-body, html.density-comfortable .modal-body { padding: calc(18px * var(--density-scale, 1)); } html.density-comfortable .table td, html.density-comfortable .table th { padding: calc(12px * var(--density-scale, 1)) calc(14px * var(--density-scale, 1)); } /* Modo escuro · ativado via data-theme="dark" em . Preferencia salva em localStorage 'neumann.theme'. Inicializado sincrono no do index.html antes do styles.css carregar, pra evitar piscada. */ html[data-theme="dark"] { /* Paleta neutra · tons de cinza sem dominancia azul. Inspiracao: consultoria premium (BCG/McKinsey) em dark mode. */ --color-bg: #121417; --color-bg-subtle: #1C1F24; --color-bg-muted: #2A2F37; --color-surface: #1C1F24; --color-border: #353B44; --color-border-strong: #565D68; /* Destaque sobrio · branco acinzentado em vez de azul brilhante. Botoes primarios invertem: fundo claro + texto escuro. */ --color-primary: #E2E8F0; --color-primary-hover: #F8FAFC; --color-primary-subtle: #2A2F37; --color-primary-text: #0F1115; --color-text: #F5F6F8; --color-text-secondary: #D1D5DB; --color-text-muted: #9CA3AF; --color-text-inverse: #0F1115; --color-success: #86EFAC; --color-success-bg: #0B2B1C; --color-warning: #FCD34D; --color-warning-bg: #2B1F06; --color-danger: #FCA5A5; --color-danger-bg: #2B0F0F; --color-info: #D1D5DB; --color-info-bg: #2A2F37; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); color-scheme: dark; } /* Botao primario no dark · inverte (fundo claro, texto escuro) pra evitar grito visual mas manter destaque. !important vence regras legadas tipo .table a.btn-primary { color: white } */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] a.btn-primary, html[data-theme="dark"] .table a.btn-primary { background: var(--color-primary) !important; color: var(--color-primary-text) !important; border-color: var(--color-primary) !important; } html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] a.btn-primary:hover { background: var(--color-primary-hover) !important; color: var(--color-primary-text) !important; } html[data-theme="dark"] .btn-primary svg { stroke: var(--color-primary-text) !important; } html[data-theme="dark"] .btn-secondary { background: var(--color-bg-subtle) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .btn-secondary:hover { background: var(--color-bg-muted) !important; } html[data-theme="dark"] .btn-ghost { color: var(--color-text-secondary) !important; } html[data-theme="dark"] .btn-ghost:hover { background: var(--color-bg-subtle) !important; color: var(--color-text) !important; } html[data-theme="dark"] .btn-danger { background: #7F1D1D !important; color: #FCA5A5 !important; border-color: #991B1B !important; } /* Popover de notificacoes (sino) · fundo branco hardcoded nao pegou no override global. */ html[data-theme="dark"] .notif-panel, html[data-theme="dark"] .notif-head { background: var(--color-surface) !important; color: var(--color-text); border-color: var(--color-border); } html[data-theme="dark"] .notif-item, html[data-theme="dark"] .notif-item:hover { background: var(--color-surface); } html[data-theme="dark"] .notif-item:hover { background: var(--color-bg-subtle); } /* Busca global (Ctrl+K) · fundo branco hardcoded quebra no escuro */ html[data-theme="dark"] .busca-global-overlay { background: rgba(0, 0, 0, 0.7); } html[data-theme="dark"] .busca-global-modal, html[data-theme="dark"] .busca-global-input-wrap, html[data-theme="dark"] .busca-global-input { background: var(--color-surface) !important; color: var(--color-text) !important; } html[data-theme="dark"] .busca-global-grupo-titulo { color: var(--color-text-muted); } html[data-theme="dark"] .busca-global-item:hover { background: var(--color-bg-subtle); } /* Modal overlay · no escuro, fundo preto mais escuro pra destacar modal */ html[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.65); } /* Ajustes pontuais · elementos que usam cores hardcoded no inline style precisam ser neutralizados no modo escuro. */ html[data-theme="dark"] img[alt=""]:not([src*=".svg"]) { opacity: 0.9; } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--color-bg-subtle); color: var(--color-text); border-color: var(--color-border); } html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { border-color: var(--color-border-strong); box-shadow: 0 0 0 2px rgba(226, 232, 240, 0.15); outline: none; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--color-text-muted); } /* ======================================================================== * OVERRIDES GLOBAIS DO MODO ESCURO * * Codigo legado usa MUITAS cores hardcoded em style="..." inline. * Trocar cada um seria centenas de edits. Em vez disso, interceptamos * via seletor de atributo [style*="..."]. Pega 95%+ dos casos comuns. * * Regra geral: * - Cores de texto "escuras" (claro mode) -> texto claro * - Cores de texto "mid-gray" -> texto secondary * - Backgrounds claros -> subtle * - Backgrounds alerta pastel -> bg escuro com cor do status * - Bordas claras -> border do tema * - Azuis corporativos do codigo antigo -> texto claro (neutro) * ======================================================================== */ /* --- Texto --- */ /* Primario (escuro no claro -> claro no escuro) */ html[data-theme="dark"] [style*="color:#0B2A4A"], html[data-theme="dark"] [style*="color:#0F172A"], html[data-theme="dark"] [style*="color:#0F2D4D"], html[data-theme="dark"] [style*="color:#1a1a1a"], html[data-theme="dark"] [style*="color:#111"], html[data-theme="dark"] [style*="color:#1F2937"], html[data-theme="dark"] [style*="color:#212121"], html[data-theme="dark"] [style*="color:#333"], html[data-theme="dark"] [style*="color:#444"], html[data-theme="dark"] [style*="color:#555"], html[data-theme="dark"] [style*="color:#666"] { color: var(--color-text) !important; } /* Secondary */ html[data-theme="dark"] [style*="color:#334155"], html[data-theme="dark"] [style*="color:#475569"], html[data-theme="dark"] [style*="color:#4B5563"], html[data-theme="dark"] [style*="color:#64748B"], html[data-theme="dark"] [style*="color:#667781"], html[data-theme="dark"] [style*="color:#6B7280"], html[data-theme="dark"] [style*="color:#9CA3AF"] { color: var(--color-text-secondary) !important; } /* Muted */ html[data-theme="dark"] [style*="color:#94A3B8"], html[data-theme="dark"] [style*="color:#CBD5E1"], html[data-theme="dark"] [style*="color:#E2E8F0"] { color: var(--color-text-muted) !important; } /* Azuis corporativos do tema claro -> claro neutro no escuro */ html[data-theme="dark"] [style*="color:#1E4A7C"], html[data-theme="dark"] [style*="color:#1E40AF"], html[data-theme="dark"] [style*="color:#2563EB"], html[data-theme="dark"] [style*="color:#005980"], html[data-theme="dark"] [style*="color:#2B579A"] { color: var(--color-text) !important; } /* Cores de status mantem tom semantico no escuro */ html[data-theme="dark"] [style*="color:#DC2626"], html[data-theme="dark"] [style*="color:#B91C1C"], html[data-theme="dark"] [style*="color:#7F1D1D"], html[data-theme="dark"] [style*="color:#7C1D1D"], html[data-theme="dark"] [style*="color:#991B1B"] { color: var(--color-danger) !important; } html[data-theme="dark"] [style*="color:#047857"], html[data-theme="dark"] [style*="color:#10B981"] { color: var(--color-success) !important; } html[data-theme="dark"] [style*="color:#B45309"], html[data-theme="dark"] [style*="color:#D97706"], html[data-theme="dark"] [style*="color:#78350F"], html[data-theme="dark"] [style*="color:#92400E"] { color: var(--color-warning) !important; } /* --- Backgrounds --- */ /* Superficies claras -> subtle do tema */ html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background:#FFF"], html[data-theme="dark"] [style*="background:#FFFFFF"], html[data-theme="dark"] [style*="background: white"], html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background:#F8FAFC"], html[data-theme="dark"] [style*="background:#F9FAFB"], html[data-theme="dark"] [style*="background:#F5F7FA"], html[data-theme="dark"] [style*="background:#F3F4F6"], html[data-theme="dark"] [style*="background:#F1F5F9"] { background: var(--color-bg-subtle) !important; } /* Backgrounds azul suave (info) */ html[data-theme="dark"] [style*="background:#EEF4FC"], html[data-theme="dark"] [style*="background:#EFF6FF"], html[data-theme="dark"] [style*="background:#F0F9FF"] { background: var(--color-bg-muted) !important; } /* Backgrounds alerta pastel · danger/warning/success */ html[data-theme="dark"] [style*="background:#FEF2F2"], html[data-theme="dark"] [style*="background:#FEE2E2"] { background: var(--color-danger-bg) !important; } html[data-theme="dark"] [style*="background:#FEF3C7"], html[data-theme="dark"] [style*="background:#FFFBEB"], html[data-theme="dark"] [style*="background:#FDE68A"] { background: var(--color-warning-bg) !important; } html[data-theme="dark"] [style*="background:#ECFDF5"], html[data-theme="dark"] [style*="background:#D9FDD3"] { background: var(--color-success-bg) !important; } /* Bordas claras */ html[data-theme="dark"] [style*="border:1px solid #E2E8F0"], html[data-theme="dark"] [style*="border:1px solid #E5E7EB"], html[data-theme="dark"] [style*="border:1px solid #F0F0F0"], html[data-theme="dark"] [style*="border:1px solid #CBD5E1"], html[data-theme="dark"] [style*="border:1px solid #D1D5DB"], html[data-theme="dark"] [style*="border-bottom:1px solid #E5E7EB"], html[data-theme="dark"] [style*="border-bottom:1px solid #E2E8F0"], html[data-theme="dark"] [style*="border-top:1px solid #E2E8F0"], html[data-theme="dark"] [style*="border-color:#FDE68A"] { border-color: var(--color-border) !important; } /* --- Componentes especificos que renderizam branco hardcoded --- */ html[data-theme="dark"] .dropdown, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .popover, html[data-theme="dark"] .tooltip, html[data-theme="dark"] .toast, html[data-theme="dark"] .drawer, html[data-theme="dark"] .busca-global-modal, html[data-theme="dark"] .proc-sugestoes, html[data-theme="dark"] .cid-autocomplete-list, html[data-theme="dark"] .pop-posologia { background: var(--color-surface) !important; color: var(--color-text); border-color: var(--color-border); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .proc-sugestao:hover, html[data-theme="dark"] .cid-autocomplete-item:hover { background: var(--color-bg-subtle) !important; } /* Form controls no escuro · cores hardcoded no inline style */ html[data-theme="dark"] input[style*="background:#F8FAFC"], html[data-theme="dark"] input[style*="background:#F9FAFB"] { background: var(--color-bg-muted) !important; color: var(--color-text-muted) !important; } /* Card header/body hardcoded + cards com background branco implicito */ html[data-theme="dark"] .card, html[data-theme="dark"] .kpi-card { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } html[data-theme="dark"] .card-header { border-color: var(--color-border); } /* Scrollbar discreto no escuro */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-bg-muted); border-radius: 5px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); } /* Estados ativos · selecao de aba, opcao de tema, link de navegacao. No escuro precisa de destaque mais forte que o primary-subtle sozinho. */ html[data-theme="dark"] .config-tab-ativa { background: var(--color-bg-muted); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border-strong); } html[data-theme="dark"] .tema-opcao-ativa { background: var(--color-bg-muted); border-color: var(--color-border-strong); box-shadow: 0 0 0 2px rgba(226, 232, 240, 0.1); } html[data-theme="dark"] .tema-opcao-ativa .tema-opcao-label { color: var(--color-text); } html[data-theme="dark"] .tema-opcao-check { color: var(--color-text); } html[data-theme="dark"] .nav-item.active { background: var(--color-bg-muted); color: var(--color-text); } html[data-theme="dark"] .badge-info { background: var(--color-bg-muted); color: var(--color-text); border: 1px solid var(--color-border); } /* Tabelas · linhas alternadas no escuro · texto da celula legivel */ html[data-theme="dark"] .table thead { background: var(--color-bg-subtle); color: var(--color-text-secondary); } html[data-theme="dark"] .table tr:hover { background: var(--color-bg-subtle); } /* Photo initials (avatar de texto) precisa contrastar com fundo escuro */ html[data-theme="dark"] .photo-initials, html[data-theme="dark"] .photo-initials-lg { background: var(--color-bg-muted); color: var(--color-text); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--font-sans); font-size: 13px; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Tres tamanhos de fonte do app . preferencia por usuario, salva em * DB.configUI.fontSize ('pequeno' | 'normal' | 'grande'). Anna 2026-04-28 * (item #12). Usa zoom no body pra escalar tudo proporcionalmente * (espacamento, padding, fontes, bordas) . evita reescrever cada * regra com rem. Pequeno: 92%; Normal: 100%; Grande: 115%. */ html.app-fonte-pequena body { zoom: 0.92; } html.app-fonte-grande body { zoom: 1.15; } /* Links herdam a cor do texto · teal fica reservado para elementos de marca/ação. * Cor em letra (verde ou vermelha) carrega carga semântica de status (positivo/negativo) * e confunde com badges de confirmação/erro. */ a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; } /* Icon default · qualquer SVG sem tamanho específico renderiza pequeno */ svg { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; } /* ========== APP SHELL ========== */ .app { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: var(--topbar-height) auto 1fr; height: 100vh; } /* Onda 2 . banner billing entre topbar e sidebar/main . ocupa as 2 colunas * e fica na linha 2 do grid. Quando vazio, "auto" colapsa pra 0px e nao * atrapalha o resto do layout. */ #billing-banner-host { grid-column: 1 / -1; grid-row: 2; } /* ========== TOPBAR ========== */ /* Topbar inteira recebe o gradiente da marca da clinica. * Antes so a faixa esquerda (.brand) era colorida e o resto ficava branco, * o que deixava a busca global "invisivel" e a marca incompleta. */ .topbar { grid-column: 1 / -1; display: flex; align-items: center; padding: 0; background: var(--brand-gradient); border-bottom: 1px solid rgba(0,0,0,0.08); z-index: 10; } /* Brand area: toda a faixa esquerda do topbar É o logo. * Gradiente oficial da marca + Montserrat branco. */ .brand-wrap { position: relative; flex-shrink: 0; z-index: 15; } .brand { width: var(--sidebar-width); height: var(--topbar-height); display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 0 12px 0 20px; flex-shrink: 0; background: transparent; color: white; position: relative; box-shadow: inset -1px 0 0 rgba(255,255,255,0.18); cursor: pointer; text-align: left; border: none; font-family: inherit; transition: background 0.15s; } .brand::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top left, rgba(255,255,255,0.10) 0%, transparent 65%); pointer-events: none; } .brand:hover { background: rgba(255,255,255,0.06); } /* Logo mini da BU (32x32) no canto do topbar */ .brand-logo-mini { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; position: relative; z-index: 2; } .brand-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; position: relative; z-index: 1; overflow: hidden; } .brand-info .brand-name, .brand-info .brand-tagline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .brand-chev { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); position: relative; z-index: 2; flex-shrink: 0; transition: all 0.15s; } .brand-chev svg { width: 14px; height: 14px; } .brand:hover .brand-chev { background: rgba(255,255,255,0.22); color: white; } /* Badge "DEMO" usado em BUs fictícias (no topbar fica branca translúcida) */ .bu-badge { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); color: white; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; margin-left: 4px; vertical-align: middle; flex-shrink: 0; } /* Quando usada no dropdown ou página de gestão (fundo claro) · versão colorida */ .bu-dropdown .bu-badge, .bu-grid .bu-badge { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid #FDE68A; } /* Dropdown do switcher de BU · posicionado abaixo do topbar, sempre acima do conteúdo */ .bu-dropdown { position: fixed; left: 12px; right: auto; top: calc(var(--topbar-height) - 2px); min-width: 320px; max-width: 380px; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 12px 28px rgba(17, 24, 39, 0.18); padding: 6px 0; z-index: 2000; } .bu-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; } .bu-item:hover { background: var(--color-bg-subtle); } .bu-item-logo { width: 34px; height: 34px; border-radius: 6px; background: var(--color-bg-subtle); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; color: var(--color-text-secondary); border: 1px solid var(--color-border); } .bu-item-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: white; } .bu-item-current { background: var(--color-primary-subtle); } .bu-item-current:hover { background: var(--color-primary-subtle); } .text-success { color: var(--color-success); } /* Grid de cards de BU na página de gestão */ .bu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; } .bu-card { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: all 0.12s ease-out; } .bu-card-current { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); } .bu-card-header { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-subtle); } .bu-card-logo { width: 44px; height: 44px; background: white; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border: 1px solid var(--color-border); color: var(--color-text-secondary); } .bu-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .bu-card-body { padding: 14px 16px; } .bu-card-footer { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--color-border); background: white; justify-content: flex-end; } .brand::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top left, rgba(255,255,255,0.10) 0%, transparent 65%); pointer-events: none; } .brand:hover { text-decoration: none; } .brand-name { font-family: 'Montserrat', 'Inter', sans-serif; font-size: 15px; font-weight: 400; color: white; letter-spacing: 0.1px; line-height: 1.1; white-space: nowrap; position: relative; z-index: 1; } .brand-tagline { font-family: 'Montserrat', 'Inter', sans-serif; font-size: 11px; font-weight: 300; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.2px; line-height: 1.1; white-space: nowrap; position: relative; z-index: 1; } /* Resto do topbar tem seu próprio padding interno */ .topbar > .global-search-wrap { margin-left: 20px; flex: 1; } .topbar > .topbar-actions { margin-right: 20px; margin-left: auto; } /* Busca global na topbar . input direto (sem modal duplo). * Anna 2026-04-28: clicar abria outra barra. Agora digita aqui mesmo * e o dropdown aparece ancorado embaixo. */ .global-search-wrap { position: relative; flex: 1; max-width: 520px; margin-left: 20px; display: flex; align-items: center; } .global-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.7); pointer-events: none; display: flex; } .global-search-icon svg { width: 16px; height: 16px; } .global-search-input { width: 100%; padding: 8px 14px 8px 36px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.32); border-radius: var(--radius-md); color: #fff; font-size: 13px; font-family: inherit; outline: none; transition: background 0.15s, border-color 0.15s; } .global-search-input::placeholder { color: rgba(255, 255, 255, 0.85); } .global-search-input:hover { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.42); } .global-search-input:focus { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.55); } .busca-global-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); max-height: 60vh; overflow-y: auto; z-index: 50; padding: 6px 0; } .busca-global-dropdown.hidden { display: none; } .topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .icon-btn { width: 36px; height: 36px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-secondary); position: relative; transition: background 0.15s; } .icon-btn:hover { background: var(--color-bg-subtle); } .icon-btn svg { width: 18px; height: 18px; } .icon-btn-dialer { color: var(--color-success); } .icon-btn-dialer:hover { background: var(--color-success-bg); color: var(--color-success); } /* Topbar agora usa o gradiente da marca: icones e textos viram branco */ .topbar .icon-btn { color: rgba(255,255,255,0.92); } .topbar .icon-btn:hover { background: rgba(255,255,255,0.16); color: #fff; } .topbar .icon-btn-dialer { color: rgba(255,255,255,0.92); } .topbar .icon-btn-dialer:hover { background: rgba(255,255,255,0.16); color: #fff; } /* Logo Meet dentro de botões de texto */ .btn-meet-logo { display: inline-flex; align-items: center; margin-right: 4px; } .btn-meet-logo .meet-logo-img { width: 22px; height: 22px; } .cal-legend-meet { display: inline-flex; align-items: center; margin-left: 4px; } .cal-legend-meet .meet-logo-img { width: 18px; height: 18px; } /* Reordenar menu lateral */ .nav-reorder-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-top: 8px; border-radius: var(--radius-md); color: var(--color-text-muted); font-size: 12px; font-weight: 500; cursor: pointer; background: transparent; border: 1px dashed var(--color-border); width: 100%; transition: all 0.12s; } .nav-reorder-toggle:hover { background: var(--color-bg-subtle); color: var(--color-text); border-color: var(--color-border-strong); } .nav-reorder-toggle svg { width: 12px; height: 12px; } .nav-reorder-active .nav-reorder-toggle { background: var(--color-primary-subtle); color: var(--color-primary); border: 1px solid var(--color-primary); border-style: solid; } .nav-reorder-active .nav-item { cursor: grab; border: 1px dashed transparent; } .nav-reorder-active .nav-item:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); } .nav-grip { color: var(--color-text-muted); font-size: 14px; letter-spacing: -2px; margin-right: 2px; cursor: grab; } .nav-item.nav-dragging { opacity: 0.4; cursor: grabbing; } .nav-reorder-active .nav-item { position: relative; } /* Linha azul indicando onde o item será inserido */ .nav-item.nav-drop-before::before, .nav-item.nav-drop-after::after { content: ''; position: absolute; left: 4px; right: 4px; height: 3px; background: var(--color-primary); border-radius: 2px; box-shadow: 0 0 0 3px var(--color-primary-subtle); z-index: 10; } .nav-item.nav-drop-before::before { top: -2px; } .nav-item.nav-drop-after::after { bottom: -2px; } .badge-dot { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--color-danger); border: 2px solid var(--color-surface); color: #fff; font-size: 10px; font-weight: 700; line-height: 12px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; white-space: nowrap; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-gradient); color: white; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; } /* ========== SIDEBAR ========== */ .sidebar { grid-row: 3; grid-column: 1; background: var(--color-surface); border-right: 1px solid var(--color-border); overflow-y: auto; padding: 12px 0; min-height: 0; transition: width 0.18s ease; } /* Modo recolhido . so icones, ~64px de largura. Anna 2026-04-28 (item 9). * Aplicado como classe no pra cascatear no grid e no .brand. */ html.sidebar-colapsada { --sidebar-width: 64px; } html.sidebar-colapsada .nav-item-label { display: none; } html.sidebar-colapsada .nav-item { justify-content: center; padding: 10px 0; } html.sidebar-colapsada .nav-grip { display: none; } html.sidebar-colapsada .sidebar-toggle-label { display: none; } html.sidebar-colapsada .sidebar-toggle { justify-content: center; padding: 8px 0; } html.sidebar-colapsada .nav-reorder-toggle { justify-content: center; padding: 8px 0; } html.sidebar-colapsada .nav-reorder-toggle svg { margin: 0; } html.sidebar-colapsada .brand-info { display: none; } html.sidebar-colapsada .brand-chev { display: none; } html.sidebar-colapsada .brand { padding: 0; justify-content: center; } html.sidebar-colapsada .nav-group-title { display: none; } .sidebar-toggle { display: flex; align-items: center; gap: 8px; margin: 0 8px 8px; padding: 6px 10px; border-radius: var(--radius-md); background: transparent; border: 1px dashed var(--color-border); color: var(--color-text-muted); font-size: 11px; font-weight: 500; cursor: pointer; width: calc(100% - 16px); font-family: inherit; transition: all 0.12s; } .sidebar-toggle:hover { background: var(--color-bg-subtle); color: var(--color-text); border-color: var(--color-border-strong); } .sidebar-toggle svg { width: 14px; height: 14px; } .nav-group { padding: 0 8px 12px; } .nav-group-title { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-text-muted); } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; font-size: 13.5px; font-weight: 500; transition: all 0.12s; } .nav-item:hover { background: var(--color-bg-subtle); color: var(--color-text); } .nav-item.active { background: var(--color-primary-subtle); color: var(--color-text); font-weight: 600; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--color-primary); border-radius: 0 2px 2px 0; } .nav-item { position: relative; } .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; } .nav-item .count { margin-left: auto; font-size: 11px; color: var(--color-text-muted); background: var(--color-bg-muted); padding: 1px 8px; border-radius: 10px; font-weight: 600; } /* ========== MAIN CONTENT ========== */ .main { grid-row: 3; grid-column: 2; overflow-y: auto; background: var(--color-bg); min-height: 0; } .subnav { background: var(--color-surface); border-bottom: 1px solid var(--color-border); height: var(--subnav-height); display: flex; align-items: center; padding: 0 24px; gap: 4px; overflow-x: auto; } .subnav-tab { padding: 8px 14px; border-radius: var(--radius-md); color: var(--color-text-secondary); font-weight: 500; font-size: 13.5px; cursor: pointer; white-space: nowrap; } .subnav-tab:hover { background: var(--color-bg-subtle); } .subnav-tab.active { color: var(--color-text); background: var(--color-primary-subtle); font-weight: 600; } .page { padding: 28px 32px; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } /* Cada filho direto da página já ganha espaçamento automático via gap · sem margin-bottom conflitantes */ .page > * { margin: 0; } .page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .page-title { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; color: var(--color-text); } .page-subtitle { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; } .breadcrumbs { font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; } .breadcrumbs a { color: var(--color-text-muted); } /* ========== BUTTONS ========== */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; border: 1px solid transparent; transition: all 0.15s; white-space: nowrap; } .btn-primary { background: var(--color-primary); color: white; } .btn-primary:hover { background: var(--color-primary-hover); } .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); } .btn-secondary:hover { background: var(--color-bg-subtle); } .btn-ghost { color: var(--color-text-secondary); } .btn-ghost:hover { background: var(--color-bg-subtle); color: var(--color-text); } .btn-sm { padding: 6px 10px; font-size: 12px; } .btn svg { width: 14px; height: 14px; } /* ========== CARDS ========== */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--color-border); } .card-title { font-size: 13px; font-weight: 600; letter-spacing: -0.1px; color: var(--color-text); } .card-body { padding: 18px; } /* ========== KPI GRID ========== */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px 20px; position: relative; } /* Semáforo · indicado apenas pela barra de progresso (sem faixa lateral) */ .kpi-card-success, .kpi-card-warning, .kpi-card-danger { border-left: 1px solid var(--color-border); } .kpi-meta { margin-top: 10px; } .kpi-bar { width: 100%; height: 6px; background: var(--color-bg-muted); border-radius: 3px; overflow: hidden; } .kpi-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease-out; } .kpi-bar-success { background: var(--color-success); } .kpi-bar-warning { background: var(--color-warning); } .kpi-bar-danger { background: var(--color-danger); } .kpi-meta-label { font-size: 10.5px; color: var(--color-text-muted); margin-top: 5px; font-weight: 500; } /* Velocímetro · gauge semicircular */ .velocimetros-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .velocimetro { display: flex; flex-direction: column; align-items: center; padding: 10px 14px; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .velocimetro-svg { width: 100%; max-width: 220px; height: auto; } .velocimetro-footer { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-top: 8px; border-top: 1px solid var(--color-border); margin-top: 4px; } .velocimetro-label { font-size: 12.5px; font-weight: 600; color: var(--color-text); } .velocimetro-pct { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } .kpi-label { font-size: 12px; color: var(--color-text-muted); font-weight: 500; } .kpi-value { font-size: 26px; font-weight: 600; color: var(--color-text); margin-top: 6px; letter-spacing: -0.6px; } .kpi-detalhe { font-size: 11px; color: #64748B; margin-top: 4px; font-weight: 400; line-height: 1.4; } /* ========== LAYOUT HELPERS ========== */ .row { display: flex; gap: 16px; } .col { flex: 1; min-width: 0; } .stack { display: flex; flex-direction: column; gap: 16px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* Secao destacada dentro de modal de formulario (ex: "Dados clinicos") */ .form-group-secao { margin-top: 16px; padding-top: 16px; border-top: 1px solid #E5E7EB; } .form-group-secao-titulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #475569; margin-bottom: 4px; } /* Linha de checkboxes (ex: habitos de saude) */ .checkbox-row { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; } .checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); cursor: pointer; user-select: none; } .checkbox-item input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent, #185FA5); } .grid-sidebar { display: grid; grid-template-columns: 1fr 320px; gap: 16px; } @media (max-width: 1100px) { .grid-sidebar { grid-template-columns: 1fr; } } /* ========== TABLE ========== */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { text-align: left; padding: 10px 18px; background: transparent; color: var(--color-text-muted); font-weight: 500; font-size: 11.5px; letter-spacing: 0.2px; border-bottom: 1px solid var(--color-border); } .table td { padding: 12px 18px; border-bottom: 1px solid var(--color-border); color: var(--color-text); } .table tr:last-child td { border-bottom: none; } .table tr:hover td { background: var(--color-bg-subtle); } .table a { color: var(--color-text); font-weight: 500; } .table a:hover { text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; } /* Cabeçalho ordenável · */ .th-sort { cursor: pointer; user-select: none; transition: background 0.1s; } .th-sort:hover { background: var(--color-bg-subtle); } .th-sort-inner { display: inline-flex; align-items: center; gap: 6px; } .th-arrow { font-size: 10px; color: var(--color-text-muted); opacity: 0.5; transition: opacity 0.12s; } .th-sort:hover .th-arrow { opacity: 1; } .th-sort-active { color: var(--color-primary); } .th-sort-active .th-arrow { opacity: 1; color: var(--color-primary); } /* Botões dentro de tabela · preservam suas cores próprias (sobrescreve .table a) */ .table a.btn { text-decoration: none; font-weight: 600; } .table a.btn-primary, .table a.btn-primary:hover { color: white; } .table a.btn-secondary, .table a.btn-secondary:hover { color: var(--color-text); text-decoration: none; } .table a.btn-ghost, .table a.btn-ghost:hover { color: var(--color-text-secondary); text-decoration: none; } /* ========== BADGE / STATUS (enterprise pill com dot) ========== */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 4px; font-size: 11.5px; font-weight: 500; line-height: 1.4; background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); white-space: nowrap; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge-success { color: var(--color-success); } .badge-warning { color: var(--color-warning); } .badge-danger { color: var(--color-danger); } .badge-info { color: var(--color-info); } .badge-neutral { color: var(--color-text-muted); } .tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; background: var(--color-bg-subtle); color: var(--color-text-secondary); border: 1px solid var(--color-border); white-space: nowrap; } /* ========== ALERT ========== */ .alert { padding: 10px 14px; border-radius: var(--radius-md); display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; border: 1px solid; } .alert svg { width: 14px; height: 14px; margin-top: 2px; } .alert-danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: #FECACA; } .alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: #FDE68A; } .alert-info { background: var(--color-info-bg); color: var(--color-info); border-color: #BFDBFE; } .alert-title { font-weight: 600; margin-bottom: 1px; } /* ========== AGENDA · visão semana (grid 7 colunas × slots 30min) ========== */ .calendar-wrap { display: grid; grid-template-columns: 68px repeat(7, 1fr); border-top: 1px solid var(--color-border); background: white; } .cal-corner { background: var(--color-bg-subtle); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .cal-h { padding: 10px 8px; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); text-align: center; color: var(--color-text-secondary); } .cal-h:last-child { border-right: none; } .cal-h-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; } .cal-h-day { font-size: 18px; font-weight: 600; color: var(--color-text); margin-top: 2px; } .cal-h.today { background: var(--color-primary-subtle); } .cal-h.today .cal-h-day { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: white; } .cal-time { padding: 2px 8px 0; font-size: 10.5px; color: var(--color-text-muted); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); text-align: right; line-height: 1; } .cal-cell { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); min-height: 44px; position: relative; transition: background 0.12s ease-out; } .cal-cell:nth-child(8n) { border-right: none; } .cal-cell-free { cursor: pointer; } .cal-cell-free:hover { background: var(--color-primary-subtle); box-shadow: inset 0 0 0 1px var(--color-primary); } .cal-cell-free:hover::after { content: '+ Agendar'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--color-primary); letter-spacing: 0.2px; } .cal-event { position: absolute; left: 3px; right: 3px; border-radius: 4px; padding: 5px 8px; font-size: 11px; line-height: 1.3; cursor: pointer; border-left: 3px solid; overflow: hidden; z-index: 1; } .ev-consulta { background: #EEF4FC; border-color: #1E4A7C; color: var(--color-text); } .ev-retorno { background: #ECFDF5; border-color: #047857; color: var(--color-text); } .ev-urgente { background: #FEF2F2; border-color: #B91C1C; color: var(--color-text); font-weight: 600; } .ev-teleconsulta { background: #EFF6FF; border-color: #1D4ED8; color: var(--color-text); } .ev-bloqueio { background: #FAF5FF; border-color: #6B21A8; color: var(--color-text); font-style: italic; } .cal-event .ev-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-event .ev-meta { opacity: 0.7; font-size: 10px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-legend { display: flex; gap: 18px; padding: 12px 18px; font-size: 11px; color: var(--color-text-secondary); border-top: 1px solid var(--color-border); flex-wrap: wrap; } .cal-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } /* ========== AGENDA · visão dia (timeline vertical) ========== */ .day-timeline { display: flex; flex-direction: column; } .day-row { display: grid; grid-template-columns: 70px 1fr; border-bottom: 1px solid var(--color-border); min-height: 56px; } .day-row:last-child { border-bottom: none; } .day-time { padding: 12px 12px 0 18px; font-size: 11.5px; color: var(--color-text-muted); border-right: 1px solid var(--color-border); text-align: right; font-variant-numeric: tabular-nums; } .day-slot { padding: 8px 16px; cursor: pointer; border-left: 3px solid transparent; margin: 4px; border-radius: 6px; } .day-slot-free { color: var(--color-text-muted); font-size: 11.5px; font-style: italic; opacity: 0; transition: opacity 0.15s; padding: 12px 16px; margin: 0 4px; border-radius: 4px; } .day-row:hover .day-slot-free { opacity: 1; background: var(--color-bg-subtle); } .day-slot.ev-consulta, .day-slot.ev-retorno, .day-slot.ev-urgente, .day-slot.ev-teleconsulta, .day-slot.ev-bloqueio { padding: 10px 14px; } .day-slot-content { display: flex; align-items: center; gap: 12px; } .day-slot-main { flex: 1; min-width: 0; } .day-slot-title { font-weight: 600; font-size: 13px; color: var(--color-text); } .day-slot-meta { font-size: 11.5px; color: var(--color-text-secondary); margin-top: 2px; } /* ========== RECORD LAYOUT (Salesforce-style) ========== */ .record-header { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .record-top { display: flex; align-items: flex-start; gap: 16px; } .record-avatar { width: 56px; height: 56px; border-radius: 14px; background: var(--brand-gradient); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; flex-shrink: 0; } .record-name { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; } .record-sub { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; } .record-actions { margin-left: auto; display: flex; gap: 8px; } .highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); } .highlight-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-muted); font-weight: 600; } .highlight-value { font-size: 14px; font-weight: 600; margin-top: 2px; } .highlight-sub { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.3; } /* Segunda faixa · KPIs derivados (consultas, faltas, receita) */ .highlights-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--color-border); } .highlights-kpi .highlight-value { font-size: 18px; font-weight: 700; } /* ========== FIELD / FORM ========== */ .field-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); } .field-row:last-child { border-bottom: none; } .field-label { font-size: 12px; color: var(--color-text-muted); font-weight: 500; } .field-value { font-size: 13px; color: var(--color-text); } .form-group { margin-bottom: 14px; } .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 4px; } /* Padrao Salesforce · asterisco vermelho indicando campo obrigatorio */ .form-label-required::after { content: ' *'; color: #B91C1C; font-weight: 700; margin-left: 2px; } /* Barra de acao em lote · aparece quando ha pacientes selecionados */ .pac-selecao-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #EEF4FC; border: 1px solid #B8CDE3; border-radius: 6px; margin-bottom: 12px; font-size: 13px; color: #0B2A4A; font-weight: 500; } .pac-row-selected { background: #F0F9FF; } .pac-row-selected:hover { background: #E0F2FE; } .pac-row-check { width: 16px; height: 16px; cursor: pointer; accent-color: #0B2A4A; } #pac-header-check { width: 16px; height: 16px; cursor: pointer; accent-color: #0B2A4A; } /* Exames no modal de agendamento · lista dinamica */ .exame-add-row { display: flex; gap: 6px; align-items: center; } .exame-qtd-input { width: 70px; text-align: center; } .exames-lista { display: flex; flex-direction: column; gap: 6px; } .exame-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 13px; } .exame-qtd { font-weight: 600; color: #0B2A4A; min-width: 28px; font-variant-numeric: tabular-nums; } .exame-nome { flex: 1; color: var(--color-text); } .exame-remove { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: transparent; color: var(--color-text-muted); border-radius: 4px; cursor: pointer; } .exame-remove:hover { background: #FEE2E2; color: #B91C1C; } .exame-remove svg { width: 12px; height: 12px; } /* Wrapper que agrupa o item do exame + textarea de observacao */ .exame-item-com-obs { display: flex; flex-direction: column; gap: 0; border: 1px solid #E5E7EB; border-radius: 6px; overflow: hidden; background: #F9FAFB; } .exame-item-com-obs .exame-item { border: none; background: transparent; border-radius: 0; border-bottom: 1px solid #E5E7EB; } .exame-obs-input { border: none; border-radius: 0; background: #FFFFFF; padding: 8px 12px; font-size: 12px; resize: vertical; min-height: 44px; color: var(--color-text); } .exame-obs-input::placeholder { color: var(--color-text-muted); font-style: italic; } .exame-obs-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent); } /* Autocompleter CID-10 · reutilizavel em qualquer modal (prontuario, ficha etc) */ .cid-autocomplete-wrap { position: relative; } .cid-autocomplete-row { display: flex; align-items: stretch; gap: 6px; } .cid-autocomplete-row .form-input { flex: 1; } .cid-autocomplete-limpar { padding: 0 10px; color: var(--color-text-muted); } .cid-autocomplete-limpar:hover { color: #B91C1C; background: #FEE2E2; } .cid-autocomplete-dropdown { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 20; max-height: 280px; overflow-y: auto; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 8px 24px rgba(11, 42, 74, 0.12); } .cid-autocomplete-item { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; cursor: pointer; border-bottom: 1px solid #F1F5F9; font-size: 13px; color: var(--color-text); transition: background 0.1s; } .cid-autocomplete-item:last-child { border-bottom: none; } .cid-autocomplete-item:hover { background: #EEF4FC; } .cid-autocomplete-item strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; color: #1E4A7C; min-width: 56px; } .cid-autocomplete-item-desc { color: var(--color-text); flex: 1; } /* Label com checkbox inline · padrao do modal de agendamento */ .form-label-checkbox { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; color: var(--color-text); cursor: pointer; user-select: none; } .form-label-checkbox input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; } /* Preview do que esta prestes a ser adicionado · nome completo visivel */ .exame-preview { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; background: #EEF4FC; border: 1px solid #B8CDE3; border-radius: 6px; font-size: 12px; } .exame-preview-label { color: var(--color-text-muted); font-weight: 500; flex-shrink: 0; } .exame-preview-texto { color: #0B2A4A; font-weight: 600; font-size: 13px; } /* Detalhes (exames + autorizacao) dentro do modal de acoes do evento */ .acoes-evento-detalhes { padding: 12px 14px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; } .acoes-evento-secao { display: flex; flex-direction: column; gap: 6px; } .acoes-evento-label { font-size: 10px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .acoes-evento-valor { font-size: 13px; color: var(--color-text); font-variant-numeric: tabular-nums; } .acoes-evento-exames { display: flex; flex-direction: column; gap: 4px; } .acoes-evento-exame-item { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--color-text); line-height: 1.4; } .acoes-evento-exame-qtd { font-weight: 600; color: #0B2A4A; font-variant-numeric: tabular-nums; min-width: 28px; } /* Chip de alergia · vermelho sutil, nao carnavalesco */ .chip-alergia { display: inline-block; padding: 2px 8px; background: #FEF2F2; color: #991B1B; border: 1px solid #FCA5A5; border-radius: 10px; font-size: 11px; font-weight: 500; line-height: 1.4; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .form-input, .form-select, .form-textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: white; color: #0B2A4A; /* fix · sem cor explicita herdava branco em alguns contextos (modal, tema) e ficava invisivel */ outline: none; transition: all 0.15s; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 74, 124, 0.18); } .form-textarea { min-height: 72px; resize: vertical; } /* Select: chevron customizado em SVG (substitui a setinha nativa low-res) */ .form-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; padding-right: 36px; cursor: pointer; } /* Date/Time inputs · ícone SVG crisp à esquerda + chevron à direita. * Remove o picker indicator nativo (baixa qualidade) e cobre a área com uma * camada invisível clicável para manter a funcionalidade de abrir o picker. */ .form-input[type="date"], .form-input[type="time"], input[type="date"].form-input, input[type="time"].form-input { position: relative; cursor: pointer; padding-left: 38px; padding-right: 34px; background-repeat: no-repeat, no-repeat; background-position: 12px center, right 12px center; background-size: 16px 16px, 12px 12px; } .form-input[type="date"], input[type="date"].form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4A7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } .form-input[type="time"], input[type="time"].form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4A7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* Esconde o ícone nativo do picker (baixa qualidade) mas preserva click */ .form-input[type="date"]::-webkit-calendar-picker-indicator, .form-input[type="time"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; } /* Remove spin buttons */ input[type="date"]::-webkit-inner-spin-button, input[type="time"]::-webkit-inner-spin-button { display: none; } /* Hover reforça affordance */ .form-input[type="date"]:hover, .form-input[type="time"]:hover, input[type="date"].form-input:hover, input[type="time"].form-input:hover { border-color: var(--color-primary); background-color: var(--color-primary-subtle); } /* Pill de tipo do agendamento · destaque especial para Encaixe */ .tipo-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px; } .tipo-pill svg { width: 12px; height: 12px; } .tipo-pill-urgent { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid rgba(185, 28, 28, 0.25); } /* Linha da tabela destacada quando for agendamento de encaixe */ .table tr.row-urgent { background: rgba(254, 226, 226, 0.35); } .table tr.row-urgent:hover { background: rgba(254, 226, 226, 0.6); } .table tr.row-urgent td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); } /* Opção de canal no modal de reenvio de receita */ .canal-option { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; transition: all 0.12s ease-out; min-width: 0; background: white; } .canal-option:hover { border-color: var(--color-primary); } .canal-option input[type="checkbox"] { margin: 0; cursor: pointer; flex-shrink: 0; } .canal-option > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-text); } .canal-option > span svg { width: 14px; height: 14px; } .canal-option small { font-size: 11px; color: var(--color-text-secondary); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .canal-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-subtle); } /* Seleção de método de pagamento · grid de opções no modal de transação */ .metodo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .metodo-option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; transition: all 0.12s ease-out; background: white; } .metodo-option:hover { border-color: var(--color-primary); } .metodo-option input[type="radio"] { margin: 0; flex-shrink: 0; } .metodo-option .metodo-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: var(--color-bg-subtle); color: var(--color-text-secondary); flex-shrink: 0; } .metodo-option .metodo-icon svg { width: 15px; height: 15px; } .metodo-option .metodo-label { font-size: 13px; font-weight: 500; color: var(--color-text); } .metodo-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-subtle); } .metodo-option:has(input:checked) .metodo-icon { background: var(--color-primary); color: white; } /* Chip do Google Meet · usado em linhas de agenda com videoconsulta */ .meet-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 600; background: white; border: 1px solid var(--color-border); color: var(--color-text); margin-left: 6px; vertical-align: middle; } .meet-chip svg { width: 18px; height: 18px; flex-shrink: 0; } .meet-logo-img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; display: inline-block; vertical-align: middle; } /* Cronometro de consulta · chip flutuante minimalista no canto inferior direito. Sobrio, consultoria · nao compete visualmente com o prontuario */ .consulta-timer { position: fixed; /* Anna 2026-05-02 . cronometro local subiu pra nao sobrepor com FABs. * Bottom 84px (acima do chat interno de 54px + 10 gap) pra evitar * conflito com Neumann Chat (right:90px) e Chat interno (right:20px). */ bottom: 84px; right: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255, 255, 255, 0.96); border: 1px solid #E2E8F0; border-radius: 100px; box-shadow: 0 4px 14px rgba(11, 42, 74, 0.08); z-index: 60; backdrop-filter: blur(8px); transition: opacity 0.2s, transform 0.2s; } .consulta-timer.timer-paused { border-color: #FDE68A; background: rgba(255, 251, 235, 0.96); } .timer-indicator { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; flex-shrink: 0; animation: timer-pulse 1.6s ease-in-out infinite; } .consulta-timer.timer-paused .timer-indicator { background: #D97706; animation: none; } .timer-pulse { display: none; } /* fallback · nao usamos mais o span interno */ @keyframes timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .timer-info { display: inline-flex; align-items: baseline; gap: 6px; } .timer-label { font-size: 10px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: #64748B; } .timer-time { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; font-weight: 600; color: #0B2A4A; letter-spacing: 0.3px; font-variant-numeric: tabular-nums; } .timer-controls { display: inline-flex; gap: 2px; margin-left: 4px; padding-left: 8px; border-left: 1px solid #E5E7EB; } .timer-controls .btn { padding: 2px 6px; font-size: 10px; color: #64748B; background: transparent; border: none; } .timer-controls .btn:hover { color: #0B2A4A; background: #F1F5F9; } .timer-controls .btn svg { width: 10px; height: 10px; } /* Grid de valores padrão no Financeiro */ .valores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } /* Grid de metas em Configurações · semelhante, mas menor */ .metas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .valor-padrao .form-label { margin-bottom: 6px; display: block; } .input-prefixed { position: relative; display: flex; align-items: center; } .input-prefixed .input-prefix { position: absolute; left: 12px; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); pointer-events: none; } .input-prefixed .form-input { padding-left: 38px; font-size: 15px; font-weight: 600; } /* Chip inline do Meet dentro de títulos de eventos */ .meet-chip-inline { display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; } .meet-chip-inline .meet-logo-img { width: 22px; height: 22px; } /* Botão Meet standalone (lista + dia) */ .meet-btn-standalone { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid #dce1e7; background: #fff; cursor: pointer; font-size: 12px; font-weight: 600; color: #1a73e8; transition: background 0.15s; } .meet-btn-standalone:hover { background: #f0f4ff; } .meet-btn-standalone .meet-logo-img { width: 20px; height: 20px; } /* Card do link Meet após criação */ .meet-link-card { background: linear-gradient(135deg,#e8f0fe 0%,#f0fdf4 100%); border: 1px solid #c5d9f9; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .meet-link-card .meet-logo-img { width: 48px; height: 48px; } .meet-link-url { font-size: 13px; color: #1a73e8; word-break: break-all; background: #fff; border: 1px solid #c5d9f9; border-radius: 8px; padding: 8px 12px; width: 100%; box-sizing: border-box; } /* ========== AGENDA LIST · redesign premium ========== */ .agenda-list { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .agenda-row { display: grid; grid-template-columns: 92px 1fr 160px 150px auto; align-items: center; gap: 0; padding: 0; border-bottom: 1px solid var(--color-border); /* Anna 2026-05-01 . barrinha lateral removida . tipo ja eh visivel * pelo chip ao lado da foto do paciente. Cor das linhas era ruido * visual. No modo semana a cor continua importante (eventos coloridos). */ transition: background 0.12s; position: relative; } .agenda-row:last-child { border-bottom: none; } .agenda-row:hover { background: var(--color-hover, rgba(0,0,0,0.02)); } .agenda-row-past { opacity: 0.45; } .agenda-row-now { background: rgba(30,74,124,0.04); } .agenda-row-gcal { border-left-color: #9ca3af; } /* Botoes de acao da IA . estilo consultoria sobrio. Anna 2026-05-02 */ .btn-ai-acao { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 500; border-radius: 6px; cursor: pointer; transition: all .15s; font-family: inherit; line-height: 1.2; } .btn-ai-acao-primary { background: #0B2A4A; color: white; border: 1px solid #0B2A4A; } .btn-ai-acao-primary:hover { background: #1E4A7C; border-color: #1E4A7C; } .btn-ai-acao-secondary { background: white; color: #0B2A4A; border: 1px solid #CBD5E1; } .btn-ai-acao-secondary:hover { background: #F8FAFC; border-color: #94A3B8; } /* Marca Neumann sutil no rodape do sidebar . Anna 2026-05-02 Sempre visivel mas discreta, opacity baixa, nao compete com o conteudo. */ .sidebar-marca-neumann { display: flex; align-items: center; gap: 8px; padding: 12px 14px; margin-top: auto; border-top: 1px solid rgba(11, 42, 74, 0.06); text-decoration: none; color: #64748B; opacity: 0.55; transition: opacity .2s; font-family: inherit; } .sidebar-marca-neumann:hover { opacity: 0.95; background: rgba(11, 42, 74, 0.03); } .marca-neumann-monograma { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; background: rgba(11, 42, 74, 0.04); border: 1px solid rgba(201, 169, 97, 0.4); border-radius: 5px; color: #0B2A4A; } .marca-neumann-texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .marca-neumann-label { font-size: 11px; font-weight: 600; color: #0B2A4A; } .marca-neumann-versao { font-size: 9px; color: #94A3B8; margin-top: 1px; } .sidebar-colapsada .marca-neumann-texto { display: none; } .sidebar-colapsada .sidebar-marca-neumann { justify-content: center; padding: 12px 8px; } /* Tour opt-in modal . cards numerados estilo TribeMD mas com paleta Neumann */ .tour-modal-overlay { position: fixed; inset: 0; background: rgba(11, 42, 74, 0.4); z-index: 2000; display: flex; align-items: center; justify-content: center; animation: tourFadeIn .2s ease-out; } /* Anna 2026-05-02 . spotlight . overlay sem background quando ha alvo * (os 4 retangulos cobrem tudo menos o alvo). */ .tour-modal-overlay-spotlight { background: transparent; display: block; } .tour-spotlight { position: fixed; background: rgba(11, 42, 74, 0.55); z-index: 2000; pointer-events: none; animation: tourFadeIn .15s ease-out; } .tour-spotlight-ring { position: fixed; z-index: 2001; pointer-events: none; border: 2px solid #C9A961; border-radius: 8px; box-shadow: 0 0 0 4px rgba(201,169,97,0.18), 0 0 22px rgba(201,169,97,0.55); animation: tourRingPulse 2s ease-in-out infinite; } @keyframes tourRingPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(201,169,97,0.18), 0 0 22px rgba(201,169,97,0.55); } 50% { box-shadow: 0 0 0 8px rgba(201,169,97,0.10), 0 0 32px rgba(201,169,97,0.75); } } .tour-modal-overlay-spotlight .tour-card { z-index: 2002; box-shadow: 0 12px 36px rgba(11, 42, 74, 0.45); } @keyframes tourFadeIn { from { opacity: 0 } to { opacity: 1 } } .tour-card { background: white; border-radius: 12px; padding: 28px; width: 440px; max-width: 92vw; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(11, 42, 74, 0.22); animation: tourSlideUp .2s ease-out; } @keyframes tourSlideUp { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } .tour-step-num { font-size: 11px; color: #94A3B8; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .tour-titulo { font-size: 20px; font-weight: 600; color: #0B2A4A; margin: 0 0 12px; line-height: 1.3; } .tour-descricao { font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 18px; } .tour-botoes { display: flex; gap: 8px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid #E2E8F0; } .tour-progresso { flex: 1; font-size: 11px; color: #94A3B8; } .tour-btn { padding: 8px 16px; font-size: 13px; font-weight: 500; border-radius: 6px; cursor: pointer; font-family: inherit; transition: all .15s; } .tour-btn-primary { background: #0B2A4A; color: white; border: 1px solid #0B2A4A; } .tour-btn-primary:hover { background: #1E4A7C; } .tour-btn-secondary { background: white; color: #475569; border: 1px solid #CBD5E1; } .tour-btn-secondary:hover { background: #F8FAFC; } .tour-btn-ghost { background: transparent; color: #64748B; border: none; } .tour-btn-ghost:hover { color: #0B2A4A; } /* Sinapses badge . Anna 2026-05-02 */ .sinapses-badge { line-height: 1; } /* Calculadora Neumann . Anna 2026-05-02 . estilo consultoria sobrio sem badges coloridos por especialidade. Tipografia limpa. */ .calc-secao { margin-bottom: 28px; } .calc-secao-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #64748B; font-weight: 600; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #E2E8F0; } .calc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } /* Anna 2026-05-02 . provedores de assinatura digital com selo de gratis. * Diferencial vs Memed: destacar o que é GRATIS (Vidaas via CFM e gov.br) * antes dos pagos. */ .assinatura-provider { display: flex; align-items: stretch; gap: 0; background: white; border: 1px solid #E2E8F0; border-radius: 8px; overflow: hidden; transition: border-color .15s, box-shadow .15s; } .assinatura-provider:hover { border-color: #94A3B8; box-shadow: 0 2px 8px rgba(11,42,74,0.06); } .assinatura-provider-gratis { border-color: #86EFAC; background: #F0FDF4; } .assinatura-provider-gratis:hover { border-color: #16A34A; } .assinatura-provider-bloqueado { opacity: 0.7; background: #F8FAFC; } .assinatura-provider-bloqueado:hover { opacity: 1; } .assinatura-cadeado { font-size: 11px; opacity: 0.7; } .assinatura-provider-nome { font-size: 14px; font-weight: 600; color: #0B2A4A; line-height: 1.3; } .assinatura-provider-desc { font-size: 12px; color: #475569; line-height: 1.45; } .assinatura-selo-gratis { display: inline-block; padding: 2px 8px; border-radius: 4px; background: #16A34A; color: white; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } /* Anna 2026-05-02 . cards de protocolos clinicos. Diferente das * calculadoras (que rodam um calculo): aqui aplicamos um conjunto * (medicamentos + exames + orientacoes) ao prontuario aberto. */ .protocolo-secao { margin-bottom: 24px; } .protocolo-secao-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #64748B; font-weight: 600; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #E2E8F0; } .protocolo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .protocolo-card { border: 1px solid #E2E8F0; border-radius: 8px; padding: 14px 16px; background: white; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, box-shadow .15s; } .protocolo-card:hover { border-color: #94A3B8; box-shadow: 0 2px 8px rgba(11,42,74,0.06); } .protocolo-card-titulo { font-size: 14px; font-weight: 600; color: #0B2A4A; line-height: 1.3; } .protocolo-card-cid { font-size: 11px; color: #1E4A7C; font-family: ui-monospace, monospace; background: #EFF6FF; padding: 1px 6px; border-radius: 4px; align-self: flex-start; } .protocolo-card-desc { font-size: 12px; color: #475569; line-height: 1.4; } .protocolo-card-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: #64748B; margin-top: 2px; } .protocolo-card-meta span { background: #F1F5F9; padding: 2px 8px; border-radius: 10px; } .protocolo-card-meta span.protocolo-card-uso { background: #DCFCE7; color: #166534; font-weight: 600; } .protocolo-card-acoes { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .protocolo-bloco-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: #475569; font-weight: 600; margin-bottom: 8px; } .protocolo-bloco-lista { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: #0B2A4A; } .protocolo-bloco-lista li { line-height: 1.4; } /* Anna 2026-05-02 . cards de "Ultimas prescricoes" no topo da tela * de Receitas. Rolam horizontalmente. Click duplica em nova receita * (estilo Memed mas em 1 clique, nao 3). */ .rx-recentes-scroll { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; } .rx-recentes-scroll::-webkit-scrollbar { height: 6px; } .rx-recentes-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; } .rx-card-recente { flex-shrink: 0; width: 220px; background: white; border: 1px solid #E2E8F0; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; cursor: pointer; font-family: inherit; text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; } .rx-card-recente:hover { border-color: #0B2A4A; box-shadow: 0 3px 10px rgba(11,42,74,0.10); transform: translateY(-1px); } .rx-card-recente-data { font-size: 11px; color: #64748B; } .rx-card-recente-paciente { font-size: 13px; font-weight: 600; color: #0B2A4A; line-height: 1.2; } .rx-card-recente-meds { margin: 0; padding-left: 16px; font-size: 11px; color: #475569; line-height: 1.5; list-style: decimal; align-self: stretch; } .rx-card-recente-mais { color: #94A3B8; font-style: italic; list-style: none; margin-left: -16px; } .rx-card-recente-cta { margin-top: 4px; font-size: 11px; color: #1E4A7C; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .rx-card-recente:hover .rx-card-recente-cta { color: #0B2A4A; } /* Anna 2026-05-02 . cards de relatorios de pacientes (modal) */ .rel-pac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .rel-pac-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; background: white; border: 1px solid #E2E8F0; border-radius: 8px; cursor: pointer; text-align: left; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .rel-pac-card:hover { border-color: #0B2A4A; box-shadow: 0 2px 8px rgba(11,42,74,0.08); } .rel-pac-card-icone { width: 32px; height: 32px; border-radius: 6px; background: #EFF6FF; color: #0B2A4A; display: inline-flex; align-items: center; justify-content: center; } .rel-pac-card-titulo { font-size: 14px; font-weight: 600; color: #0B2A4A; line-height: 1.3; } .rel-pac-card-desc { font-size: 12px; color: #475569; line-height: 1.4; } .calc-card { border: 1px solid #E2E8F0; border-radius: 8px; padding: 14px 16px; background: white; transition: border-color .15s, box-shadow .15s; display: flex; flex-direction: column; gap: 8px; } .calc-card:hover { border-color: #94A3B8; box-shadow: 0 2px 8px rgba(11,42,74,0.06); } .calc-card-head { display: flex; align-items: flex-start; gap: 8px; } .calc-card-titulo { font-size: 14px; font-weight: 600; color: #0B2A4A; line-height: 1.3; } .calc-card-sigla { font-size: 11px; color: #94A3B8; margin-top: 2px; font-family: ui-monospace, "SF Mono", monospace; letter-spacing: 0.3px; } .calc-card-desc { font-size: 12px; color: #475569; line-height: 1.5; } .calc-fav-btn { background: transparent; border: none; cursor: pointer; color: #CBD5E1; padding: 4px; border-radius: 4px; transition: color .15s; display: inline-flex; align-items: center; justify-content: center; } .calc-fav-btn:hover { color: #64748B; } .calc-fav-btn.ativo { color: #C9A961; } .btn-calc-abrir { margin-top: 6px; padding: 8px 14px; background: white; color: #0B2A4A; border: 1px solid #CBD5E1; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit; transition: all .15s; align-self: flex-start; } .btn-calc-abrir:hover { background: #0B2A4A; color: white; border-color: #0B2A4A; } .calc-list-recentes { display: flex; gap: 8px; flex-wrap: wrap; } .calc-item-recente { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 6px; cursor: pointer; font-family: inherit; transition: all .15s; } .calc-item-recente:hover { background: white; border-color: #94A3B8; } .calc-item-recente-sigla { font-size: 11px; color: #64748B; font-weight: 500; } .calc-item-recente-nome { font-size: 13px; color: #0B2A4A; font-weight: 600; } .calc-item-recente-resultado { font-size: 13px; color: #0B2A4A; font-weight: 600; font-family: ui-monospace, monospace; } .calc-aviso-legal { margin-top: 30px; padding: 14px 16px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 6px; font-size: 11px; color: #64748B; line-height: 1.6; } /* Modal de execucao */ .calc-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 720px) { .calc-modal-grid { grid-template-columns: 1fr; } } .calc-modal-desc { font-size: 13px; color: #475569; line-height: 1.6; margin-bottom: 14px; } .calc-aviso { padding: 10px 12px; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 6px; font-size: 12px; color: #92400E; margin-bottom: 14px; line-height: 1.5; } .calc-paciente-pill { display: inline-block; padding: 4px 10px; background: #EEF4FC; color: #1E4A7C; border-radius: 12px; font-size: 11px; margin-bottom: 10px; } .calc-params { display: flex; flex-direction: column; gap: 10px; } .calc-param-label { font-size: 12px; color: #475569; font-weight: 500; display: block; margin-bottom: 4px; } .calc-param-bool { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #E2E8F0; border-radius: 6px; cursor: pointer; font-size: 13px; color: #0B2A4A; transition: background .1s; } .calc-param-bool:hover { background: #F8FAFC; } .calc-param-bool input { margin: 0; cursor: pointer; } .calc-resultado-card { padding: 18px 20px; border-radius: 8px; border: 1.5px solid; text-align: center; min-height: 110px; display: flex; flex-direction: column; justify-content: center; } .calc-resultado-valor { font-size: 36px; font-weight: 700; line-height: 1; font-family: ui-monospace, "SF Mono", monospace; letter-spacing: -1px; } .calc-resultado-unidade { font-size: 14px; opacity: 0.7; font-weight: 500; margin-left: 4px; font-family: ui-monospace, monospace; letter-spacing: 0; } .calc-resultado-interp { font-size: 13px; font-weight: 600; margin-top: 8px; } .calc-resultado-conduta { font-size: 12px; color: #475569; line-height: 1.5; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,0.05); } .calc-resultado-pendente { color: #94A3B8; font-size: 12px; font-style: italic; } .calc-formula, .calc-ref { margin-top: 14px; } .calc-formula-titulo, .calc-ref-titulo { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #94A3B8; font-weight: 600; margin-bottom: 4px; } .calc-formula-corpo { font-family: ui-monospace, "SF Mono", monospace; font-size: 12px; color: #0B2A4A; padding: 8px 10px; background: #F8FAFC; border-radius: 4px; } .calc-ref-texto { font-size: 11px; color: #475569; line-height: 1.5; } .calc-ref-link { display: inline-block; margin-top: 4px; font-size: 11px; color: #1E4A7C; text-decoration: underline; } /* Cronometro no topbar . Anna 2026-05-02 */ .cronometro-topbar { white-space: nowrap; } /* FAB IA Neumann . animacoes "magicas" */ @keyframes aiFabGlow { 0%, 100% { box-shadow: 0 6px 20px rgba(11,42,74,0.35), 0 0 0 0 rgba(201,169,97,0.4); } 50% { box-shadow: 0 6px 22px rgba(11,42,74,0.40), 0 0 0 6px rgba(201,169,97,0.08); } } @keyframes aiSparkle1 { 0%, 100% { opacity: 0.85; transform: scale(1) rotate(0deg); } 50% { opacity: 1; transform: scale(1.25) rotate(15deg); } } @keyframes aiSparkle2 { 0%, 100% { opacity: 0.7; transform: scale(0.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(-15deg); } } /* Anna 2026-05-02 . destaque quando agenda foi aberta pela IA com filtro especifico (?destacar=ag1,ag2). Pulsa 3x e mantem fundo amarelo. */ .agenda-row-destaque { background: #FEF3C7 !important; border-left: 4px solid #F59E0B !important; opacity: 1 !important; scroll-margin-top: 80px; animation: ag-row-pulse 1.4s ease-out 3; } @keyframes ag-row-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); } 50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } } .agenda-row-time { padding: 0 12px 0 14px; font-size: 13px; font-weight: 700; color: var(--color-text); letter-spacing: -0.3px; white-space: nowrap; } .agenda-row-gcal .agenda-row-time { color: var(--color-muted); font-weight: 500; } .agenda-row-body { padding: 12px 12px 12px 14px; min-width: 0; } .agenda-row-person { display: flex; align-items: center; gap: 10px; min-width: 0; } .agenda-row-person svg { flex-shrink: 0; width: 18px; height: 18px; color: #9ca3af; } .agenda-row-name { font-weight: 600; font-size: 14px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agenda-row-sub { font-size: 11px; color: var(--color-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agenda-row-gcal .agenda-row-name { font-weight: 500; color: var(--color-muted); } /* Coluna Tipo + Plataforma */ .agenda-row-tipo { padding: 0 8px; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .tipo-chip { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; letter-spacing: 0.1px; } .tipo-tele { background: #eff6ff; color: #1d4ed8; } .tipo-consulta { background: #f0fdf4; color: #15803d; } .tipo-retorno { background: #fffbeb; color: #92400e; } .tipo-encaixe { background: #fff1f2; color: #be123c; } .tipo-primeira { background: #f5f3ff; color: #6d28d9; } .tipo-gcal { background: #f3f4f6; color: #6b7280; } .meet-chip-btn { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; opacity: 0.85; transition: opacity 0.15s; } .meet-chip-btn:hover { opacity: 1; } .meet-chip-btn .meet-logo-img { width: 20px; height: 20px; } .agenda-row-status { padding: 0 8px; min-width: 0; overflow: hidden; } .status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--color-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; flex-wrap: wrap; } .status-tempo { white-space: normal; word-break: break-word; } .status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sdot, #94a3b8); flex-shrink: 0; } .status-pill-green::before { --sdot: #22c55e; } .status-pill-yellow::before { --sdot: #f59e0b; } .status-pill-blue::before { --sdot: #3b82f6; } .status-pill-gray::before { --sdot: #94a3b8; } .agenda-row-actions { display: flex; align-items: center; gap: 6px; padding: 0 14px 0 0; white-space: nowrap; } /* Linha "AGORA" · separador visual entre passado e presente */ .agenda-now-line { display: flex; align-items: center; gap: 8px; padding: 4px 14px; background: #fff5f5; border-bottom: 1px solid #fecaca; border-left: 3px solid #ef4444; } .agenda-now-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; flex-shrink: 0; } .agenda-now-label { font-size: 11px; font-weight: 700; color: #ef4444; letter-spacing: 0.5px; text-transform: uppercase; } .agenda-now-time { font-size: 11px; color: #ef4444; opacity: 0.7; } /* ========== fim agenda list ========== */ /* Modelos de relatório · grid de cards clicáveis */ .relatorio-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .relatorio-modelo { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: white; text-align: left; cursor: pointer; transition: all 0.12s ease-out; } .relatorio-modelo:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); } .relatorio-modelo-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--color-primary-subtle); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .relatorio-modelo-icon svg { width: 18px; height: 18px; } .relatorio-modelo-body { min-width: 0; } .relatorio-modelo-nome { font-size: 13.5px; font-weight: 600; color: var(--color-text); } .relatorio-modelo-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; line-height: 1.4; } /* Modal de encerrar consulta · salvar ou descartar */ .encerrar-consulta { } .encerrar-header { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--color-primary-subtle); border-radius: var(--radius-md); margin-bottom: 16px; } .encerrar-icon { width: 44px; height: 44px; background: var(--color-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .encerrar-icon svg { width: 20px; height: 20px; } .encerrar-duracao { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 24px; font-weight: 600; color: var(--color-text); letter-spacing: 0.5px; margin: 2px 0; } .encerrar-opcoes { display: grid; gap: 10px; } .encerrar-opcao { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: white; text-align: left; cursor: pointer; transition: all 0.12s ease-out; } .encerrar-opcao:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .encerrar-opcao-salvar:hover { border-color: var(--color-success); } .encerrar-opcao-descartar:hover { border-color: var(--color-danger); } .opcao-icon { width: 36px; height: 36px; background: var(--color-bg-subtle); color: var(--color-text-secondary); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .encerrar-opcao-salvar:hover .opcao-icon { background: var(--color-success-bg); color: var(--color-success); } .opcao-icon-danger { background: var(--color-danger-bg); color: var(--color-danger); } /* Botão danger · usado em ações destrutivas (descartar/excluir) */ .btn-danger { background: var(--color-danger); color: white; } .btn-danger:hover { background: #7F1D1D; } .btn-danger:disabled, .btn-danger[disabled] { opacity: 0.45; cursor: not-allowed; } /* Botão de ícone destrutivo · usado em linhas de tabela para apagar */ .btn-icon-danger { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--color-danger); background: transparent; border: none; cursor: pointer; transition: all 0.12s ease-out; } .btn-icon-danger:hover { background: var(--color-danger-bg); color: #7F1D1D; } .btn-icon-danger svg { width: 16px; height: 16px; } /* Sub-formas do Pix · aparecem dentro do form de transação quando Pix é selecionado */ .forma-pix-wrap { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; margin-top: 8px; } .forma-pix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .forma-pix-option { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: white; border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; transition: all 0.12s ease-out; } .forma-pix-option:hover { border-color: var(--color-primary); } .forma-pix-option input { margin-top: 2px; flex-shrink: 0; } .forma-pix-label { font-size: 12.5px; font-weight: 600; color: var(--color-text); } .forma-pix-dica { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.3; } .forma-pix-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-subtle); } .metodo-chip-sub { color: var(--color-text-secondary); font-weight: 400; margin-left: 2px; } /* Top do formulário de usuário · foto + campos lado a lado */ .usr-form-top { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; margin-bottom: 12px; } .usr-form-foto { display: flex; flex-direction: column; align-items: center; gap: 8px; } .usr-form-campos { min-width: 0; } @media (max-width: 560px) { .usr-form-top { grid-template-columns: 1fr; justify-items: center; } } /* Chip do método · usado na tabela do financeiro */ .metodo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--color-bg-subtle); border: 1px solid var(--color-border); color: var(--color-text); white-space: nowrap; } .metodo-chip svg { width: 12px; height: 12px; opacity: 0.75; } /* ========== STEPPER (fluxo multi-etapa) ========== */ .stepper { display: flex; margin-bottom: 20px; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .stepper-step { flex: 1; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: white; cursor: pointer; font-size: 13px; color: var(--color-text-muted); transition: all 0.15s; position: relative; border: none; text-align: left; } .stepper-step:not(:last-child)::after { content: ''; position: absolute; right: -8px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 16px; height: 16px; background: white; border-top: 1px solid var(--color-border); border-right: 1px solid var(--color-border); z-index: 2; } .stepper-step:not(:last-child) { padding-right: 28px; } .stepper-step:not(:first-child) { padding-left: 28px; } .stepper-step.active { background: var(--color-primary-subtle); color: var(--color-text); } .stepper-step.active::after { background: var(--color-primary-subtle); } .stepper-step.completed { color: var(--color-text-secondary); } .stepper-num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-muted); color: var(--color-text-muted); font-weight: 600; font-size: 12.5px; flex-shrink: 0; } .stepper-step.active .stepper-num { background: var(--color-primary); color: white; } .stepper-step.completed .stepper-num { background: var(--color-success); color: white; } .stepper-label { font-weight: 500; } .stepper-step.active .stepper-label { font-weight: 600; } .stepper-sub { font-size: 10.5px; color: var(--color-text-muted); margin-top: 1px; } /* Navegação do fluxo (voltar / próximo) */ .step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 16px 20px; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); } /* Integração banner (banner genérico usado em várias telas) */ .integration-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--color-primary-subtle); border: 1px solid #BFDBFE; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 12.5px; } .integration-banner-logo { width: 72px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 4px; background: white; border-radius: 6px; border: 1px solid var(--color-border); } .mevo-logo-img { width: 100%; height: 100%; object-fit: contain; } /* Card de revisão (step 3) */ .review-group { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); } .review-group:last-child { border-bottom: none; } .review-label { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .review-value { font-size: 13px; color: var(--color-text); line-height: 1.5; white-space: pre-wrap; } /* ========== TIMELINE ========== */ .timeline-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); } .timeline-item:last-child { border-bottom: none; } .timeline-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-subtle); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .timeline-icon svg { width: 16px; height: 16px; } .timeline-body { flex: 1; min-width: 0; } .timeline-title { font-size: 13px; font-weight: 600; } .timeline-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; } .timeline-desc { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 4px; } /* ========== CHAT ========== */ .chat-shell { display: grid; grid-template-columns: 300px 1fr 300px; height: calc(100vh - var(--topbar-height) - var(--subnav-height) - 48px); background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .chat-list { border-right: 1px solid var(--color-border); overflow-y: auto; } .chat-thread { display: flex; flex-direction: column; } .chat-context { border-left: 1px solid var(--color-border); padding: 16px; overflow-y: auto; background: var(--color-bg-subtle); } .chat-conv-item { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--color-border); cursor: pointer; } .chat-conv-item:hover, .chat-conv-item.active { background: var(--color-bg-subtle); } .chat-conv-item.active { background: var(--color-primary-subtle); } .chat-conv-item .avatar-sm { width: 36px; height: 36px; border-radius: 50%; background: #25D366; color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; } .chat-conv-name { font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; } .chat-conv-preview { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .chat-header { padding: 14px 20px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 12px; } .chat-body { flex: 1; overflow-y: auto; padding: 20px; background: var(--color-bg-subtle); display: flex; flex-direction: column; gap: 8px; } .chat-composer { border-top: 1px solid var(--color-border); padding: 12px 16px; display: flex; gap: 8px; background: white; } .chat-composer input { flex: 1; padding: 9px 12px; border: 1px solid var(--color-border-strong); border-radius: 20px; outline: none; } .msg { max-width: 68%; padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.4; } .msg-patient { background: white; border: 1px solid var(--color-border); align-self: flex-start; border-bottom-left-radius: 4px; } .msg-bot { background: var(--color-primary-subtle); color: var(--color-text); align-self: flex-start; border-bottom-left-radius: 4px; } .msg-agent { background: var(--color-primary); color: white; align-self: flex-end; border-bottom-right-radius: 4px; } .msg-sys { background: #FFFBEB; color: var(--color-warning); align-self: center; font-size: 11px; font-style: italic; border-radius: 10px; padding: 4px 10px; } /* ========== JOURNEY / MARKETING ========== */ .journey-canvas { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; min-height: 400px; } .journey-flow { display: flex; flex-direction: column; gap: 8px; align-items: center; } .journey-node { background: white; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); padding: 12px 16px; display: flex; gap: 10px; align-items: center; min-width: 280px; } .journey-node.trigger { border-color: var(--color-primary); background: var(--color-primary-subtle); } .journey-node.action { border-color: var(--color-success); background: var(--color-success-bg); } .journey-node.wait { border-color: #F59E0B; background: #FFFBEB; } .journey-node.decision { border-color: #8B5CF6; background: #FAF5FF; } .journey-node-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: white; } .journey-arrow { color: var(--color-text-muted); font-size: 16px; } .journey-node-title { font-size: 13px; font-weight: 600; } .journey-node-desc { font-size: 11px; color: var(--color-text-muted); } /* ========== PRESCRIÇÃO ITEM ========== */ .prescricao-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: white; margin-bottom: 6px; } .prescricao-item:last-child { margin-bottom: 0; } /* Busca de medicamentos · input com dropdown de sugestões */ .medicamento-busca { position: relative; margin-bottom: 12px; } .med-sugestoes { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 10; max-height: 280px; overflow-y: auto; } .med-sugestoes.hidden { display: none; } .med-sugestao { display: block; width: 100%; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); background: white; cursor: pointer; transition: background 0.1s; } .med-sugestao:last-child { border-bottom: none; } .med-sugestao:hover { background: var(--color-primary-subtle); } .med-sugestao-vazio { padding: 12px; font-size: 12.5px; color: var(--color-text-secondary); text-align: center; } .med-sugestao-vazio a { color: var(--color-primary); font-weight: 600; } /* Tags nos itens do autocomplete de medicamento · tipo + tarja */ .med-sugestao-tag { display: inline-block; padding: 1px 6px; font-size: 10px; font-weight: 500; border-radius: 8px; margin-left: 4px; background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0; vertical-align: middle; letter-spacing: 0.2px; } /* ========== TOGGLE SWITCH ========== */ .toggle-switch { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--color-border-strong); border-radius: 22px; transition: background 0.15s; } .toggle-slider::before { content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .toggle-switch input:checked + .toggle-slider { background: var(--color-primary); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); } /* ========== RADIO GROUP ========== */ .radio-group { display: flex; gap: 16px; padding: 4px 0; } .radio-group label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; user-select: none; } .radio-group input[type="radio"] { accent-color: var(--color-primary); } /* ========== UPLOAD BOX ========== */ .upload-box { border: 2px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: 40px 20px; text-align: center; background: var(--color-bg-subtle); transition: all 0.15s; } .upload-box:hover { border-color: var(--color-primary); background: var(--color-primary-subtle); } /* ========== COPY FROM PANEL ========== */ .copy-from { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px; background: var(--color-bg-subtle); margin-bottom: 10px; } .copy-from-item { padding: 8px 10px; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; } .copy-from-item:last-child { margin-bottom: 0; } /* ========== MODAL ========== */ .modal-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45); display: none; align-items: flex-start; justify-content: center; padding-top: 10vh; z-index: 1000; animation: fadeIn 0.12s ease-out; } .modal-overlay.open { display: flex; } .modal { background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-lg); width: 620px; max-width: 92vw; max-height: 80vh; /* Anna 2026-05-01 . scroll APENAS no body, header e footer fixos. * Antes, modal inteiro era scrollavel . conteudo grande empurrava * o footer pra fora da tela e botoes Voltar/Proximo ficavam soltos. */ display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.18); animation: slideUp 0.15s ease-out; } .modal .modal-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .modal .modal-header, .modal .modal-footer { flex-shrink: 0; } .modal.modal-large { width: 1200px; max-width: 96vw; max-height: 88vh; } .modal.modal-fullscreen { width: 100vw; max-width: 100vw; height: calc(100vh - 40px); max-height: calc(100vh - 40px); border-radius: 0; margin-top: -10vh; } .modal-header { padding: 18px 22px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border); } .modal-title { font-size: 15px; font-weight: 600; } .modal-body { padding: 20px 22px; } .modal-footer { padding: 14px 22px; border-top: 1px solid var(--color-border); display: flex; gap: 8px; justify-content: flex-end; background: var(--color-bg-subtle); flex-wrap: wrap; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes slideUp { from { transform: translateY(8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } /* ========== DROPDOWN ========== */ .dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 240px; z-index: 1000; overflow: hidden; animation: slideUp 0.12s ease-out; } .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; color: var(--color-text); cursor: pointer; text-decoration: none; } .dropdown-item:hover { background: var(--color-bg-subtle); text-decoration: none; } .dropdown-item svg { color: var(--color-text-muted); } .dropdown-divider { height: 1px; background: var(--color-border); margin: 4px 0; } .dropdown-header { padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-muted); font-weight: 600; } .icon-btn { position: relative; } /* ========== NOTIF ICON (caixa colorida + SVG · substitui o "dot Japan flag") ========== */ .notif-icon { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .notif-icon svg { width: 16px; height: 16px; } .notif-icon-danger { background: var(--color-danger-bg); color: var(--color-danger); } .notif-icon-warning { background: var(--color-warning-bg); color: var(--color-warning); } .notif-icon-info { background: var(--color-info-bg); color: var(--color-info); } .notif-icon-success { background: var(--color-success-bg); color: var(--color-success); } .notif-icon-neutral { background: var(--color-bg-subtle); color: var(--color-text-secondary); } /* ========== NOTIFICATION PANEL ========== */ .notif-panel { position: absolute; top: calc(100% + 6px); right: 0; width: 380px; max-height: 520px; overflow: auto; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0,0,0,0.10); z-index: 100; } .notif-head { padding: 14px 16px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; background: white; position: sticky; top: 0; z-index: 1; } .notif-head .unread-count { font-size: 11px; font-weight: 600; color: var(--color-primary); background: var(--color-primary-subtle); padding: 2px 8px; border-radius: 10px; margin-left: 6px; } /* Divisor de seção (não lidas / lidas) */ .notif-section-label { padding: 8px 16px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); } .notif-item { padding: 12px 16px 12px 28px; border-bottom: 1px solid var(--color-border); cursor: pointer; position: relative; transition: background 0.12s; } .notif-item:hover { background: var(--color-bg-subtle); } .notif-item:last-child { border-bottom: none; } /* Item NÃO LIDO: fundo azulzinho, dot à esquerda, título em bold */ .notif-item.unread { background: var(--color-primary-subtle); } .notif-item.unread::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); } /* Item LIDO: sem dot, cores suaves, título em weight normal */ .notif-item.read { opacity: 0.72; } .notif-item.read .notif-title { font-weight: 500; } .notif-item.read .notif-icon { opacity: 0.55; } .notif-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--color-text); } .notif-desc { font-size: 12px; color: var(--color-text-secondary); line-height: 1.4; } .notif-time { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; } /* ========== TOAST ========== */ .toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; } .toast { background: #1F2937; color: white; padding: 10px 16px; border-radius: var(--radius-md); font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; animation: toastIn 0.2s ease-out; max-width: 360px; } .toast.toast-success { background: #065F46; } .toast.toast-danger { background: #991B1B; } @keyframes toastIn { from { transform: translateY(12px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } /* ========== PATIENT PHOTO ========== */ .person-photo { width: 32px; height: 32px; border-radius: 50%; background: var(--color-bg-muted); overflow: hidden; flex-shrink: 0; border: 1px solid var(--color-border); } .person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .person-photo .photo-initials { display: inline-flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--brand-gradient); color: white; font-weight: 600; font-size: 11px; letter-spacing: 0.3px; } /* ========== ALERTAS DO PAINEL (acionáveis) ========== */ .alerta-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--color-border); transition: background 0.12s; } .alerta-item:last-child { border-bottom: none; } .alerta-item:hover { background: var(--color-bg-subtle); } .alerta-body { flex: 1; min-width: 0; cursor: pointer; } .alerta-actions { display: flex; gap: 4px; opacity: 0.7; } .alerta-item:hover .alerta-actions { opacity: 1; } .btn-ghost-sm { width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s; } .btn-ghost-sm:hover { background: var(--color-bg-muted); color: var(--color-text); } .btn-ghost-sm svg { width: 14px; height: 14px; } .alerta-resolver:hover { background: var(--color-success-bg); color: var(--color-success); } /* ========== INBOX (Gmail) ========== */ .inbox-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; } .inbox-layout-split { grid-template-columns: 200px 380px 1fr; flex: 1; min-height: 0; } .inbox-layout-split.inbox-layout-com-ficha { grid-template-columns: 200px 360px 1fr 320px; } /* Modo "Janela grande" · mantém ficha lateral na página; email abre em modal */ .inbox-layout-large { grid-template-columns: 220px 1fr; flex: 1; min-height: 0; } .inbox-layout-large.inbox-layout-com-ficha { grid-template-columns: 220px 1fr 320px; } .inbox-layout-large .inbox-sidebar, .inbox-layout-large .inbox-lista, .inbox-layout-large .inbox-ficha { overflow-y: auto; min-height: 0; } .page-fullheight { height: calc(100vh - var(--topbar-height)); padding-bottom: 20px; overflow: hidden; } @media (max-width: 1280px) { .inbox-layout-split.inbox-layout-com-ficha { grid-template-columns: 200px 340px 1fr 300px; } } @media (max-width: 1100px) { .inbox-layout-split, .inbox-layout-split.inbox-layout-com-ficha { grid-template-columns: 1fr; height: auto; } .inbox-layout-split .inbox-painel, .inbox-layout-split .inbox-ficha { display: none; } } .inbox-layout-split .inbox-sidebar, .inbox-layout-split .inbox-lista, .inbox-layout-split .inbox-painel, .inbox-layout-split .inbox-ficha { overflow-y: auto; min-height: 0; } .inbox-painel { display: flex; flex-direction: column; overflow: hidden; min-height: 500px; } .inbox-layout-split .inbox-painel { min-height: 0; } .inbox-painel-header { padding: 14px 18px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-shrink: 0; } .inbox-painel-header-content { flex: 1; min-width: 0; } .inbox-painel-header-actions { display: flex; gap: 4px; flex-shrink: 0; } .inbox-painel-assunto { font-size: 18px; font-weight: 700; color: var(--color-text); line-height: 1.3; letter-spacing: -0.2px; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .inbox-star-prefix { color: #F59E0B; margin-right: 4px; } .inbox-painel-meta { display: flex; flex-direction: column; gap: 4px; } .inbox-painel-meta-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--color-text-secondary); flex-wrap: wrap; } .inbox-painel-meta-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-text-muted); min-width: 32px; flex-shrink: 0; } .inbox-painel-meta-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inbox-painel-meta-data { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; } /* Botões de ícone no header do email (Ficha, estrela) · compactos e discretos */ .btn-icon-header { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--color-text-secondary); cursor: pointer; font-size: 18px; line-height: 1; transition: all 0.12s; } .btn-icon-header:hover { background: var(--color-bg-subtle); border-color: var(--color-border); color: var(--color-text); } .btn-icon-header svg { width: 15px; height: 15px; } .btn-icon-starred { color: #F59E0B; } .btn-icon-starred:hover { color: #D97706; } .inbox-painel-paciente { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--color-primary-subtle); border-bottom: 1px solid var(--color-border); } .inbox-painel-corpo { flex: 1; padding: 18px; font-size: 14px; line-height: 1.6; overflow-y: auto; } .inbox-painel-corpo p { margin: 0 0 8px; } .inbox-painel-footer { padding: 12px 16px; border-top: 1px solid var(--color-border); display: flex; gap: 8px; flex-wrap: wrap; background: var(--color-bg-subtle); flex-shrink: 0; } /* Ações de leitura · botões compactos em uma linha só (sem quebra) */ .inbox-leitura-actions { flex-wrap: nowrap; overflow-x: auto; } .inbox-leitura-actions .btn { flex-shrink: 0; white-space: nowrap; } .inbox-painel-vazio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-text-muted); } .inbox-painel-vazio svg { width: 48px; height: 48px; opacity: 0.4; } .inbox-item-selected { background: var(--color-primary-subtle) !important; box-shadow: inset 3px 0 0 var(--color-primary); } .inbox-count-soft { background: var(--color-bg-muted); color: var(--color-text-muted); font-size: 11px; padding: 1px 8px; border-radius: 10px; font-weight: 600; } /* Sidebar · headers de pastas customizadas e tags */ .inbox-pastas-custom-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-text-muted); } .inbox-folder-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .inbox-folder-tag { font-size: 12.5px; } /* Toolbar da lista · seleção múltipla + ações */ .inbox-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--color-border); background: white; flex-wrap: wrap; min-height: 46px; } .inbox-toolbar-check { display: inline-flex; align-items: center; padding: 4px; cursor: pointer; } .inbox-toolbar-check input[type="checkbox"] { cursor: pointer; } .inbox-toolbar-count { font-size: 12.5px; font-weight: 600; color: var(--color-primary); } .inbox-toolbar-nome { font-size: 12.5px; font-weight: 600; color: var(--color-text); margin-left: 4px; } /* Item com checkbox · layout ajustado */ .inbox-item-check { display: flex; align-items: center; padding: 0 4px 0 14px; cursor: pointer; } .inbox-item-main { display: flex; gap: 12px; flex: 1; padding: 14px 16px 14px 2px; cursor: pointer; min-width: 0; } .inbox-item { padding: 0; align-items: stretch; } .inbox-item-checked { background: var(--color-primary-subtle); } /* Tags inline no email */ .inbox-item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .email-tag { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 3px; line-height: 1.4; } /* Badge "agendado" na data */ .inbox-agendado-badge { display: inline-flex; align-items: center; gap: 3px; background: var(--color-warning-bg); color: var(--color-warning); padding: 2px 6px; border-radius: 3px; font-weight: 600; font-size: 10.5px; } .inbox-agendado-badge svg { width: 10px; height: 10px; } /* Menu contextual (botão direito em emails) */ .context-menu { position: fixed; background: white; border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); padding: 6px 0; min-width: 220px; z-index: 3000; animation: slideUp 0.1s ease-out; } .context-menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; color: var(--color-text); cursor: pointer; transition: background 0.1s; } .context-menu-item:hover { background: var(--color-bg-subtle); } .context-menu-item svg { width: 14px; height: 14px; color: var(--color-text-muted); } .context-menu-divider { height: 1px; background: var(--color-border); margin: 4px 0; } .context-menu-submenu { position: relative; } .context-menu-submenu-items { position: absolute; left: 100%; top: 0; background: white; border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); padding: 6px 0; min-width: 200px; display: none; } .context-menu-submenu:hover .context-menu-submenu-items { display: block; } .context-menu-danger { color: var(--color-danger); } .context-menu-danger svg { color: var(--color-danger); } .context-menu-danger:hover { background: var(--color-danger-bg); } /* Modal de nova pasta · grid de cores */ .pasta-cor-grid { display: flex; gap: 8px; flex-wrap: wrap; } .pasta-cor-opt { cursor: pointer; } .pasta-cor-opt input { display: none; } .pasta-cor-swatch { display: inline-block; width: 32px; height: 32px; border-radius: 8px; border: 2px solid transparent; transition: all 0.12s; } .pasta-cor-opt input:checked + .pasta-cor-swatch { border-color: var(--color-text); transform: scale(1.1); box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-text); } /* Preview de anexo · modal grande */ .anexo-preview-viewer { background: #F5F5F5; border-radius: 8px; padding: 24px; min-height: 520px; max-height: 68vh; overflow-y: auto; } .anexo-preview-pdf-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #2B2B2B; color: white; border-radius: 6px; margin-bottom: 16px; } .anexo-preview-pdf-header svg { width: 18px; height: 18px; color: #EA4335; } .anexo-preview-paginas { display: flex; flex-direction: column; gap: 16px; align-items: center; } .anexo-preview-pagina { width: 100%; max-width: 720px; background: white; padding: 40px 48px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); border-radius: 2px; } .anexo-preview-pagina-header { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 2px solid #0B2A4A; margin-bottom: 24px; } .anexo-preview-linhas { display: flex; flex-direction: column; gap: 10px; } .anexo-preview-linha { height: 10px; background: #E5E7EB; border-radius: 2px; } .anexo-preview-img { min-height: 400px; background: repeating-linear-gradient(45deg, #F5F5F5, #F5F5F5 10px, #EFEFEF 10px, #EFEFEF 20px); } .anexo-preview-img svg { width: 64px; height: 64px; color: var(--color-text-muted); } /* Agendar envio · modal */ .agendar-envio-resumo { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; } .agendar-envio-quick { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .inbox-anexo-mini { display: inline-flex; vertical-align: middle; color: var(--color-text-muted); } .inbox-anexo-mini svg { width: 11px; height: 11px; transform: rotate(45deg); } /* Painel de leitura · anexos */ .inbox-anexos { padding: 12px 18px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-subtle); } .inbox-anexos-titulo { font-size: 11.5px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .inbox-anexos-titulo svg { width: 13px; height: 13px; transform: rotate(45deg); } .inbox-anexos-grid { display: flex; flex-wrap: wrap; gap: 8px; } .inbox-anexo-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: white; border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; transition: all 0.12s; min-width: 200px; } .inbox-anexo-item:hover { border-color: var(--color-primary); box-shadow: 0 2px 6px rgba(0,0,0,0.06); } .inbox-anexo-icon { width: 32px; height: 32px; background: var(--color-primary-subtle); color: var(--color-primary); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .inbox-anexo-icon svg { width: 16px; height: 16px; } .inbox-anexo-nome { font-size: 12.5px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inbox-anexo-meta { font-size: 11px; color: var(--color-text-muted); } /* Ficha do paciente · painel lateral exclusivo (4ª coluna) */ .inbox-ficha { display: flex; flex-direction: column; padding: 0; } .inbox-ficha-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); background: var(--color-primary-subtle); } .inbox-ficha-body { flex: 1; overflow-y: auto; padding: 14px 16px; min-height: 0; } .inbox-ficha-campo { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; border-bottom: 1px dashed var(--color-border); } .inbox-ficha-campo:last-of-type { border-bottom: none; margin-bottom: 10px; } .inbox-ficha-campo span { color: var(--color-text-muted); } .inbox-ficha-footer { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--color-border); background: white; } /* Compose inline · formulário completo */ .inbox-compose-form { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; } .inbox-compose-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); } .inbox-compose-label { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); width: 60px; flex-shrink: 0; } .inbox-compose-row .form-input { border: none; padding: 4px 0; background: transparent; flex: 1; } .inbox-compose-row .form-input:focus { outline: none; box-shadow: none; } .inbox-compose-corpo { flex: 1; min-height: 220px; border: none; border-radius: 0; padding: 14px; resize: none; } .inbox-compose-corpo:focus { outline: none; box-shadow: none; } .inbox-compose-chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } /* Compose inline · anexos + CC */ .inbox-compose-anexos { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--color-border); } .inbox-compose-anexo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 4px; } .inbox-compose-anexo svg { width: 12px; height: 12px; color: var(--color-text-muted); } .inbox-compose-footer-inline { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-top: 1px solid var(--color-border); flex-wrap: wrap; gap: 8px; } /* Resumo do paciente no inbox · dossier expansível */ .inbox-resumo, .email-resumo-wrap .inbox-resumo { background: linear-gradient(180deg, var(--color-primary-subtle) 0%, white 100%); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; margin: 0 18px 12px; } .email-resumo-wrap { margin: 0; } .email-resumo-wrap .inbox-resumo { margin: 0 0 16px; } .inbox-resumo-top { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); margin-bottom: 10px; } .inbox-resumo-alergia { background: var(--color-danger-bg); color: var(--color-danger); padding: 8px 10px; border-radius: 6px; font-size: 11.5px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .inbox-resumo-alergia svg { width: 14px; height: 14px; flex-shrink: 0; } .inbox-resumo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; } .inbox-resumo-stats > div { background: white; border: 1px solid var(--color-border); border-radius: 6px; padding: 8px; text-align: center; } .inbox-resumo-num { font-size: 18px; font-weight: 700; color: var(--color-primary); line-height: 1.1; } .inbox-resumo-lbl { font-size: 10.5px; color: var(--color-text-muted); margin-top: 2px; } .inbox-resumo-cids { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; } .inbox-resumo-accordion { margin-bottom: 6px; border: 1px solid var(--color-border); border-radius: 6px; background: white; overflow: hidden; } .inbox-resumo-accordion summary { padding: 8px 12px; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--color-text); user-select: none; } .inbox-resumo-accordion summary:hover { background: var(--color-bg-subtle); } .inbox-resumo-accordion[open] summary { border-bottom: 1px solid var(--color-border); } .inbox-resumo-item { padding: 8px 12px; border-bottom: 1px solid var(--color-border); } .inbox-resumo-item:last-child { border-bottom: none; } .inbox-resumo-acoes { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); flex-wrap: wrap; } .dropdown-item-active { background: var(--color-primary-subtle); font-weight: 600; } .inbox-sidebar { display: flex; flex-direction: column; gap: 4px; } .inbox-folder { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; } .inbox-folder:hover { background: var(--color-bg-subtle); text-decoration: none; } .inbox-folder.active { background: var(--color-primary-subtle); color: var(--color-text); font-weight: 600; } .inbox-count { margin-left: auto; background: var(--color-primary); color: white; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; } .inbox-lista { display: flex; flex-direction: column; } .inbox-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background 0.12s; flex-shrink: 0; } .inbox-item:hover { background: var(--color-bg-subtle); } .inbox-item-unread { background: rgba(239, 246, 255, 0.4); } .inbox-item-unread .inbox-subject, .inbox-item-unread .inbox-from { font-weight: 700; } .inbox-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--brand-gradient); color: white; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; } .inbox-avatar img { width: 100%; height: 100%; object-fit: cover; } .inbox-content { flex: 1; min-width: 0; } .inbox-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .inbox-from { font-size: 13px; color: var(--color-text); } .inbox-subject { font-size: 13px; color: var(--color-text); margin: 2px 0; } .inbox-preview { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inbox-star { color: #F59E0B; } .email-header { padding: 12px 0; border-bottom: 1px solid var(--color-border); margin-bottom: 14px; } .email-body { font-size: 14px; line-height: 1.6; } .email-body p { margin: 0 0 8px; } /* ========== TIMELINE DO PACIENTE ========== */ /* Dots ligados por linha contínua · linha atravessa o padding do item, não "sobra" */ .timeline { padding: 12px 20px 8px; } .timeline-item { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding-bottom: 14px; /* espaço entre items · a linha percorre esse padding */ align-items: stretch; } .timeline-item:last-child { padding-bottom: 0; } /* Coluna esquerda · dot alinhado com o título do body + linha ocupando resto da coluna */ .timeline-icon-col { display: flex; flex-direction: column; align-items: center; } .timeline-icon-col::after { content: ''; flex: 1; width: 2px; background: var(--color-border); margin-top: 4px; /* pequeno respiro entre dot e linha */ } .timeline-item:last-child .timeline-icon-col::after { display: none; } .timeline-dot { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: white; /* Alinha centro do dot (16px) com centro do título do body (padding-top 10 + 12px de line) */ margin-top: 2px; } .timeline-dot svg { width: 14px; height: 14px; } .timeline-body { min-width: 0; padding: 10px 14px; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .timeline-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; } /* ========== DISCADOR ========== */ .discador { padding: 6px 0; } .discador-paciente { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--color-primary-subtle); border-radius: 8px; margin-bottom: 14px; } .discador-display { width: 100%; padding: 14px 16px; font-size: 22px; font-weight: 600; font-family: ui-monospace, 'SF Mono', Menlo, monospace; text-align: center; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-subtle); letter-spacing: 1px; margin-bottom: 16px; } .discador-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .discador-tecla { padding: 16px; font-size: 20px; font-weight: 600; background: white; border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer; transition: all 0.1s; } .discador-tecla:hover { background: var(--color-primary-subtle); border-color: var(--color-primary); } .discador-tecla:active { transform: scale(0.96); } /* Chamada ativa · flutuante no canto inferior direito */ .chamada-ativa { position: fixed; bottom: 20px; right: 20px; z-index: 2500; background: white; border: 1px solid var(--color-border); border-left: 4px solid var(--color-success); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0,0,0,0.18); padding: 12px 14px; display: flex; align-items: center; gap: 12px; min-width: 320px; } .chamada-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--color-success); animation: chamada-pulse 1s ease-in-out infinite; flex-shrink: 0; } @keyframes chamada-pulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.4); } 50% { opacity: 0.7; transform: scale(1.15); box-shadow: 0 0 0 8px rgba(4, 120, 87, 0); } } .chamada-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .chamada-icone { width: 36px; height: 36px; background: var(--color-success); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .chamada-fim { width: 36px; height: 36px; background: var(--color-danger); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.12s; border: none; flex-shrink: 0; } .chamada-fim:hover { background: #7F1D1D; } .chamada-fim svg { width: 16px; height: 16px; transform: rotate(135deg); } /* Perfil resumido · visão padrão em Configurações (só leitura) */ .perfil-resumo { display: flex; align-items: center; gap: 14px; padding: 14px 16px; } .perfil-resumo .person-photo { border: 2px solid var(--color-border); } /* ========== INTEGRAÇÕES · um card por categoria ========== */ .integracoes-header { padding: 4px 2px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .integracao-categoria { overflow: hidden; } .integracao-categoria-header { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--color-border); } .integracao-categoria-icon { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .integracao-categoria-icon svg { width: 20px; height: 20px; } .integracao-categoria-titulo { font-size: 15px; font-weight: 700; color: var(--color-text); letter-spacing: -0.1px; } .integracao-categoria-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; } .integracao-categoria-stats { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; } .integracao-categoria-num { font-size: 18px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; } .integracao-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } .integracao-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: white; padding: 14px 16px; transition: all 0.12s ease-out; } .integracao-card:hover { box-shadow: var(--shadow-md); } .integracao-status-conectado { border-color: #D1FAE5; } .integracao-status-precisa_acao { border-color: #FDE68A; background: #FFFBEB; } .integracao-status-disponivel { border-style: dashed; } .integracao-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .integracao-logo { width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .integracao-logo svg { width: 20px; height: 20px; } .integracao-logo-img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; } .integracao-nome { font-size: 13.5px; font-weight: 600; color: var(--color-text); } .integracao-tipo { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-text-muted); margin-top: 2px; } .integracao-tipo svg { width: 11px; height: 11px; } .integracao-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; position: relative; } .integracao-dot-ok { background: var(--color-success); box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.18); } .integracao-dot-warn { background: var(--color-warning); box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18); animation: pulse-warn 1.5s ease-in-out infinite; } .integracao-dot-off { background: var(--color-text-muted); box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.15); } @keyframes pulse-warn { 0%, 100% { box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18); } 50% { box-shadow: 0 0 0 6px rgba(180, 83, 9, 0.08); } } .integracao-desc { font-size: 12px; color: var(--color-text-secondary); line-height: 1.4; margin-bottom: 10px; } .integracao-meta { font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; } .integracao-meta > div, .integracao-meta > a { display: inline-flex; align-items: center; gap: 5px; } .integracao-meta svg { width: 12px; height: 12px; } .integracao-meta a { color: var(--color-primary); text-decoration: none; } .integracao-meta a:hover { text-decoration: underline; } .integracao-alert { font-size: 11.5px; color: var(--color-warning); background: var(--color-warning-bg); border: 1px solid #FDE68A; padding: 6px 10px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; } .integracao-alert svg { width: 12px; height: 12px; } .integracao-actions { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--color-border); gap: 8px; flex-wrap: wrap; } /* Modal de conectar SSO */ .sso-redirect { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0 4px; } .sso-escopo { width: 100%; padding: 12px 14px; background: var(--color-bg-subtle); border-radius: 6px; border: 1px solid var(--color-border); } /* Perfil editável em Configurações · foto grande + campos */ .perfil-edit { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: flex-start; } @media (max-width: 720px) { .perfil-edit { grid-template-columns: 1fr; } } .perfil-foto { display: flex; flex-direction: column; align-items: center; gap: 8px; } .perfil-foto-preview { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; border: 2px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; background: var(--brand-gradient); } .perfil-foto-preview img { width: 100%; height: 100%; object-fit: cover; } .photo-initials-lg { color: white; font-weight: 600; font-size: 44px; letter-spacing: 1px; } .perfil-campos { min-width: 0; } .person-row { display: flex; align-items: center; gap: 10px; } /* Selo de registro fictício · tag sutil, nunca inline no nome */ .fict-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.4px; background: var(--color-warning-bg); color: var(--color-warning); padding: 2px 7px; border-radius: 3px; border: 1px solid #FDE68A; text-transform: uppercase; white-space: nowrap; } /* Banner de registro fictício · faixa sutil acima do record-header */ .fict-banner { display: flex; align-items: center; gap: 8px; background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid #FDE68A; border-radius: var(--radius-md); padding: 6px 12px; font-size: 11.5px; font-weight: 500; margin-bottom: 10px; } .fict-banner::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .fict-banner strong { font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; font-size: 10.5px; } .record-photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--color-border); } .record-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========== SUBTABS ========== */ .subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; } .subtab { padding: 10px 16px; color: var(--color-text-muted); font-weight: 500; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; } .subtab:hover { color: var(--color-text); text-decoration: none; } .subtab.active { color: var(--color-text); border-bottom-color: var(--color-primary); font-weight: 600; } /* ========== POST PREVIEWS ========== */ .post-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .post-ig, .post-fb, .post-blog { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; font-size: 12.5px; } .post-channel-head { padding: 10px 12px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .post-ig-head { padding: 10px 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--color-border); } .post-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4); padding: 2px; box-sizing: border-box; } .post-avatar-inner { width: 100%; height: 100%; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; color: var(--color-text); } .post-img { aspect-ratio: 1; background: linear-gradient(135deg, #EEF2F6 0%, #D1D5DB 100%); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 11px; } .post-caption { padding: 10px 12px; line-height: 1.45; color: var(--color-text); } .post-actions { padding: 8px 12px; color: var(--color-text); display: flex; gap: 12px; } .post-actions svg { width: 20px; height: 20px; } .post-blog-title { padding: 14px 16px 4px; font-weight: 600; font-size: 14px; color: var(--color-text); } .post-blog-body { padding: 0 16px 14px; color: var(--color-text-secondary); line-height: 1.5; } /* ========== UTIL ========== */ .text-muted { color: var(--color-text-muted); } .text-sm { font-size: 12px; } .text-xs { font-size: 11px; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .mb-0 { margin-bottom: 0 !important; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .gap-8 { gap: 8px; } .flex { display: flex; } .flex-center { display: flex; align-items: center; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .hidden { display: none !important; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #9CA3AF; } /* Spinner · usado em botoes durante carregamento e em telas de verify */ .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 6px; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================== * ONBOARDING · banner pendente (Fase 1) * Wizard reutiliza .modal existente. Tokens especificos dos * passos novos (.onb-wizard-*) entram na Fase 2. * ========================================================== */ .onb-banner { display: flex; align-items: center; gap: 16px; padding: 14px 20px; margin: 0 0 20px 0; background: #FFFBEB; border: 1px solid var(--color-border); border-left: 3px solid #D97706; border-radius: 6px; color: #0B2A4A; } .onb-banner-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; color: #D97706; } .onb-banner-body { flex: 1; min-width: 0; } .onb-banner-title { font-weight: 600; font-size: 14px; color: #0B2A4A; line-height: 1.35; } .onb-banner-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.4; } .onb-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .onb-banner-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; background: transparent; color: var(--color-text-muted); border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; } .onb-banner-close:hover { background: rgba(0,0,0,0.04); color: #0B2A4A; } .onb-banner-close svg { width: 14px; height: 14px; } /* ========================================================== * ONBOARDING · wizard (Fase 2A) * Tokens consultoria: bordas sobrias, tipografia por hierarquia, * inputs 40-44px + 6px radius, sem gradiente, primario #0B2A4A. * ========================================================== */ .onb-wizard-stepper { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); } .onb-wizard-stepper-text { font-size: 11px; color: var(--color-text-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; font-weight: 500; } .onb-wizard-stepper-bar { display: flex; gap: 4px; } .onb-wizard-stepper-segment { flex: 1; height: 2px; background: #E5E7EB; border-radius: 2px; transition: background 0.25s ease; } .onb-wizard-stepper-segment.done { background: #0B2A4A; } .onb-wizard-step { padding: 4px 0; } .onb-wizard-title { font-size: 18px; font-weight: 600; color: #0B2A4A; margin-bottom: 8px; line-height: 1.3; letter-spacing: -0.01em; } .onb-wizard-subtitle { font-size: 13px; color: var(--color-text-secondary); line-height: 1.55; margin-bottom: 28px; max-width: 640px; } .onb-wizard-form { display: flex; flex-direction: column; gap: 20px; max-width: 560px; } .onb-wizard-field { display: flex; flex-direction: column; gap: 6px; } .onb-wizard-label { font-size: 12px; font-weight: 500; color: #0B2A4A; letter-spacing: 0.01em; } .onb-wizard-required { color: #B91C1C; font-weight: 600; margin-left: 2px; } .onb-wizard-input { width: 100%; height: 42px; padding: 8px 12px; font-size: 14px; color: #0B2A4A; background: white; border: 1px solid #E5E7EB; border-radius: 6px; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; font-family: inherit; } .onb-wizard-input:focus { outline: none; border-color: #0B2A4A; box-shadow: 0 0 0 3px rgba(11, 42, 74, 0.08); } .onb-wizard-input::placeholder { color: #9CA3AF; } select.onb-wizard-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .onb-wizard-hint { font-size: 11px; color: var(--color-text-muted); line-height: 1.5; } .onb-wizard-duracao { max-width: 320px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--color-border); } /* Grade semanal de horarios */ .onb-wizard-grade { display: flex; flex-direction: column; gap: 0; border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; } .onb-wizard-grade-linha { padding: 14px 16px; border-bottom: 1px solid #E5E7EB; } .onb-wizard-grade-linha:last-child { border-bottom: none; } .onb-wizard-grade-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .onb-wizard-checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: #0B2A4A; user-select: none; } .onb-wizard-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: #0B2A4A; cursor: pointer; margin: 0; } .onb-wizard-grade-dia { font-weight: 500; } .onb-wizard-link { background: none; border: none; color: var(--color-primary); font-size: 12px; font-weight: 500; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.15s; font-family: inherit; } .onb-wizard-link:hover { background: rgba(11, 42, 74, 0.06); } .onb-wizard-blocos { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .onb-wizard-bloco { display: flex; align-items: center; gap: 10px; } .onb-wizard-input-time { width: 120px; height: 40px; font-variant-numeric: tabular-nums; } .onb-wizard-bloco-sep { font-size: 12px; color: var(--color-text-muted); } .onb-wizard-bloco-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; background: transparent; color: var(--color-text-muted); border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .onb-wizard-bloco-remove:hover { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; } .onb-wizard-bloco-remove svg { width: 12px; height: 12px; } .onb-wizard-grade-fechado { margin-top: 6px; font-size: 12px; color: var(--color-text-muted); font-style: italic; } /* Finalizar */ .onb-wizard-finalizar { max-width: 640px; } .onb-wizard-resumo { margin: 24px 0; padding: 20px 24px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px; display: flex; flex-direction: column; gap: 12px; } .onb-wizard-resumo-item { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--color-text-secondary); } .onb-wizard-resumo-item.ok { color: #0B2A4A; font-weight: 500; } .onb-wizard-resumo-marker { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #E5E7EB; color: #9CA3AF; font-size: 12px; font-weight: 600; flex-shrink: 0; } .onb-wizard-resumo-item.ok .onb-wizard-resumo-marker { background: #0B2A4A; color: white; } .onb-wizard-proximo-passos { margin-top: 24px; padding: 16px 20px; background: white; border: 1px solid #E5E7EB; border-radius: 8px; } .onb-wizard-proximo-titulo { font-size: 12px; font-weight: 600; color: #0B2A4A; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 8px; } .onb-wizard-proximo-texto { font-size: 13px; color: var(--color-text-secondary); line-height: 1.55; } /* Passo 3 · cards de provedor (Gmail e Outlook) */ .onb-wizard-providers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; } .onb-wizard-provider { border: 1px solid #E5E7EB; border-radius: 8px; padding: 24px; background: white; display: flex; flex-direction: column; gap: 16px; transition: border-color 0.15s, background 0.15s; } .onb-wizard-provider.conectado { border-color: #D1FAE5; background: #F0FDF4; } .onb-wizard-provider-header { display: flex; flex-direction: column; gap: 4px; } .onb-wizard-provider-logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 4px; } .onb-wizard-provider-logo svg { width: 24px; height: 24px; } .onb-wizard-provider-nome { font-size: 14px; font-weight: 600; color: #0B2A4A; } .onb-wizard-provider-sub { font-size: 12px; color: var(--color-text-muted); line-height: 1.45; } .onb-wizard-provider-btn { width: 100%; margin-top: auto; justify-content: center; } .onb-wizard-provider-status { display: flex; align-items: flex-start; gap: 10px; padding-top: 4px; font-size: 13px; color: #065F46; font-weight: 500; line-height: 1.5; } .onb-wizard-provider-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #10B981; color: white; flex-shrink: 0; margin-top: 1px; } .onb-wizard-provider-status-icon svg { width: 12px; height: 12px; } .onb-wizard-provider-status-text { flex: 1; min-width: 0; word-break: break-all; } .onb-wizard-provider-conta { font-weight: 400; color: var(--color-text-secondary); font-size: 12px; display: inline-block; margin-top: 2px; } .onb-wizard-provider-dica { margin-top: 20px; padding: 12px 16px; background: #F9FAFB; border-left: 3px solid #0B2A4A; border-radius: 4px; font-size: 12px; color: var(--color-text-secondary); line-height: 1.55; } @media (max-width: 720px) { .onb-wizard-providers { grid-template-columns: 1fr; } } /* ========================================================== * AGENDA v2 · tela unificada estilo Google/Outlook Calendar * Toolbar com navegacao de datas + seletor de view + acoes. * Grade semanal com slots de 60px por hora (07h-22h). * Eventos posicionados absolutamente com altura proporcional. * Tokens consultoria: bordas sobrias, tipografia por hierarquia. * ========================================================== */ .agenda2-toolbar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: white; border: 1px solid #E5E7EB; border-radius: 8px; margin-bottom: 16px; flex-wrap: wrap; } .agenda2-nav { display: flex; align-items: center; gap: 8px; } .agenda2-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .agenda2-nav-btn:hover { background: var(--color-bg-subtle); border-color: var(--color-border-strong); } .agenda2-nav-btn svg { width: 14px; height: 14px; } .agenda2-titulo { font-size: 15px; font-weight: 600; color: var(--color-text); margin-left: 8px; letter-spacing: -0.01em; text-transform: capitalize; } .agenda2-views { display: inline-flex; background: #F3F4F6; padding: 3px; border-radius: 7px; gap: 2px; } .agenda2-view-pill { padding: 6px 14px; background: transparent; border: none; border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; font-family: inherit; } .agenda2-view-pill:hover { color: #0B2A4A; } .agenda2-view-pill.active { background: white; color: #0B2A4A; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .agenda2-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } .agenda2-sync-badge { font-size: 11px; color: var(--color-text-muted); padding: 0 4px; } .agenda2-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid #E5E7EB; border-radius: 6px; color: var(--color-text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; } .agenda2-icon-btn:hover { background: #F9FAFB; color: #0B2A4A; } .agenda2-icon-btn svg { width: 14px; height: 14px; } /* Grade semanal */ .agenda2-wrap { background: white; border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; } .agenda2-grid { display: flex; flex-direction: column; max-height: calc(100vh - 220px); min-height: 600px; /* Anna 2026-05-01 (CAUSA RAIZ FINAL) . scroll DO CONTAINER, nao do * body. Isso garante que header E body tem EXATAMENTE a mesma * largura (mesmo container, mesmo scrollbar externo). Header fica * sticky no topo enquanto o body rola. As linhas verticais entre * colunas vao alinhar perfeitamente entre header e body. */ overflow-y: auto; } .agenda2-header { display: grid; grid-template-columns: 64px repeat(var(--agenda2-cols, 7), 1fr); grid-template-rows: 76px; border-bottom: 1px solid #E5E7EB; background: #FAFAFA; flex-shrink: 0; /* Anna 2026-05-01 (final). Sticky no topo do .agenda2-grid (que tem * o scroll). Header e body sao agora 2 grids dentro do mesmo * container scrollavel . larguras IDENTICAS por construcao. */ position: sticky; top: 0; z-index: 5; } /* Anna 2026-05-01 (6a iteracao . solucao final). Banner de feriados * abaixo do header. Tira o problema de feriado dentro da celula que * causava desalinhamento entre colunas. Padrao Google Calendar / * Outlook . feriado e info auxiliar mostrada na linha de baixo, * ocupando largura total. */ .agenda2-feriados-banner { padding: 6px 12px; background: #FEF3C7; border-bottom: 1px solid #FCD34D; display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: #92400E; flex-shrink: 0; } .agenda2-feriado-chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .agenda2-feriado-chip strong { font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; } /* Anna 2026-05-01 (5a iteracao . solucao definitiva via GRID). * Todas as celulas tem 3 linhas fixas: * row 1 (16px) . DOW * row 2 (24px) . numero do dia * row 3 (14px) . nome do feriado (ou espaco invisivel quando nao tem) * Como TODAS as celulas tem o mesmo grid (mesmo as sem feriado, que * usam ' ' pra ocupar a row 3), a geometria e identica entre * colunas. DOW + numero ficam no mesmo y em todas as colunas, e o * nome do feriado aparece embaixo APENAS na coluna que tem . sem * deslocar nada. */ /* Anna 2026-05-01 (definitivo) . positioning absoluto. DOW e DAY ficam * em coordenadas pixel-exatas DENTRO da celula. Como nada do flex/grid * pode movimentar absolute children, nenhuma classe (today/feriado/fds) * pode causar desalinhamento. Geometricamente impossivel de variar. */ .agenda2-header-spacer { height: 76px; box-sizing: border-box; position: relative; } .agenda2-header-spacer::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: #E5E7EB; } .agenda2-header-cell { padding: 0; text-align: center; display: block; height: 76px; box-sizing: border-box; position: relative; } .agenda2-header-cell::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: #E5E7EB; } .agenda2-header-cell:last-child::after { display: none; } /* Anna 2026-05-01 (final final) . header limpo SEM background colorido * em nenhuma celula. Backgrounds criavam ilusao de altura diferente. * "hoje" e "feriado" sao indicados APENAS pela cor do texto + banner * amarelo abaixo + faixa sutil no body da coluna. Header geometricamente * impossivel de ficar torto. */ .agenda2-header-cell.today .agenda2-header-day, .agenda2-header-cell.today .agenda2-header-dow { /* cor azul forte no texto sinaliza "hoje" sem precisar de fundo */ } /* (border-right convertida para pseudo-element ::after) */ /* Anna 2026-05-01 (definitivo) . position absolute pixel-exato. * DOW em y=12 (10px de altura, line-height 1) * DAY em y=28 (18px de altura, line-height 1) * Total visivel: 12 + 10 + 4(gap) + 18 = 44px, dentro dos 60px. */ .agenda2-header-dow { position: absolute; top: 12px; left: 0; right: 0; font-size: 10px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; line-height: 1; } .agenda2-header-day { position: absolute; top: 28px; left: 0; right: 0; font-size: 18px; font-weight: 500; color: #0B2A4A; line-height: 1; } /* Anna 2026-05-01 . nome do feriado position absolute embaixo do dia. * Como esta absolute dentro da celula (que tem 76px), nao afeta a * altura nem a largura. So aparece nas celulas que tem feriado. * Posicionamento: top 50px (apos o numero do dia que fica em 28-46). */ .agenda2-feriado-nome { position: absolute; top: 52px; left: 4px; right: 4px; font-size: 9px; font-weight: 500; color: #92400E; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agenda2-header-cell.today .agenda2-header-day { color: #1E4A7C; font-weight: 700; } .agenda2-header-cell.today .agenda2-header-dow { color: #1E4A7C; } .agenda2-header-cell.agenda2-fds .agenda2-header-dow { color: #94A3B8; } /* Anna 2026-05-01 (final) . feriado com fundo amarelo. Altura uniforme * via grid-template-rows: 76px no pai garante que background nao causa * desalinhamento. */ .agenda2-header-cell.agenda2-feriado { background: #FEF3C7; } .agenda2-header-cell.agenda2-feriado .agenda2-header-dow, .agenda2-header-cell.agenda2-feriado .agenda2-header-day { color: #92400E; } /* Anna 2026-05-02 . dia sem expediente (clinica fechada). Tom rosa * suave pra distinguir do feriado (amarelo) e do FDS aberto (cinza). */ .agenda2-header-cell.agenda2-fechado { background: #FCE7E7; } .agenda2-header-cell.agenda2-fechado .agenda2-header-dow, .agenda2-header-cell.agenda2-fechado .agenda2-header-day { color: #B91C1C; opacity: 0.85; } .agenda2-fechado-tag { position: absolute; top: 52px; left: 4px; right: 4px; font-size: 10px; font-weight: 500; color: #B91C1C; text-align: center; line-height: 1.1; } .agenda2-body { display: grid; grid-template-columns: 64px repeat(var(--agenda2-cols, 7), 1fr); flex: 1; /* Anna 2026-05-01 . overflow REMOVIDO . scroll agora vive no * .agenda2-grid pai. Garante que header e body tem mesma largura * porque ambos sao filhos diretos do mesmo container scrollavel. */ } .agenda2-hours { grid-column: 1; border-right: 1px solid #E5E7EB; background: #FAFAFA; } .agenda2-hour-label { padding: 4px 8px 0 8px; font-size: 10px; color: var(--color-text-muted); text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid #F3F4F6; box-sizing: border-box; } .agenda2-col { position: relative; min-width: 0; width: 100%; box-sizing: border-box; } /* Anna 2026-05-01 (CAUSA RAIZ . definitivo) . borda como pseudo-element * absoluto. NAO afeta a largura do box (que era a causa do * desalinhamento entre header e body . header tinha box-sizing * border-box e absorvia a borda; col tinha content-box e a borda * vinha por fora). Agora largura e identica entre header cell * e body col. */ .agenda2-col::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: #E5E7EB; pointer-events: none; } .agenda2-col:last-child::after { display: none; } .agenda2-col.today { background: linear-gradient(rgba(11, 42, 74, 0.025), rgba(11, 42, 74, 0.025)); } /* Anna 2026-05-01 (final) . cores de body conforme pedido: * cinza pra fim de semana (sab/dom), amarelo pra feriado. * Como o problema do alinhamento foi resolvido com scroll unificado, * as cores nao causam mais ilusao de linhas tortas. */ .agenda2-col.agenda2-col-feriado { background: rgba(254, 243, 199, 0.5); } .agenda2-col.agenda2-col-fds { background: rgba(248, 250, 252, 1); } .agenda2-col.today.agenda2-col-feriado { background: rgba(254, 243, 199, 0.5); } .agenda2-slots { display: flex; flex-direction: column; /* Anna 2026-05-01 . forca largura 100% da coluna pai (.agenda2-col). * Sem isso, em alguns navegadores o flex column poderia colapsar * em 1px por causa de sub-pixel rendering. */ width: 100%; } /* Slot de 1 hora · linha solida no final · linha pontilhada no meio (30min) */ .agenda2-slot { border-bottom: 1px solid #E5E7EB; cursor: pointer; box-sizing: border-box; transition: background 0.15s; background-image: linear-gradient(to bottom, transparent 49.5%, #F3F4F6 49.5%, #F3F4F6 50.5%, transparent 50.5%); /* Anna 2026-05-01 . largura explicita 100% pra alinhar com header */ width: 100%; } .agenda2-slot:hover { background-color: rgba(11, 42, 74, 0.035); } .agenda2-now-line { position: absolute; left: 0; right: 0; height: 1px; background: #DC2626; z-index: 3; pointer-events: none; opacity: 0.85; } /* Anna 2026-05-01 . linha "agora" estilo Gmail Calendar . cruza TODAS * as colunas visiveis da semana com bolinha vermelha posicionada na * coluna do dia atual. .agenda2-body precisa de position:relative pra * referenciar o top corretamente (linha recebe top:Xpx em px do grid). */ .agenda2-body { position: relative; } .agenda2-now-week { position: absolute; left: 64px; /* alinha com inicio das colunas de dia (apos coluna de hora) */ right: 0; height: 0; border-top: 2px solid #DC2626; z-index: 5; pointer-events: none; } .agenda2-now-dot { position: absolute; left: var(--dot-left, 0); top: -7px; width: 12px; height: 12px; background: #DC2626; border-radius: 50%; margin-left: -6px; box-shadow: 0 0 0 3px rgba(220,38,38,0.18); } /* Evento · mesmo estilo visual da view Dia (fundo pastel + borda esquerda * colorida + texto escuro). Mantem legibilidade e consistencia entre as * 3 views da agenda. */ .agenda2-event { position: absolute; border-radius: 5px; border: 1px solid rgba(11, 42, 74, 0.08); padding: 5px 8px; font-size: 11px; overflow: hidden; cursor: pointer; z-index: 2; transition: box-shadow 0.15s, transform 0.1s; color: var(--color-text); box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; } .agenda2-event:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); z-index: 20; /* Ao passar o mouse, o bloco "destaca" expandindo horizontalmente * pra cobrir blocos sobrepostos · ajuda ler titulos cortados em lanes */ min-width: 180px; } .agenda2-event-draggable { cursor: grab; } .agenda2-event-draggable:active { cursor: grabbing; } .agenda2-event-dragging { opacity: 0.75; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); z-index: 30; transition: none; cursor: grabbing; pointer-events: none; /* evita que move sobre outros blocos crie hover estranho */ } /* Handle de resize · 8px na borda inferior do bloco */ .agenda2-event-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; background: transparent; z-index: 2; } .agenda2-event-resize:hover { background: rgba(11, 42, 74, 0.12); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .agenda2-event-compact .agenda2-event-resize { height: 4px; /* blocos curtos · handle menor pra nao atrapalhar clique */ } .agenda2-event-time { font-size: 10px; color: var(--color-text-secondary); font-weight: 500; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; flex-shrink: 0; line-height: 1.1; } .agenda2-event-title { font-size: 12px; font-weight: 600; color: var(--color-text); overflow: hidden; line-height: 1.25; } .agenda2-event-meta { font-size: 10px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Densidade compact (<= 44px · consultas de 30min): * Layout em linha · hora inicial (sem range) + titulo na mesma linha. * Maximiza espaco horizontal pra caber nome do paciente. */ .agenda2-event-compact { flex-direction: row; align-items: center; gap: 6px; padding: 3px 6px 3px 8px; line-height: 1.2; } .agenda2-event-compact .agenda2-event-time { flex-shrink: 0; font-size: 10px; font-weight: 600; } .agenda2-event-compact .agenda2-event-title { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .agenda2-event-compact .agenda2-event-meta { display: none; } /* Densidade normal: titulo pode quebrar em ate 2 linhas · sem meta */ .agenda2-event-normal .agenda2-event-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Densidade full: titulo em 2 linhas + meta abaixo */ .agenda2-event-full .agenda2-event-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .agenda2-event-logo { display: inline-flex; align-items: center; margin-left: auto; } .agenda2-event-logo svg, .agenda2-event-logo img { width: 10px; height: 10px; } /* Cores: sem barrinha lateral · identidade do tipo APENAS via fundo pastel * + cor sutil do titulo. Horario sempre em cinza neutro para evitar a * impressao visual confusa de varios tons diferentes. */ /* Anna 2026-05-01 . paleta unica e VALIDA . cada tipo com cor distinta * (antes consulta e teleconsulta eram quase iguais). Borda esquerda * 3px na cor solida pra reforcar identificacao rapida. */ .agenda2-event-consulta { background: #DBEAFE; border-color: #93C5FD; border-left: 3px solid #3B82F6; } .agenda2-event-consulta .agenda2-event-title { color: #1E3A8A; } .agenda2-event-retorno { background: #D1FAE5; border-color: #6EE7B7; border-left: 3px solid #10B981; } .agenda2-event-retorno .agenda2-event-title { color: #065F46; } .agenda2-event-teleconsulta { background: #EDE9FE; border-color: #C4B5FD; border-left: 3px solid #8B5CF6; } .agenda2-event-teleconsulta .agenda2-event-title { color: #4C1D95; } .agenda2-event-primeira { background: #CFFAFE; border-color: #67E8F9; border-left: 3px solid #06B6D4; } .agenda2-event-primeira .agenda2-event-title { color: #155E75; } .agenda2-event-urgente { background: #FEE2E2; border-color: #FCA5A5; border-left: 3px solid #EF4444; } .agenda2-event-urgente .agenda2-event-title { color: #7F1D1D; font-weight: 700; } .agenda2-event-bloqueio { background: #F1F5F9; border-color: #94A3B8; border-left: 3px solid #64748B; } .agenda2-event-bloqueio .agenda2-event-title { color: #334155; font-style: italic; } /* Horario sempre cinza neutro · em todos os tipos · menos ruido visual */ .agenda2-event .agenda2-event-time { color: #64748B; } /* Legenda . Anna 2026-05-01 movida pro TOPO da agenda semana (antes do header) * pra ficar visivel sem precisar rolar. Estilo enxuto com border-bottom. */ .agenda2-legend { display: flex; align-items: center; gap: 20px; padding: 8px 16px; border-bottom: 1px solid #E5E7EB; background: #FAFAFA; font-size: 11px; color: var(--color-text-secondary); flex-wrap: wrap; } .agenda2-legend-top { margin: 0 0 8px 0; border-radius: 6px; border: 1px solid #E5E7EB; } .agenda2-legend-item { display: inline-flex; align-items: center; gap: 6px; } .agenda2-legend-dot { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid; box-sizing: border-box; } /* Legenda usa mesmas cores dos eventos */ .agenda2-legend-dot.agenda2-event-consulta { background: #DBEAFE; border-color: #93C5FD; } .agenda2-legend-dot.agenda2-event-retorno { background: #D1FAE5; border-color: #6EE7B7; } .agenda2-legend-dot.agenda2-event-teleconsulta { background: #EDE9FE; border-color: #C4B5FD; } .agenda2-legend-dot.agenda2-event-primeira { background: #CFFAFE; border-color: #67E8F9; } .agenda2-legend-dot.agenda2-event-urgente { background: #FEE2E2; border-color: #FCA5A5; } .agenda2-legend-dot.agenda2-event-bloqueio { background: #F1F5F9; border-color: #94A3B8; } @media (max-width: 960px) { .agenda2-toolbar { gap: 10px; } .agenda2-actions { width: 100%; margin-left: 0; flex-wrap: wrap; } } /* ======================================================================== PRONTUARIO LEAN · layout lightning + cards enxutos + chips de alerta Referencia visual: consultoria (McKinsey/BCG) · tipografia dominante, espaco branco, bordas discretas. ======================================================================== */ .lean-prontuario { max-width: 900px; margin: 0 auto; } /* Topbar com Path Lightning + botao do drawer */ .lean-topbar { display: flex; align-items: center; gap: 12px; margin: 8px 0 20px; } .lean-topbar > #lean-path-lightning { flex: 1; } .lean-drawer-btn { flex-shrink: 0; } /* Path Lightning (estilo Salesforce) · tema neutro */ .path-lightning { display: flex; gap: 2px; background: var(--color-bg-subtle); border-radius: 10px; padding: 4px; } .path-chevron { flex: 1; position: relative; padding: 8px 14px 8px 26px; font-size: 12px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; background: var(--color-surface); color: var(--color-text-secondary); transition: background 0.15s, color 0.15s; cursor: default; } .path-chevron:first-child { padding-left: 14px; border-radius: 8px 0 0 8px; } .path-chevron:last-child { border-radius: 0 8px 8px 0; } /* Seta que conecta os chevrons · pseudo-elemento triangular */ .path-chevron:not(:last-child)::after { content: ''; position: absolute; right: -12px; top: 0; bottom: 0; width: 0; height: 0; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 12px solid var(--color-surface); z-index: 2; transition: border-left-color 0.15s; } .path-chevron-label { font-weight: 600; font-size: 12px; letter-spacing: 0.1px; } .path-chevron-sub { font-size: 10px; color: var(--color-text-muted); margin-top: 1px; } /* Done · verde suave */ .path-chevron-done { background: var(--color-success-bg); color: var(--color-success); } .path-chevron-done .path-chevron-sub { color: var(--color-success); opacity: 0.85; } .path-chevron-done:not(:last-child)::after { border-left-color: var(--color-success-bg); } /* Current · destaque neutro (nao mais azul chapado) */ /* Current · azul suave em vez de preto */ .path-chevron-current { background: rgba(30, 74, 124, 0.10); color: #1E4A7C; font-weight: 600; } .path-chevron-current .path-chevron-sub { color: #1E4A7C; opacity: 0.8; font-weight: 400; } .path-chevron-current:not(:last-child)::after { border-left-color: rgba(30, 74, 124, 0.10); } /* Future · cinza mais sutil */ .path-chevron-future { background: var(--color-bg); color: var(--color-text-muted); } .path-chevron-future .path-chevron-sub { color: var(--color-text-muted); opacity: 0.7; } .path-chevron-future:not(:last-child)::after { border-left-color: var(--color-bg); } /* Atraso · fundo amarelo com label em vermelho */ .path-chevron-atraso { background: rgba(245, 158, 11, 0.15); color: #92400E; } .path-chevron-atraso .path-chevron-sub { color: #B91C1C; opacity: 1; font-weight: 600; } .path-chevron-atraso:not(:last-child)::after { border-left-color: rgba(245, 158, 11, 0.15); } /* Finalizado concluido · verde */ .path-chevron-done-final { background: rgba(16, 185, 129, 0.15); color: #047857; font-weight: 600; } .path-chevron-done-final .path-chevron-sub { color: #047857; opacity: 0.85; } .path-chevron-done-final:not(:last-child)::after { border-left-color: rgba(16, 185, 129, 0.15); } /* Dark · usa accents proprios */ html[data-theme="dark"] .path-chevron-done { background: rgba(52, 211, 153, 0.12); color: #6EE7B7; } html[data-theme="dark"] .path-chevron-done .path-chevron-sub { color: #6EE7B7; } html[data-theme="dark"] .path-chevron-done:not(:last-child)::after { border-left-color: rgba(52, 211, 153, 0.12); } html[data-theme="dark"] .path-chevron-current { background: rgba(226, 232, 240, 0.10); color: var(--color-text); } html[data-theme="dark"] .path-chevron-current .path-chevron-sub { color: var(--color-text); } html[data-theme="dark"] .path-chevron-current:not(:last-child)::after { border-left-color: rgba(226, 232, 240, 0.10); } html[data-theme="dark"] .path-chevron-atraso { background: rgba(251, 191, 36, 0.12); color: #FCD34D; } html[data-theme="dark"] .path-chevron-atraso .path-chevron-sub { color: #FCA5A5; } html[data-theme="dark"] .path-chevron-atraso:not(:last-child)::after { border-left-color: rgba(251, 191, 36, 0.12); } html[data-theme="dark"] .path-chevron-done-final { background: rgba(52, 211, 153, 0.18); color: #6EE7B7; } html[data-theme="dark"] .path-chevron-done-final .path-chevron-sub { color: #6EE7B7; } html[data-theme="dark"] .path-chevron-done-final:not(:last-child)::after { border-left-color: rgba(52, 211, 153, 0.18); } /* Header do paciente · horizontal, avatar + info + chips */ .lean-header-paciente { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 16px; } .lean-header-avatar { width: 44px; height: 44px; border-radius: 50%; background: #DBE7F4; color: #1E4A7C; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; flex-shrink: 0; } .lean-header-info { flex: 1; min-width: 0; } .lean-header-nome { font-weight: 600; font-size: 15px; color: var(--color-text); margin-bottom: 2px; } .lean-header-nome a { color: inherit; text-decoration: none; } .lean-header-nome a:hover { text-decoration: underline; } .lean-header-meta { font-size: 12px; color: var(--color-text-secondary); display: flex; gap: 6px; flex-wrap: wrap; } .lean-header-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 50%; } /* Chips de alerta · alergia vermelho, cronica amarelo, med continua azul claro */ .lean-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 500; white-space: nowrap; } /* Chips · pastel suave com suporte dark via rgba */ .lean-chip-alergia { background: rgba(220, 38, 38, 0.10); color: #991B1B; } .lean-chip-cronica { background: rgba(245, 158, 11, 0.12); color: #92400E; } .lean-chip-med { background: rgba(30, 74, 124, 0.10); color: #1E4A7C; } .lean-chip-habito { background: var(--color-bg-subtle); color: var(--color-text-secondary); padding: 3px 10px; } html[data-theme="dark"] .lean-chip-alergia { background: rgba(252, 165, 165, 0.10); color: #FCA5A5; } html[data-theme="dark"] .lean-chip-cronica { background: rgba(252, 211, 77, 0.10); color: #FCD34D; } html[data-theme="dark"] .lean-chip-med { background: rgba(226, 232, 240, 0.08); color: var(--color-text); } /* Botao X discreto no chip · remove item do cadastro */ .lean-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: none; background: transparent; color: inherit; opacity: 0.5; border-radius: 50%; cursor: pointer; transition: opacity 0.12s, background 0.12s; } .lean-chip-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); } .lean-chip-x svg { width: 9px; height: 9px; } /* Grupos de chips (um por tipo) · permite botao + no final */ .lean-header-chips-grupos { display: flex; flex-direction: column; gap: 4px; max-width: 55%; } .lean-chip-grupo { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; } .lean-chip-add { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; font-size: 11px; font-weight: 500; background: var(--color-bg-subtle); color: var(--color-text-secondary); border: 1px dashed var(--color-border); border-radius: 12px; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } .lean-chip-add:hover { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); } .lean-chip-add svg { width: 10px; height: 10px; } .lean-chip-alergia-add:hover { background: rgba(220, 38, 38, 0.10); border-color: #DC2626; color: #991B1B; } .lean-chip-cronica-add:hover { background: rgba(245, 158, 11, 0.12); border-color: #F59E0B; color: #92400E; } .lean-chip-med-add:hover { background: rgba(30, 74, 124, 0.10); border-color: #1E4A7C; color: #1E4A7C; } html[data-theme="dark"] .lean-chip-alergia-add:hover { color: #FCA5A5; border-color: #FCA5A5; } html[data-theme="dark"] .lean-chip-cronica-add:hover { color: #FCD34D; border-color: #FCD34D; } html[data-theme="dark"] .lean-chip-med-add:hover { color: var(--color-text); border-color: var(--color-border-strong); } /* Cards enxutos (consulta, avaliacao) */ .lean-card { margin-bottom: 14px; } .lean-card .card-header { padding-bottom: 8px; } .lean-card .card-title { font-size: 14px; font-weight: 600; letter-spacing: 0.2px; color: #0B2A4A; text-transform: none; } .lean-textarea-prosa { min-height: 80px; line-height: 1.55; } .lean-textarea-exame { min-height: 76px; line-height: 1.5; } .lean-textarea-obs { min-height: 76px; } /* Lista de prescricao · estilo receita · cada medicamento eh um bloco vertical com espaco generoso entre itens (legibilidade clinica) */ .lean-prescricao-list { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; margin-bottom: 6px; } .lean-prescricao-vazia { padding: 14px 12px; background: #F8FAFC; border: 1px dashed #E2E8F0; border-radius: 8px; font-size: 12px; color: #64748B; font-style: italic; text-align: center; } .lean-prescricao-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 6px; } .lean-prescricao-cabeca { display: flex; align-items: center; gap: 8px; } .lean-prescricao-corpo { display: flex; flex-direction: column; gap: 2px; padding-left: 26px; } /* Numeracao sequencial dos medicamentos · clean, tabular, sem cor forte */ .lean-prescricao-num { display: inline-flex; align-items: baseline; justify-content: flex-end; min-width: 22px; padding-top: 2px; color: #94A3B8; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; flex-shrink: 0; } .lean-prescricao-info { flex: 1; min-width: 0; } .lean-prescricao-med { flex: 1; font-weight: 600; color: #0B2A4A; font-size: 14px; } .lean-prescricao-pos-input, .lean-prescricao-obs-input, .lean-prescricao-qtd-input { width: 100%; border: none; background: transparent; color: var(--color-text-secondary); font-size: 13px; padding: 2px 0; font-family: inherit; line-height: 1.45; outline: none; resize: none; overflow: hidden; border-bottom: 1px dashed transparent; transition: border-color 0.15s; } .lean-prescricao-pos-input:hover, .lean-prescricao-pos-input:focus, .lean-prescricao-obs-input:hover, .lean-prescricao-obs-input:focus, .lean-prescricao-qtd-input:hover, .lean-prescricao-qtd-input:focus { border-bottom-color: var(--color-border-strong); color: var(--color-text); } .lean-prescricao-pos-input::placeholder, .lean-prescricao-obs-input::placeholder, .lean-prescricao-qtd-input::placeholder { color: var(--color-text-muted); font-style: italic; } .lean-prescricao-obs-input, .lean-prescricao-qtd-input { font-size: 12px; color: var(--color-text-muted); } .lean-prescricao-sugerir { color: #1E4A7C; padding: 4px 10px; font-size: 12px; } .lean-prescricao-sugerir:hover { background: #EEF4FC; } /* Popover de posologia · lista de sugestoes do historico */ .pop-posologia-secao { margin-bottom: 18px; } .pop-posologia-secao:last-child { margin-bottom: 0; } .pop-posologia-secao-titulo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #64748B; margin-bottom: 8px; } .pop-posologia-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; margin-bottom: 6px; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .pop-posologia-item:hover { background: #EEF4FC; border-color: #B8CDE3; } .pop-posologia-texto { flex: 1; color: #0B2A4A; font-size: 13px; } .pop-posologia-meta { color: #64748B; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; } .lean-prescricao-remover { color: #94A3B8; padding: 4px 8px; } .lean-prescricao-remover:hover { color: #B91C1C; background: #FEE2E2; } /* Lista de atestados · mesmo padrao visual */ .lean-atestados-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .lean-atestado-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 6px; } .lean-atestado-cabeca { display: flex; align-items: center; gap: 10px; } .lean-atestado-dias { flex: 1; font-size: 13px; color: #0B2A4A; } .lean-atestado-dias strong { font-weight: 700; color: #185FA5; } .lean-atestado-just { padding-left: 26px; font-size: 12px; color: #64748B; line-height: 1.45; font-style: italic; } /* Lista de exames solicitados · mesmo padrao da prescricao */ .lean-exames-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .lean-exames-vazia { padding: 12px; background: #F8FAFC; border: 1px dashed #E2E8F0; border-radius: 8px; font-size: 12px; color: #64748B; font-style: italic; text-align: center; } .lean-exame-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 6px; } .lean-exame-cabeca { display: flex; align-items: center; gap: 8px; } .lean-exame-nome { flex: 1; font-weight: 600; color: #0B2A4A; font-size: 14px; } .lean-exame-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; color: #1E4A7C; padding: 2px 8px; background: #DBE7F4; border-radius: 4px; flex-shrink: 0; } .lean-exame-corpo { padding-left: 26px; } /* Acoes inline (medicamento/exame/atestado/mais) . Anna 2026-05-02 reorganizado: 3 botoes principais + dropdown "mais" com tudo o resto agrupado (documentos extras + modulos por especialidade). */ .lean-inline-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-border, #E5E7EB); } .lean-inline-acoes .btn { color: #1E4A7C; font-size: 12px; font-weight: 500; } .lean-inline-sep { color: #CBD5E1; font-size: 12px; user-select: none; } /* Titulo de secao dentro de dropdown (estilo "Documentos", "Modulos") */ .dropdown-titulo { padding: 8px 14px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #94A3B8; font-weight: 600; } /* Navegacao do passo · Cancelar na esquerda, acoes principais na direita */ .lean-step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-border, #E5E7EB); } .lean-step-nav-right { display: flex; gap: 8px; } /* Indicador de autosave · discreto */ .lean-autosave-indicator { margin-top: 10px; font-size: 11px; color: #94A3B8; text-align: right; font-style: italic; } @media (max-width: 760px) { .lean-header-paciente { flex-wrap: wrap; } .lean-header-chips { max-width: 100%; justify-content: flex-start; } .path-chevron-sub { display: none; } .path-chevron { min-height: 36px; padding: 6px 10px 6px 22px; } .path-chevron:not(:last-child)::after { border-top: 18px solid transparent; border-bottom: 18px solid transparent; } } /* ======================================================================== Banner de bloqueio de agenda · aparece no topo da Fila se data bloqueada ======================================================================== */ .bloqueio-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #FEF3C7; border: 1px solid #FDE68A; border-left: 4px solid #D97706; border-radius: 8px; margin-bottom: 10px; color: #78350F; } .bloqueio-banner svg { width: 18px; height: 18px; color: #B45309; flex-shrink: 0; } .bloqueio-banner > div { flex: 1; } .bloqueio-banner-titulo { font-weight: 600; font-size: 13px; } .bloqueio-banner-sub { font-size: 11px; color: #92400E; margin-top: 2px; } /* ======================================================================== Pendências da secretária · bloco discreto no topo da Fila ======================================================================== */ .pendencias-secretaria { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; } .pendencias-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #92400E; margin-bottom: 6px; } .pendencias-head .pendencias-icon { display: inline-flex; color: #B45309; } .pendencias-head .pendencias-icon svg { width: 13px; height: 13px; } .pendencias-head strong { font-weight: 700; } .pendencias-lista { display: flex; flex-direction: column; gap: 4px; } .pendencias-item { display: block; width: 100%; text-align: left; padding: 7px 10px; background: #FFFFFF; border: 1px solid #FDE68A; border-radius: 6px; font-size: 12px; color: #0B2A4A; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .pendencias-item:hover { background: #FEF3C7; border-color: #F59E0B; } .pendencias-item strong { color: #92400E; font-weight: 700; } .pendencias-item-vermelho { border-color: #FCA5A5; } .pendencias-item-vermelho strong { color: #991B1B; } .pendencias-item-vermelho:hover { background: #FEE2E2; border-color: #DC2626; } /* Destaque temporario quando clica numa pendencia · pulso suave */ .agenda-row-destacado { box-shadow: 0 0 0 2px #F59E0B, 0 4px 16px rgba(245, 158, 11, 0.25); transition: box-shadow 0.3s; } /* ======================================================================== Mural do dia · intercom medico <-> secretaria ======================================================================== */ .mural-floating-btn { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%; background: #185FA5; color: #FFFFFF; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(11, 42, 74, 0.25); z-index: 70; transition: transform 0.15s, box-shadow 0.15s; } .mural-floating-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(11, 42, 74, 0.35); } .mural-floating-btn svg { width: 20px; height: 20px; } .mural-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px; background: #DC2626; color: #FFFFFF; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; } #mural-overlay { position: fixed; inset: 0; background: rgba(11, 42, 74, 0.2); opacity: 0; transition: opacity 0.22s; z-index: 85; } #mural-overlay.mural-overlay-visivel { opacity: 1; } #mural-panel { position: fixed; top: 0; right: 0; width: min(380px, 92vw); height: 100vh; background: #FFFFFF; border-left: 1px solid #E5E7EB; box-shadow: -8px 0 32px rgba(11, 42, 74, 0.08); transform: translateX(100%); transition: transform 0.22s ease-out; z-index: 95; display: flex; flex-direction: column; } #mural-panel.mural-aberto { transform: translateX(0); } .mural-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #E5E7EB; flex-shrink: 0; } .mural-titulo { font-size: 14px; font-weight: 600; color: #0B2A4A; } .mural-sub { font-size: 11px; color: #64748B; margin-top: 2px; } .mural-body { flex: 1; overflow-y: auto; padding: 14px 18px; background: #F9FAFB; display: flex; flex-direction: column; gap: 8px; } .mural-item { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px; padding: 8px 12px; max-width: 90%; align-self: flex-start; } .mural-item-meu { align-self: flex-end; background: #DBE7F4; border-color: #B8CDE3; } .mural-item-head { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: #64748B; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.3px; } .mural-item-autor { font-weight: 600; color: #475569; } .mural-item-msg { font-size: 13px; color: #0B2A4A; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; } .mural-composer { padding: 12px 18px; border-top: 1px solid #E5E7EB; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; background: #FFFFFF; } .mural-quick-row { display: flex; gap: 6px; flex-wrap: wrap; } .mural-quick { flex: 0 0 auto; padding: 4px 10px; font-size: 11px; font-weight: 500; color: #1E4A7C; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .mural-quick:hover { background: #EEF4FC; border-color: #B8CDE3; } .mural-composer textarea { resize: none; font-size: 13px; } /* ======================================================================== CRUCIAL BAR da Fila do Dia · informacoes que o medico bate o olho ======================================================================== */ .crucial-urgente { background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; } .crucial-urgente-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #991B1B; margin-bottom: 6px; } .crucial-urgente-head strong { font-weight: 700; } .crucial-urgente-icon { display: inline-flex; color: #B91C1C; } .crucial-urgente-icon svg { width: 14px; height: 14px; } .crucial-urgente-lista { display: flex; flex-direction: column; gap: 4px; } .crucial-urgente-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #0B2A4A; padding-left: 22px; } .crucial-urgente-tempo { font-size: 12px; color: #991B1B; font-variant-numeric: tabular-nums; font-weight: 500; } /* Anna 2026-05-02 . crucial-urgente-clicavel torna o item clicavel (vai * pra agenda destacando o paciente). Hover sutil pra indicar interacao. */ .crucial-urgente-clicavel { transition: background .15s; border-radius: 4px; padding-right: 8px; } .crucial-urgente-clicavel:hover { background: rgba(11, 42, 74, 0.06); } .crucial-urgente-tempo.tempo-atencao { color: #B45309; } .crucial-urgente-tempo.tempo-critico { color: #B91C1C; font-weight: 600; } /* Resumo discreto do dia */ .crucial-resumo { padding: 8px 14px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 8px; font-size: 12px; color: #64748B; margin-bottom: 12px; letter-spacing: 0.2px; } .crucial-resumo strong { color: #0B2A4A; font-weight: 700; } /* ======================================================================== Chips de status expandidos · mapeamento visual por estado ======================================================================== */ /* Status · apenas texto colorido com dot · sem caixa/borda/fundo */ .status-pill.status-agendado { color: #475569; } .status-pill.status-agendado::before { background: #94A3B8; } .status-pill.status-confirmado { color: #1E40AF; } .status-pill.status-confirmado::before { background: #3B82F6; } .status-pill.status-aguardando { color: #166534; } .status-pill.status-aguardando::before { background: #22C55E; } .status-pill.status-em-atendimento { color: #B45309; } .status-pill.status-em-atendimento::before { background: #F59E0B; } .status-pill.status-realizado { color: #065F46; } .status-pill.status-realizado::before { background: #10B981; } .status-pill.status-cancelado { color: #6B7280; text-decoration: line-through; } .status-pill.status-cancelado::before { background: #D1D5DB; } .status-pill.status-faltou { color: #7F1D1D; } .status-pill.status-faltou::before { background: #DC2626; } .status-pill.status-atrasado { color: #991B1B; } .status-pill.status-atrasado::before { background: #EF4444; } .status-tempo { font-variant-numeric: tabular-nums; opacity: 0.85; font-weight: 500; } /* Badges Particular vs Plano · medico bate o olho e diferencia */ .conv-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 500; margin-left: 6px; vertical-align: middle; letter-spacing: 0.2px; white-space: nowrap; } .conv-badge-particular { background: #F1F5F9; color: #475569; border: 1px solid #E2E8F0; } .conv-badge-plano { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; } /* ======================================================================== Procedimentos TUSS no agendamento · busca + lista ======================================================================== */ .proc-busca-wrap { position: relative; } .proc-sugestoes { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 20; max-height: 280px; overflow-y: auto; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 8px 24px rgba(11, 42, 74, 0.12); } .proc-sugestao { display: block; width: 100%; text-align: left; padding: 10px 14px; background: transparent; border: none; border-bottom: 1px solid #F1F5F9; cursor: pointer; transition: background 0.1s; } .proc-sugestao:last-child { border-bottom: none; } .proc-sugestao:hover { background: #EEF4FC; } .proc-sugestao-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; } .proc-sugestao-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; color: #1E4A7C; } .proc-sugestao-cat { font-size: 10px; padding: 1px 8px; border-radius: 10px; background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0; } .proc-sugestao-nome { font-size: 13px; color: var(--color-text); line-height: 1.35; } .proc-sugestao-vazio { padding: 14px; font-size: 12.5px; color: #64748B; text-align: center; font-style: italic; } .proc-lista { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .proc-lista-vazia { padding: 14px 12px; background: #F8FAFC; border: 1px dashed #E2E8F0; border-radius: 8px; font-size: 12px; color: #64748B; font-style: italic; text-align: center; } .proc-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px; } .proc-item-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; color: #1E4A7C; padding: 2px 8px; background: #DBE7F4; border-radius: 4px; flex-shrink: 0; } .proc-item-nome { flex: 1; font-size: 13px; color: var(--color-text); } .proc-item-remover { color: #94A3B8; padding: 4px 8px; } .proc-item-remover:hover { color: #B91C1C; background: #FEE2E2; } /* ======================================================================== Sinais vitais · linha compacta grid auto-fit ======================================================================== */ .sinais-vitais-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .sinal-vital { display: flex; align-items: center; gap: 6px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px; padding: 6px 10px; min-height: 36px; } .sinal-vital label { font-size: 11px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.4px; margin: 0; flex-shrink: 0; } .sinal-vital input { width: 100%; min-width: 0; border: none; background: transparent; padding: 2px 0; font-size: 13px; color: #0B2A4A; font-variant-numeric: tabular-nums; outline: none; } .sinal-vital input:focus { color: #185FA5; } .sinal-vital input::placeholder { color: #CBD5E1; } .sv-unit { font-size: 10px; color: #94A3B8; font-weight: 500; flex-shrink: 0; margin-left: auto; } /* ======================================================================== CIDs secundários · bloco com botao remover na direita ======================================================================== */ .cid-secundario-row { position: relative; margin-top: 8px; } .cid-secundario-row .cid-autocomplete-wrap { margin-bottom: 0; } .cid-sec-remover { position: absolute; top: 0; right: 0; color: #94A3B8; padding: 4px 8px; } .cid-sec-remover:hover { color: #B91C1C; background: #FEE2E2; } /* ======================================================================== Drawer lateral real · slide-in da direita ======================================================================== */ #lean-drawer-overlay { position: fixed; inset: 0; background: rgba(11, 42, 74, 0.25); opacity: 0; transition: opacity 0.22s; z-index: 80; } #lean-drawer-overlay.lean-drawer-overlay-visivel { opacity: 1; } #lean-drawer { position: fixed; top: 0; right: 0; width: min(420px, 92vw); height: 100vh; background: #FFFFFF; border-left: 1px solid #E5E7EB; box-shadow: -8px 0 32px rgba(11, 42, 74, 0.08); transform: translateX(100%); transition: transform 0.25s ease-out; z-index: 90; display: flex; flex-direction: column; } #lean-drawer.lean-drawer-aberto { transform: translateX(0); } .lean-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #E5E7EB; flex-shrink: 0; } .lean-drawer-titulo { font-size: 15px; font-weight: 600; color: #0B2A4A; } .lean-drawer-sub { font-size: 12px; color: #64748B; margin-top: 2px; } .lean-drawer-body { flex: 1; overflow-y: auto; padding: 6px 20px 24px; } .lean-drawer-secao { padding: 14px 0; border-bottom: 1px solid #F1F5F9; } .lean-drawer-secao:last-child { border-bottom: none; } .lean-drawer-secao-titulo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #64748B; margin-bottom: 10px; } .lean-drawer-item { padding: 8px 12px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px; margin-bottom: 6px; } .lean-drawer-item:last-child { margin-bottom: 0; } .lean-drawer-item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; } .lean-drawer-item-corpo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .lean-drawer-meds { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .lean-drawer-med { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; background: #fff; border: 1px solid var(--color-border); border-radius: 4px; } .lean-drawer-med-texto { flex: 1; min-width: 0; overflow-wrap: break-word; } /* ======================================================================== Financeiro do agendamento · consulta + procedimentos + desconto + taxa ======================================================================== */ .financeiro-form { padding: 12px 14px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 8px; } .financeiro-total { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; margin-top: 10px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; } .financeiro-total-label { font-size: 12px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } .financeiro-total-valor { font-size: 18px; font-weight: 700; color: var(--color-text); } .proc-item-valor-wrap { display: flex; align-items: center; gap: 4px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 4px; padding: 2px 6px; } .proc-item-valor { width: 80px; border: none; background: transparent; font-size: 13px; color: var(--color-text); padding: 2px; text-align: right; } .proc-item-valor:focus { outline: none; } .proc-sugestao-criar { border-top: 1px dashed var(--color-border); background: var(--color-bg-subtle); } .proc-sugestao-criar:hover { background: #EFF6FF; } /* Modal financeiro detalhado · consulta + procedimentos + outros + taxa + pagamento */ .fin-secao { padding: 12px 14px; margin-bottom: 12px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 8px; } .fin-secao-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 8px; } .fin-linha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fin-proc-linha, .fin-outro-linha, .fin-pag-linha { display: grid; align-items: end; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--color-border); } .fin-proc-linha { grid-template-columns: 1fr 130px 130px; } .fin-outro-linha { grid-template-columns: 1fr 130px auto; } .fin-pag-linha { grid-template-columns: 1fr 150px auto; } .fin-proc-linha:last-child, .fin-outro-linha:last-child, .fin-pag-linha:last-child { border-bottom: none; } .fin-proc-nome { font-size: 13px; color: var(--color-text); line-height: 1.4; } .fin-proc-valor, .fin-proc-desc { display: flex; flex-direction: column; gap: 3px; } .fin-totais { padding: 12px 14px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; } .fin-totais-linha { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--color-text-muted); } .fin-totais-total { margin-top: 6px; padding-top: 10px; border-top: 2px solid var(--color-border); font-size: 16px; font-weight: 700; color: var(--color-text); } .fin-pag-ok { color: #166534; font-weight: 600; } .fin-pag-falta { color: #B45309; font-weight: 600; } .fin-pag-sobra { color: #1E4A7C; font-weight: 600; } /* Painel · business intelligence · grid 2 colunas */ .bi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; margin-top: 16px; margin-bottom: 16px; } .bi-bars { display: flex; flex-direction: column; gap: 10px; } .bi-bar-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; } .bi-bar-label { font-size: 13px; font-weight: 500; color: var(--color-text); } .bi-bar-track { height: 18px; background: var(--color-bg-subtle); border-radius: 4px; overflow: hidden; border: 1px solid var(--color-border); } .bi-bar-fill { height: 100%; background: linear-gradient(90deg, #1E4A7C, #2563EB); border-radius: 3px; } .bi-bar-valor { font-size: 12px; color: var(--color-text); font-weight: 600; min-width: 100px; text-align: right; font-variant-numeric: tabular-nums; } /* Modal de dados do paciente · abre por cima da consulta sem redirect */ .dados-paciente-modal { display: flex; flex-direction: column; gap: 14px; } .dados-paciente-head { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); } .dados-paciente-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .dados-paciente-bloco { padding: 10px 12px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 6px; } .dados-paciente-secao { padding: 10px 12px; border-top: 1px solid var(--color-border); padding-top: 12px; } .dados-paciente-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-muted); font-weight: 600; margin-bottom: 6px; } /* Banner de retorno · aparece no topo do prontuario quando e retorno */ .banner-retorno { margin-bottom: 14px; } .banner-retorno-inner { padding: 12px 14px; background: #EFF6FF; border: 1px solid #BFDBFE; border-left: 3px solid #1E4A7C; border-radius: 8px; color: #0B2A4A; } html[data-theme="dark"] .banner-retorno-inner { background: #1E3A5F; border-color: #2F5C8A; color: #DBE8F7; } .banner-retorno-spinner { padding: 10px 14px; font-size: 13px; color: var(--color-text-muted); background: var(--color-bg-subtle); border-radius: 8px; } .banner-retorno-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; } .banner-retorno-titulo { font-weight: 600; font-size: 13px; } .banner-retorno-sub { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; } .banner-retorno-queixa { font-size: 13px; margin: 6px 0; line-height: 1.5; } .banner-retorno-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } /* ======================================================================== Pediatria · marcos, vacinas, grafico de crescimento ======================================================================== */ .pediatria-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 14px; background: var(--color-bg-subtle); border-radius: 8px; margin-bottom: 12px; flex-wrap: wrap; } .pediatria-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); margin-bottom: 16px; } .pediatria-tab { padding: 10px 14px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: 13px; color: var(--color-text-muted); font-weight: 500; } .pediatria-tab:hover { color: var(--color-text); } .pediatria-tab-ativa { color: var(--color-text); border-bottom-color: var(--color-accent, #0B2A4A); font-weight: 600; } .pediatria-conteudo { max-height: 62vh; overflow-y: auto; padding-right: 4px; } .pediatria-secao { margin-bottom: 18px; } .pediatria-secao-titulo { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); } .pediatria-marco-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 4px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); } .pediatria-marco-texto { font-size: 13px; color: var(--color-text); flex: 1; } .pediatria-marco-acoes { display: flex; gap: 4px; flex-shrink: 0; } .pediatria-marco-btn { padding: 4px 10px; font-size: 12px; font-weight: 500; border-radius: 4px; cursor: pointer; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text-muted); transition: background 0.1s, border-color 0.1s; } .pediatria-marco-btn:hover { border-color: var(--color-text-muted); } .pediatria-marco-btn-ok.pediatria-marco-btn-on { background: #DCFCE7; color: #166534; border-color: #86EFAC; font-weight: 600; } .pediatria-marco-btn-atraso.pediatria-marco-btn-on { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; font-weight: 600; } .pediatria-marco-btn-nao.pediatria-marco-btn-on { background: #F1F5F9; color: #475569; border-color: #CBD5E1; font-weight: 600; } .pediatria-vacina-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 5px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); } .pediatria-vacina-aplicada { background: #F0FDF4; border-color: #BBF7D0; } .pediatria-vacina-texto { flex: 1; min-width: 0; } .pediatria-medida-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .pediatria-grafico-tabs { display: flex; gap: 4px; margin: 8px 0; background: var(--color-bg-subtle); padding: 4px; border-radius: 8px; flex-wrap: wrap; } .pediatria-grafico-tab { padding: 6px 12px; background: none; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--color-text-muted); font-weight: 500; } .pediatria-grafico-tab-ativa { background: var(--color-bg); color: var(--color-text); font-weight: 600; } .ped-bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; border: 1.5px solid white; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); } /* Botao de ditado · vermelho pulsando enquanto ativa */ .btn-ditando { background: #FEE2E2 !important; color: #B91C1C !important; border-color: #FCA5A5 !important; font-weight: 600; animation: pulseDitando 1.4s ease-in-out infinite; } @keyframes pulseDitando { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); } } /* Especialidades · botoes de exames pre-natal por trimestre */ .exame-pre-natal-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; text-align: left; transition: all 0.1s; font-size: 12px; } .exame-pre-natal-btn:hover { border-color: var(--color-text-muted); background: var(--color-bg-subtle); } .exame-pre-natal-cat { font-size: 9px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; flex-shrink: 0; } .exame-pre-natal-cat-sangue { background: #FEE2E2; color: #B91C1C; } .exame-pre-natal-cat-sorologia { background: #FEF3C7; color: #92400E; } .exame-pre-natal-cat-urina { background: #FEF9C3; color: #78350F; } .exame-pre-natal-cat-imagem { background: #DBEAFE; color: #1E40AF; } .exame-pre-natal-cat-ginecologico { background: #F3E8FF; color: #6D28D9; } .exame-pre-natal-nome { color: var(--color-text); flex: 1; line-height: 1.4; } /* Catalogo dermato */ .dermato-itens { display: flex; flex-direction: column; gap: 6px; } .dermato-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; } .dermato-item-info { flex: 1; min-width: 0; } .dermato-item-nome { font-weight: 600; font-size: 13px; color: var(--color-text); } .dermato-item-marca { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; } .dermato-item-uso { font-size: 12px; color: var(--color-text); margin-top: 4px; line-height: 1.4; } /* Sugestao de paciente da lista de espera apos cancelamento */ .we-sugestao { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 6px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 6px; } .pediatria-grafico-svg { display: block; width: 100%; height: auto; max-height: 460px; aspect-ratio: 760 / 380; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; padding: 6px; } /* Resumo pediatrico na ficha do paciente */ .ped-resumo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .ped-resumo-bloco { padding: 12px 14px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 8px; } .ped-resumo-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 8px; } .ped-resumo-chips { display: flex; flex-wrap: wrap; gap: 4px; } .ped-chip { font-size: 12px; padding: 3px 8px; border-radius: 12px; font-weight: 500; } .ped-chip-ok { background: #DCFCE7; color: #166534; } .ped-chip-alerta { background: #FEE2E2; color: #B91C1C; } .ped-chip-pendente { background: #F1F5F9; color: #475569; } .ped-atrasadas-lista { margin-top: 8px; font-size: 12px; } .ped-atrasada-item { padding: 2px 0; color: var(--color-text); } .ped-resumo-med-head { font-size: 11px; color: var(--color-text-muted); margin-bottom: 4px; } .ped-resumo-med-body { font-size: 13px; color: var(--color-text); line-height: 1.6; } /* Documentos emitidos · agrupados por tipo na ficha do paciente */ .doc-grupo { margin-bottom: 18px; } .doc-grupo:last-child { margin-bottom: 0; } .doc-grupo-head { padding-bottom: 6px; border-bottom: 1px solid var(--color-border); margin-bottom: 8px; } .doc-grupo-titulo { font-size: 13px; font-weight: 600; color: var(--color-text); } /* ======================================================================== Evolução clínica · gráficos SVG minimalistas na ficha do paciente ======================================================================== */ .evolucao-charts { display: flex; flex-direction: column; gap: 16px; } .evolucao-chart { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px; padding: 12px; } .evolucao-chart-titulo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #64748B; margin-bottom: 8px; } .evolucao-chart-svg { width: 100%; height: auto; display: block; } .evolucao-legenda { display: flex; gap: 14px; justify-content: flex-end; margin-top: 6px; font-size: 11px; color: #475569; } .evolucao-legenda-item { display: inline-flex; align-items: center; gap: 5px; } .evolucao-legenda-cor { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } /* ======================================================================== Templates de texto · botao Modelos + cards no modal ======================================================================== */ .lean-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .lean-tpl-btn { color: #64748B; padding: 2px 10px; font-size: 11px; font-weight: 500; border: 1px solid #E2E8F0; border-radius: 12px; background: transparent; } .lean-tpl-btn:hover { color: #185FA5; border-color: #B8CDE3; background: #EEF4FC; } .tpl-item { padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 8px; margin-bottom: 8px; background: #FFFFFF; } .tpl-item:last-child { margin-bottom: 0; } .tpl-item-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; } .tpl-item-titulo { font-weight: 600; color: #0B2A4A; font-size: 13px; } .tpl-item-acoes { display: flex; gap: 4px; flex-shrink: 0; } .tpl-item-preview { color: #64748B; font-size: 12px; line-height: 1.45; white-space: pre-wrap; } /* ======================================================================== Busca global (Ctrl+K) · overlay centralizado ======================================================================== */ .busca-global-overlay { position: fixed; inset: 0; background: rgba(11, 42, 74, 0.35); display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; z-index: 100; animation: busca-fade 0.15s ease-out; } @keyframes busca-fade { from { opacity: 0; } to { opacity: 1; } } .busca-global-modal { width: min(600px, 92vw); background: #FFFFFF; border-radius: 12px; box-shadow: 0 20px 60px rgba(11, 42, 74, 0.25); overflow: hidden; max-height: 70vh; display: flex; flex-direction: column; } .busca-global-input-wrap { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid #E5E7EB; gap: 10px; } .busca-global-input { flex: 1; border: none; outline: none; font-size: 15px; color: #0B2A4A; background: transparent; } .busca-global-input::placeholder { color: #94A3B8; } .busca-global-shortcut { font-size: 10px; color: #64748B; padding: 2px 6px; border: 1px solid #E2E8F0; border-radius: 4px; background: #F8FAFC; font-family: ui-monospace, monospace; } .busca-global-results { overflow-y: auto; padding: 8px 12px 14px; } .busca-global-dica, .busca-global-vazio { padding: 24px 12px; text-align: center; font-size: 13px; color: #64748B; font-style: italic; } .busca-global-secao { padding: 8px 0; } .busca-global-secao-titulo { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #94A3B8; padding: 4px 8px; margin-bottom: 2px; } .busca-global-item { display: block; padding: 8px 12px; border-radius: 6px; text-decoration: none; color: inherit; transition: background 0.1s; } .busca-global-item:hover { background: #EEF4FC; } .busca-global-item-nome { font-weight: 600; font-size: 13px; color: #0B2A4A; } .busca-global-item-sub { font-size: 11px; color: #64748B; margin-top: 2px; } /* ======================================================================== Timeline clínica · linha vertical com bullets (ficha do paciente) ======================================================================== */ .timeline-clinica { list-style: none; padding: 8px 0 8px 22px; margin: 0; position: relative; } .timeline-clinica::before { content: ''; position: absolute; left: 28px; top: 14px; bottom: 14px; width: 2px; background: var(--color-border); } .timeline-clinica .timeline-item { position: relative; padding: 6px 0 14px 28px; border-bottom: none; display: block; } .timeline-clinica .timeline-item:last-child { padding-bottom: 4px; } .timeline-clinica .timeline-dot { position: absolute; left: 2px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border-strong); z-index: 1; padding: 0; } .timeline-item.timeline-finalizado .timeline-dot { border-color: var(--color-success); background: var(--color-success-bg); } .timeline-item.timeline-rascunho .timeline-dot { border-color: var(--color-warning); background: var(--color-warning-bg); } .timeline-conteudo { min-width: 0; } .timeline-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .timeline-data { font-weight: 600; font-size: 13px; color: var(--color-text); text-decoration: none; } .timeline-data:hover { text-decoration: underline; } .timeline-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Fila do Dia · estado vazio */ .fila-dia-vazia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 80px 24px; text-align: center; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: 12px; margin-top: 16px; } .fila-dia-vazia-icon { opacity: 0.35; color: var(--color-text-muted); } .fila-dia-vazia-icon svg { width: 36px; height: 36px; } .fila-dia-vazia-titulo { font-weight: 600; color: #0B2A4A; font-size: 14px; } .fila-dia-vazia-sub { font-size: 12px; color: #64748B; max-width: 360px; line-height: 1.5; } .fila-dia-vazia-sub a { color: #1E4A7C; } /* ========== PREFERENCIAS DE TEMA · cards de preview claro/escuro ========== Usado em /configuracoes. Cada opcao tem um preview em miniatura. */ .tema-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .tema-opcao { display: block; width: 100%; padding: 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: border-color 0.15s, background 0.15s; position: relative; background: var(--color-surface); font-family: inherit; text-align: left; color: inherit; } .tema-opcao:hover { border-color: var(--color-border-strong); } .tema-opcao-ativa { border-color: var(--color-primary); background: var(--color-primary-subtle); } .tema-opcao-check { position: absolute; top: 10px; right: 12px; font-size: 16px; color: var(--color-primary); line-height: 1; } .tema-preview { width: 100%; height: 72px; border-radius: 6px; overflow: hidden; border: 1px solid var(--color-border); margin-bottom: 10px; } .tema-preview-light { background: #FFFFFF; } .tema-preview-light .tema-preview-top { background: #F5F7FA; border-bottom: 1px solid #E5E7EB; } .tema-preview-light .tema-preview-linha { background: #E5E7EB; } .tema-preview-dark { background: #0F172A; } .tema-preview-dark .tema-preview-top { background: #1E293B; border-bottom: 1px solid #334155; } .tema-preview-dark .tema-preview-linha { background: #334155; } .tema-preview-top { height: 18px; } .tema-preview-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; } .tema-preview-linha { height: 6px; border-radius: 3px; width: 80%; } .tema-preview-linha-curta { width: 50%; } .tema-opcao-label { font-weight: 600; font-size: 14px; color: var(--color-text); margin-bottom: 2px; } .tema-opcao-sub { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; } /* Tres tamanhos de fonte do app . mesmo padrao visual de tema-opcao */ .fonte-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .fonte-opcao { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; transition: border-color 0.15s, background 0.15s; font-family: inherit; color: inherit; } .fonte-opcao:hover { border-color: var(--color-border-strong); } .fonte-opcao-ativa { border-color: var(--color-primary); background: var(--color-primary-subtle); } .fonte-opcao-check { position: absolute; top: 8px; right: 10px; font-size: 14px; color: var(--color-primary); line-height: 1; } .fonte-opcao-amostra { font-weight: 700; color: var(--color-text); line-height: 1; } .fonte-opcao-label { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); } .fonte-opcao-ativa .fonte-opcao-label { color: var(--color-text); font-weight: 600; } /* ========== FOTO DO PACIENTE · uploader no modal de contato ========== */ .ect-foto-bloco { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-subtle); margin-bottom: 18px; } .ect-foto-preview { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--color-bg-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--color-border); } .ect-foto-preview img { width: 100%; height: 100%; object-fit: cover; } .ect-foto-preview .photo-initials-lg { font-size: 22px; font-weight: 600; color: var(--color-text-secondary); } .ect-foto-acoes { flex: 1; min-width: 0; } .ect-foto-acoes .btn + .btn { margin-left: 6px; } /* ========== BADGE MEDICO NA FILA · multi-medico ========== */ .agenda-row-medico { display: inline-block; margin-top: 3px; padding: 2px 7px; font-size: 11px; font-weight: 500; color: var(--color-text-secondary); background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 4px; letter-spacing: 0.1px; } /* ========== CONFIGURACOES · abas horizontais ========== */ .config-tabs { display: flex; gap: 4px; margin-bottom: 20px; padding: 4px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; /* Sem z-index explicito · evita criar stacking context que tampa dropdowns e modais (perfil/sair, sidebar). */ } .config-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: all 0.15s; white-space: nowrap; font-family: inherit; } .config-tab:hover { color: var(--color-text); background: var(--color-bg); } .config-tab svg { width: 16px; height: 16px; opacity: 0.75; } .config-tab-ativa { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); } .config-tab-ativa svg { opacity: 1; } .config-aba-conteudo { display: flex; flex-direction: column; gap: 16px; } .config-aba-conteudo .card { margin-bottom: 0; } /* Link-card · card inteiro clicavel com chevron no final */ .config-link-card { cursor: pointer; transition: background 0.15s, border-color 0.15s; } .config-link-card:hover { background: var(--color-bg-subtle); border-color: var(--color-border-strong); } .config-link-body { display: flex; align-items: center; gap: 14px; padding: 16px 18px; } .config-link-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-primary-subtle); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .config-link-body > svg:last-child { color: var(--color-text-muted); opacity: 0.5; } /* Details colapsavel · usado em Logs pra esconder por padrao */ .config-details summary { cursor: pointer; list-style: none; } .config-details summary::-webkit-details-marker { display: none; } .config-details-summary { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .config-details[open] .config-details-summary { border-bottom: 1px solid var(--color-border); } /* ============================================================ * DARK MODE · NUCLEAR OVERRIDES * Aplicado no final do arquivo pra ganhar especificidade e * derrotar qualquer background:white ou color:#0B2A4A hardcoded * que ainda tenha escapado dos seletores inline de cima. * ============================================================ */ /* 1 · Surfaces estruturais SEMPRE escurecem */ html[data-theme="dark"] .page, html[data-theme="dark"] .card, html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-body, html[data-theme="dark"] .modal, html[data-theme="dark"] .modal-body, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .dropdown, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .bu-dropdown, html[data-theme="dark"] .notif-panel, html[data-theme="dark"] .busca-global-modal, html[data-theme="dark"] .popover, html[data-theme="dark"] .drawer, html[data-theme="dark"] .fila-dia-vazia, html[data-theme="dark"] .perfil-resumo, html[data-theme="dark"] .onb-wizard-step, html[data-theme="dark"] .agenda2-toolbar, html[data-theme="dark"] .agenda-row, html[data-theme="dark"] .bu-item, html[data-theme="dark"] .bu-item-logo, html[data-theme="dark"] .integracao-card, html[data-theme="dark"] .pendencias-secretaria, html[data-theme="dark"] .kpi-card { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } /* Variante ligeiramente mais escura pra hierarquia */ html[data-theme="dark"] .card-header { background: transparent; } html[data-theme="dark"] .modal-footer { background: var(--color-bg); border-top-color: var(--color-border); } /* 2 · Headings/titulos dentro de componentes estruturais */ html[data-theme="dark"] .card h1, html[data-theme="dark"] .card h2, html[data-theme="dark"] .card h3, html[data-theme="dark"] .card h4, html[data-theme="dark"] .card h5, html[data-theme="dark"] .card strong, html[data-theme="dark"] .card b, html[data-theme="dark"] .modal h1, html[data-theme="dark"] .modal h2, html[data-theme="dark"] .modal h3, html[data-theme="dark"] .modal h4, html[data-theme="dark"] .modal strong, html[data-theme="dark"] .page-title, html[data-theme="dark"] .page-subtitle, html[data-theme="dark"] .card-title, html[data-theme="dark"] .record-name, html[data-theme="dark"] .highlight-value, html[data-theme="dark"] .modal-title, html[data-theme="dark"] .agenda2-titulo, html[data-theme="dark"] .fw-600 { color: var(--color-text); } html[data-theme="dark"] .page-subtitle, html[data-theme="dark"] .record-sub, html[data-theme="dark"] .highlight-label, html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-xs, html[data-theme="dark"] .text-sm.text-muted { color: var(--color-text-muted); } /* 3 · Botao primario com texto claro em fundo colorido deve ser legivel. No dark invertemos pra fundo claro + texto escuro · cobertura exaustiva por contexto. */ html[data-theme="dark"] .btn.btn-primary, html[data-theme="dark"] a.btn.btn-primary, html[data-theme="dark"] button.btn.btn-primary, html[data-theme="dark"] .page .btn-primary, html[data-theme="dark"] .card .btn-primary, html[data-theme="dark"] .modal .btn-primary, html[data-theme="dark"] .agenda2-actions .btn-primary, html[data-theme="dark"] .page-header .btn-primary { background: #E2E8F0 !important; color: #0F1115 !important; border: 1px solid #E2E8F0 !important; } html[data-theme="dark"] .btn.btn-primary:hover, html[data-theme="dark"] a.btn.btn-primary:hover { background: #F8FAFC !important; color: #0F1115 !important; } html[data-theme="dark"] .btn.btn-primary svg, html[data-theme="dark"] a.btn.btn-primary svg { stroke: #0F1115 !important; } /* 4 · Quaisquer textos com cor inline hardcoded (qualquer azul corp do tema claro) ficam claros no dark. Regra catch-all: pega 99% dos casos · safelist de cores de status vem depois pra manter semantica. */ html[data-theme="dark"] [style*="color:#0B2A4A"], html[data-theme="dark"] [style*="color:#1E4A7C"], html[data-theme="dark"] [style*="color:#0F172A"], html[data-theme="dark"] [style*="color:#0F2D4D"], html[data-theme="dark"] [style*="color:#153C64"], html[data-theme="dark"] [style*="color:#1E4876"], html[data-theme="dark"] [style*="color:#3365A0"], html[data-theme="dark"] [style*="color:#1a1a1a"], html[data-theme="dark"] [style*="color:#111"], html[data-theme="dark"] [style*="color:#1F2937"], html[data-theme="dark"] [style*="color:#212121"], html[data-theme="dark"] [style*="color:#2563EB"], html[data-theme="dark"] [style*="color:#1E40AF"], html[data-theme="dark"] [style*="color:#1D4ED8"], html[data-theme="dark"] [style*="color:#005980"], html[data-theme="dark"] [style*="color: white"], html[data-theme="dark"] [style*="color:white"], html[data-theme="dark"] [style*="color:#fff"], html[data-theme="dark"] [style*="color:#FFFFFF"] { color: var(--color-text) !important; } /* Backgrounds claros hardcoded · force escurecer */ html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#FFF"], html[data-theme="dark"] [style*="background:#FFFFFF"], html[data-theme="dark"] [style*="background: white"], html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background:#F8FAFC"], html[data-theme="dark"] [style*="background:#F9FAFB"], html[data-theme="dark"] [style*="background:#F5F7FA"], html[data-theme="dark"] [style*="background:#F3F4F6"], html[data-theme="dark"] [style*="background:#F1F5F9"], html[data-theme="dark"] [style*="background: #F1F5F9"] { background: var(--color-bg-subtle) !important; } /* 5 · Agenda · header da data ganha contraste */ html[data-theme="dark"] .agenda2-nav, html[data-theme="dark"] .agenda2-views, html[data-theme="dark"] .agenda2-toolbar { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } html[data-theme="dark"] .agenda2-titulo { color: var(--color-text) !important; } html[data-theme="dark"] .agenda2-view-pill { color: var(--color-text-secondary); } html[data-theme="dark"] .agenda2-view-pill.active { background: var(--color-bg-muted); color: var(--color-text); } html[data-theme="dark"] .agenda-row-name { color: var(--color-text); } html[data-theme="dark"] .agenda-row-time { color: var(--color-text-secondary); } html[data-theme="dark"] .agenda-now-line { color: var(--color-text-muted); } /* 6 · Fila do dia · card vazio + titulo */ html[data-theme="dark"] .fila-dia-vazia-titulo { color: var(--color-text) !important; } html[data-theme="dark"] .fila-dia-vazia-sub { color: var(--color-text-muted) !important; } html[data-theme="dark"] .fila-dia-vazia-sub a { color: var(--color-text) !important; text-decoration: underline; } /* 7 · BU switcher + BU lista · clinicas */ html[data-theme="dark"] .bu-item:hover, html[data-theme="dark"] .bu-item-current, html[data-theme="dark"] .bu-item-current:hover { background: var(--color-bg-muted) !important; color: var(--color-text); } html[data-theme="dark"] .bu-item-logo img { background: var(--color-surface); } html[data-theme="dark"] .bu-grid .card, html[data-theme="dark"] .bu-grid .card-body, html[data-theme="dark"] .bu-grid .card-header { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } /* 8 · Inputs/selects/textareas · sempre legiveis no dark */ html[data-theme="dark"] .form-input, html[data-theme="dark"] .form-select, html[data-theme="dark"] .form-textarea { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme="dark"] .form-input:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] .form-textarea:focus { background: var(--color-bg); border-color: var(--color-border-strong); box-shadow: 0 0 0 2px rgba(226, 232, 240, 0.12); } html[data-theme="dark"] .form-label { color: var(--color-text-secondary); } /* 9 · Tags e badges · cinza neutro no dark */ html[data-theme="dark"] .tag, html[data-theme="dark"] .badge-neutral { background: var(--color-bg-muted); color: var(--color-text); border: 1px solid var(--color-border); } html[data-theme="dark"] .badge-success { background: var(--color-success-bg); color: var(--color-success); } html[data-theme="dark"] .badge-warning { background: var(--color-warning-bg); color: var(--color-warning); } html[data-theme="dark"] .badge-danger { background: var(--color-danger-bg); color: var(--color-danger); } /* 10 · Status pills (em_atendimento / realizado / aguardando) */ /* Status sem caixa no dark · so texto colorido + dot */ html[data-theme="dark"] .status-pill { background: transparent !important; border: none !important; } html[data-theme="dark"] .status-pill.status-agendado { color: #CBD5E1; } html[data-theme="dark"] .status-pill.status-confirmado { color: #93C5FD; } html[data-theme="dark"] .status-pill.status-aguardando { color: #86EFAC; } html[data-theme="dark"] .status-pill.status-em-atendimento { color: #FCD34D; } html[data-theme="dark"] .status-pill.status-realizado { color: #6EE7B7; } html[data-theme="dark"] .status-pill.status-cancelado { color: #94A3B8; } html[data-theme="dark"] .status-pill.status-faltou { color: #FCA5A5; } html[data-theme="dark"] .status-pill.status-atrasado { color: #FCA5A5; } /* 11 · Links normais */ html[data-theme="dark"] a { color: var(--color-text); } html[data-theme="dark"] a:hover { color: var(--color-primary-hover); } /* 12 · KPI grid do painel */ html[data-theme="dark"] .kpi-card, html[data-theme="dark"] .kpi-grid .card { background: var(--color-surface); color: var(--color-text); } html[data-theme="dark"] .kpi-label { color: var(--color-text-muted); } html[data-theme="dark"] .kpi-value { color: var(--color-text); } /* 13 · Photo initials (avatar text) claros no dark */ html[data-theme="dark"] .person-photo .photo-initials, html[data-theme="dark"] .photo-initials, html[data-theme="dark"] .photo-initials-lg { background: var(--color-bg-muted); color: var(--color-text); } /* 14 · Divisor de tabela */ html[data-theme="dark"] .table th, html[data-theme="dark"] .table td { border-color: var(--color-border); color: var(--color-text); } html[data-theme="dark"] .table thead th { color: var(--color-text-secondary); } /* 15 · Seletor de BU no topbar (brand-switcher) fica com fundo escuro */ html[data-theme="dark"] .brand-wrap, html[data-theme="dark"] .brand { background: transparent; } /* ========================================================== * POLIMENTO DARK MODE · FASE 2 * Fixes pontuais apos feedback da Anna * ========================================================== */ /* 1 · Hovers em geral no dark nao usam azul corporativo */ html[data-theme="dark"] .nav-item:hover { background: var(--color-bg-subtle) !important; color: var(--color-text) !important; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] a:hover { color: var(--color-text); } html[data-theme="dark"] .agenda-row:hover { background: var(--color-bg-subtle); } html[data-theme="dark"] .bu-item:hover { background: var(--color-bg-subtle); } /* 2 · Alergia · destaque forte e legivel no dark */ html[data-theme="dark"] .alert-danger, html[data-theme="dark"] [class*="alergia"] { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); } /* 3 · IDs monoespacados (PRO-XXXX, PAC-XXXX) visiveis no dark */ html[data-theme="dark"] [style*="font-family:ui-monospace"], html[data-theme="dark"] code, html[data-theme="dark"] kbd, html[data-theme="dark"] samp { color: var(--color-text) !important; } /* 4 · Timeline clinica · linha centrada no dot, espacamento largo, cores legiveis no dark · ocupar largura da tela */ .timeline-clinica { list-style: none; padding: 8px 0 8px 0; margin: 0; position: relative; } .timeline-clinica::before { content: ''; position: absolute; left: 10px; top: 16px; bottom: 16px; width: 2px; background: var(--color-border); } .timeline-clinica .timeline-item { position: relative; padding: 14px 0 14px 36px; border-bottom: none; display: block; } .timeline-clinica .timeline-item:last-child { padding-bottom: 6px; } .timeline-clinica .timeline-dot { position: absolute; left: 2px; top: 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border-strong); z-index: 1; padding: 0; margin: 0; } /* Dots finalizados e em andamento · sem margem, so cor solida */ .timeline-item.timeline-finalizado .timeline-dot { border-color: var(--color-success); background: var(--color-success); } .timeline-item.timeline-rascunho .timeline-dot { border-color: var(--color-warning); background: var(--color-warning); } .timeline-conteudo { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; } .timeline-head { display: flex; align-items: center; gap: 10px; margin-bottom: 0; } .timeline-data { font-weight: 600; font-size: 14px; color: var(--color-text); text-decoration: none; min-width: 100px; } .timeline-data:hover { text-decoration: underline; } .timeline-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; justify-content: flex-end; } html[data-theme="dark"] .timeline-meta a { color: var(--color-text); } html[data-theme="dark"] .timeline-meta .text-muted, html[data-theme="dark"] .timeline-meta .text-xs { color: var(--color-text-muted); } /* 5 · Input[type=date] no dark · fundo escuro, icone branco */ html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] input[type="month"] { background: var(--color-bg-subtle) !important; color: var(--color-text) !important; border-color: var(--color-border); color-scheme: dark; } html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); cursor: pointer; } html[data-theme="dark"] input[type="date"]::-webkit-datetime-edit, html[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-text, html[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-month-field, html[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-day-field, html[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-year-field { color: var(--color-text); } /* 6 · Moldura de guia da camera · circulo centralizado pro rosto */ .cam-preview-wrap { position: relative; display: inline-block; max-width: 480px; width: 100%; } .cam-preview-wrap video { display: block; width: 100%; border-radius: var(--radius-md); background: #000; } .cam-guia { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 55%; aspect-ratio: 1; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, 0.7); pointer-events: none; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35); } /* ========== ALERTAS CLINICOS · topo da ficha do paciente ========== Chips sem borda · fundos tonais suaves (pastel) · bolinha colorida antes do titulo indica severidade. Texto neutro pra nao gritar. */ .alertas-clinicos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .alerta-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; font-size: 12.5px; border: none; } .alerta-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .alerta-titulo { font-weight: 600; letter-spacing: 0.1px; } .alerta-texto { font-weight: 400; color: var(--color-text-secondary); } /* Claro · fundos super-suaves com accent coloring na bolinha/titulo */ .alerta-danger { background: rgba(220, 38, 38, 0.07); color: #991B1B; } .alerta-danger::before { background: #DC2626; } .alerta-warning { background: rgba(245, 158, 11, 0.09); color: #92400E; } .alerta-warning::before { background: #F59E0B; } .alerta-info { background: rgba(30, 74, 124, 0.07); color: #1E4A7C; } .alerta-info::before { background: #1E4A7C; } /* Dark · fundos com transparencia sobre o surface · texto claro */ html[data-theme="dark"] .alerta-danger { background: rgba(252, 165, 165, 0.08); color: #FCA5A5; } html[data-theme="dark"] .alerta-danger::before { background: #FCA5A5; } html[data-theme="dark"] .alerta-warning { background: rgba(252, 211, 77, 0.08); color: #FCD34D; } html[data-theme="dark"] .alerta-warning::before { background: #FCD34D; } html[data-theme="dark"] .alerta-info { background: rgba(226, 232, 240, 0.06); color: var(--color-text); } html[data-theme="dark"] .alerta-info::before { background: var(--color-border-strong); } html[data-theme="dark"] .alerta-texto { color: var(--color-text-muted); } /* Modelos · badge 'Pronto' + titulo de secao */ .tpl-secao-titulo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-text-muted); margin: 0 0 8px; } .tpl-badge-pronto { display: inline-block; font-size: 9px; font-weight: 600; padding: 2px 6px; margin-left: 8px; background: var(--color-bg-muted); color: var(--color-text-secondary); border-radius: 3px; letter-spacing: 0.4px; text-transform: uppercase; vertical-align: middle; } /* ========== MIGRACAO · passos numerados ========== */ .migracao-passos { display: flex; flex-direction: column; gap: 16px; } .migracao-passo { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); } .migracao-passo-num { width: 32px; height: 32px; border-radius: 50%; background: var(--color-bg-muted); color: var(--color-text); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; } .migracao-passo-body { flex: 1; min-width: 0; } /* Checklist de documentos ao finalizar prontuario */ .check-docs-lista { display: flex; flex-direction: column; gap: 8px; } .check-doc-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .check-doc-item:hover { background: var(--color-bg-subtle); border-color: var(--color-border-strong); } .check-doc-item input[type="checkbox"] { accent-color: var(--color-primary); width: 16px; height: 16px; flex-shrink: 0; } /* ========== EDITOR WYSIWYG · modelos de documentos ========== */ .wysiwyg-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px 8px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-bottom: none; border-radius: 6px 6px 0 0; } .wysiwyg-toolbar button { padding: 6px 10px; min-width: 30px; background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--color-text); font-family: inherit; transition: all 0.12s; } .wysiwyg-toolbar button:hover { background: var(--color-surface); border-color: var(--color-border); } .wysiwyg-toolbar select, .wysiwyg-toolbar input[type="color"] { padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); font-size: 12px; cursor: pointer; } .wysiwyg-toolbar input[type="color"] { padding: 0; width: 32px; height: 28px; } .wysiwyg-sep { display: inline-block; width: 1px; height: 20px; background: var(--color-border); margin: 0 4px; } .wysiwyg-editor { min-height: 180px; max-height: 420px; overflow-y: auto; padding: 16px 20px; border: 1px solid var(--color-border); border-radius: 0 0 6px 6px; background: #FFFFFF; color: #1a1a1a; outline: none; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.55; } .wysiwyg-editor img { max-width: 100%; height: auto; } .wysiwyg-editor:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(30, 74, 124, 0.1); } html[data-theme="dark"] .wysiwyg-editor { background: #FFFFFF; color: #1a1a1a; } /* Preview do modelo na tela /modelos-documentos */ .modelo-doc-preview { padding: 14px 16px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: #1a1a1a; font-size: 12px; line-height: 1.5; min-height: 76px; max-height: 180px; overflow: hidden; } html[data-theme="dark"] .modelo-doc-preview { background: #FAFAFA; } /* Lista de variaveis disponiveis */ .variaveis-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 16px; font-size: 12px; } .variavel-item { display: flex; gap: 8px; align-items: baseline; } .variavel-item code { background: var(--color-bg-subtle); padding: 1px 6px; border-radius: 3px; font-size: 11px; color: var(--color-text); } .variavel-item span { color: var(--color-text-secondary); } .modelo-pronto-card { padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); } .modelo-pronto-card:hover { border-color: var(--color-border-strong); } /* ========== MINIATURA A4 · preview de documento impresso ========== */ .mini-a4-wrap { display: flex; justify-content: center; padding: 10px 0; background: linear-gradient(to bottom, #F5F7FA, #E2E8F0); border-radius: var(--radius-sm); } .mini-a4-pagina { width: 148px; /* proporcao A4 · 21:29.7 */ height: 209px; background: #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.15); overflow: hidden; position: relative; } .mini-a4-conteudo { transform: scale(0.22); transform-origin: top left; width: calc(100% / 0.22); padding: 22mm 20mm; font-size: 11pt; color: #1a1a1a; } html[data-theme="dark"] .mini-a4-wrap { background: linear-gradient(to bottom, #2A2F37, #1C1F24); } html[data-theme="dark"] .mini-a4-pagina { background: #FFFFFF; color: #1a1a1a; } /* ========== EDITOR LIVRE A4 · pagina em branco estilo Word ========== */ .editor-livre-a4 { background: linear-gradient(to bottom, #E8ECF1, #D7DDE5); padding: 20px; border-radius: 0 0 6px 6px; max-height: 70vh; overflow-y: auto; } .editor-livre-pagina { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 22mm 20mm; background: #FFFFFF; color: #1a1a1a; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); outline: none; font-family: 'Inter', sans-serif; font-size: 11pt; line-height: 1.55; } .editor-livre-pagina img { max-width: 100%; height: auto; } .editor-livre-pagina:focus { box-shadow: 0 4px 20px rgba(30, 74, 124, 0.25); } html[data-theme="dark"] .editor-livre-a4 { background: linear-gradient(to bottom, #1A1D24, #0F1318); } html[data-theme="dark"] .editor-livre-pagina { background: #FFFFFF; color: #1a1a1a; } /* Modal fullscreen pro editor livre ter area grande */ .modal.modal-fullscreen { width: 96vw; max-width: 96vw; max-height: 92vh; height: 92vh; } /* ========== GRID DE DOCUMENTOS · tela /modelos-documentos ========== */ .doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; } .doc-card { padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color 0.15s, transform 0.15s; } .doc-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); } .doc-card-titulo { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 2px; } .doc-card-desc { font-size: 11px; color: var(--color-text-muted); margin-bottom: 10px; } .doc-secao-titulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--color-text-muted); margin: 4px 0 10px; } /* Card de duracao do atendimento no checklist de finalizar */ .finalizar-tempo-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--color-primary-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 14px; } .finalizar-tempo-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); display: flex; align-items: center; justify-content: center; color: var(--color-text); flex-shrink: 0; } .finalizar-tempo-valor { font-size: 20px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* Anna 2026-05-01 . animacao do drawer do Assistente IA */ @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Anna 2026-05-01 . atalho do onboarding na topbar . pilula chamativa * (laranja sutil) com badge de quantas etapas faltam. So aparece quando * onboarding tem pendencia. Click abre o wizard. */ .onb-topbar-shortcut { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 16px; border: 1px solid #FCD34D; background: #FEF3C7; color: #92400E; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.12s, transform 0.1s; white-space: nowrap; font-family: inherit; margin-right: 8px; } .onb-topbar-shortcut:hover { background: #FDE68A; transform: translateY(-1px); } .onb-topbar-icon { display: inline-flex; align-items: center; } .onb-topbar-icon svg { width: 14px; height: 14px; } .onb-topbar-label { font-weight: 500; } .onb-topbar-badge { background: #B45309; color: white; font-weight: 700; font-size: 11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; } /* ========== ASSINATURA DIGITAL · toggle + drawer (Onda 8) ========== */ /* Pilula sóbria no topbar · sem cores berrantes, sem barrinhas laterais */ .sign-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 12px; font-weight: 500; color: var(--color-text); cursor: pointer; transition: background 0.12s, border-color 0.12s; white-space: nowrap; font-family: inherit; } .sign-toggle:hover { background: #F8FAFC; border-color: #CBD5E1; } .sign-toggle-dot { width: 7px; height: 7px; border-radius: 50%; background: #CBD5E1; flex-shrink: 0; } .sign-toggle-on { background: #EFF6FF; border-color: #BFDBFE; color: #0B2A4A; } .sign-toggle-on .sign-toggle-dot { background: #1E4A7C; box-shadow: 0 0 0 3px rgba(30, 74, 124, 0.15); } .sign-toggle-on:hover { background: #DBEAFE; border-color: #93C5FD; } .sign-toggle-meta { font-size: 11px; color: #64748B; font-variant-numeric: tabular-nums; font-weight: 400; } .sign-toggle-on .sign-toggle-meta { color: #1E4A7C; opacity: 0.85; } /* Drawer lateral com cards de provedores */ .sign-drawer-overlay { position: fixed; inset: 0; background: rgba(11, 42, 74, 0.32); z-index: 90; animation: fadeIn 0.15s ease-out; } .sign-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; background: var(--color-surface); z-index: 91; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(11, 42, 74, 0.10); animation: slideInRight 0.22s ease-out; } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .sign-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 24px 18px; border-bottom: 1px solid var(--color-border); } .sign-drawer-titulo { font-size: 16px; font-weight: 600; color: #0B2A4A; letter-spacing: -0.005em; } .sign-drawer-sub { font-size: 12px; color: var(--color-muted); margin-top: 4px; line-height: 1.5; } .sign-drawer-body { flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 12px; } .sign-drawer-foot { padding: 14px 24px; border-top: 1px solid var(--color-border); font-size: 11px; color: var(--color-muted); line-height: 1.5; } .sign-prov-card { border: 1px solid var(--color-border); border-radius: 8px; padding: 16px 18px; background: var(--color-surface); } .sign-prov-card-on { background: #FAFCFE; border-color: #BFDBFE; } .sign-prov-card-disabled { opacity: 0.55; } .sign-prov-card-head { margin-bottom: 12px; } .sign-prov-card-titulo { font-size: 14px; font-weight: 600; color: #0B2A4A; } .sign-prov-card-sub { font-size: 11px; color: var(--color-muted); margin-top: 2px; line-height: 1.5; } .sign-prov-card-status { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--color-border); margin-bottom: 10px; } .sign-prov-card-status-linha { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text); } .sign-prov-label { color: var(--color-muted); font-weight: 500; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; } .sign-prov-card-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .sign-prov-em-breve { font-size: 11px; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }