/* ============================================================ Painel de Senha — Consulte painel.css Dois segmentos, duas cores. O usuário precisa sentir de relance com qual deles está lidando: Ocupacional — teal petróleo (Consulte Medicina Ocupacional) Especialidades — verde da marca Consulte Especialidades Trocar --esp-500 / --esp-300 abaixo para casar exatamente com o arquivo final da logo; todo o resto deriva daí. ============================================================ */ :root { /* Marca — Ocupacional */ --ocu-900: #063238; --ocu-700: #0E5A62; --ocu-500: #17828C; --ocu-300: #30B5AD; --ocu-50: #E7F3F4; /* Marca — Especialidades */ --esp-900: #05452F; --esp-700: #0B7A5B; --esp-500: #14B981; --esp-300: #35EDA2; --esp-50: #E4FAF0; /* Neutros — puxados para o teal, não cinza puro */ --ground: #F3F7F8; --surface: #FFFFFF; --surface-2: #EDF3F4; --line: #E1EAEB; --line-forte: #CFDDDF; --ink: #0B1F22; --ink-2: #344B4E; --muted: #6B8386; /* Situações */ --st-wait: #9C6412; --st-wait-bg: #FDF3E3; --st-run: #0F6E78; --st-run-bg: #E1F1F3; --st-done: #2F7048; --st-done-bg: #E4F2E9; --st-miss: #A03B31; --st-miss-bg: #FAE8E5; /* Crítico — o degrau acima do vermelho. Roxo porque, ao lado dele, o vermelho ainda parece "ruim"; o roxo parece "outra categoria". */ --st-crit: #6B21A8; --st-crit-bg: #F2E9FC; /* Bolinhas da trilha do paciente (tela da sala). Cores pedidas pelo Antonio, e propositalmente diferentes da escala de gravidade: aqui não há "ruim" — é só onde o paciente está no dia dele. */ --bola-espera: #2563EB; /* azul — aguardando ser chamado */ --bola-agora: #E0A800; /* amarelo — em atendimento agora */ --bola-feito: #16A34A; /* verde — já fez */ --bola-falta: #DC2626; /* vermelho — não compareceu */ /* Segmento corrente — trocado por [data-seg] */ --seg-900: var(--ocu-900); --seg-700: var(--ocu-700); --seg-500: var(--ocu-500); --seg-300: var(--ocu-300); --seg-50: var(--ocu-50); --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace; --r-sm: 10px; --r: 14px; --r-lg: 20px; --sombra: 0 1px 2px rgba(11, 31, 34, .04), 0 4px 16px rgba(11, 31, 34, .05); --sombra-md: 0 2px 6px rgba(11, 31, 34, .06), 0 12px 32px rgba(11, 31, 34, .08); /* ---------- O que o tema escuro precisa trocar ---------- Cor cravada no meio da folha trava o tema. Tudo que era #fff sobre preenchimento, ou #fff dentro de um color-mix, virou token: no claro continua branco, no escuro a marca clareia e o texto por cima escurece. */ --barra: var(--ocu-900); /* barra de cima */ --sobre-barra: #FFFFFF; /* texto sobre a barra */ --sobre-marca: #FFFFFF; /* texto sobre preenchimento da marca */ --sobre-tom: #FFFFFF; /* texto sobre preenchimento de situação */ --mistura: #FFFFFF; /* o "branco" com que as cores se diluem */ --calmo: #5E777A; /* o tom de quem não está pedindo nada */ --lateral: var(--surface); --lateral-linha: var(--line); --realce: rgba(255, 255, 255, .12); /* hover sobre a barra */ } /* ============================================================ TEMA ESCURO Não é o claro invertido: os fundos vêm do mesmo teal petróleo da marca, e as cores de situação CLAREIAM para manter contraste sobre eles. A paleta é a mesma já usada no briefing do projeto. O atributo vive no e é gravado por pessoa (assets/js/layout.js). ============================================================ */ [data-tema="escuro"] { --ocu-900: #04181B; --ocu-700: #46C3BA; --ocu-500: #2E9AA0; --ocu-300: #5FD6CE; --ocu-50: #123239; --esp-900: #04241A; --esp-700: #1E9B72; --esp-500: #35EDA2; --esp-300: #6BF3BE; --esp-50: #12301F; --ground: #081A1D; --surface: #0E2529; --surface-2: #14343A; --line: #1E434A; --line-forte: #2A5761; --ink: #E8F2F2; --ink-2: #B6CCCE; --muted: #88A5A8; --st-wait: #E7AC5A; --st-wait-bg: #3A2C14; --st-run: #62C6CE; --st-run-bg: #123239; --st-done: #74C592; --st-done-bg: #12301F; --st-miss: #E38B80; --st-miss-bg: #3A1D19; --st-crit: #C79BF0; --st-crit-bg: #2A1B3D; --bola-espera: #6098FF; --bola-agora: #F0BE2E; --bola-feito: #3FC46A; --bola-falta: #F0685E; --barra: #05161A; --sobre-barra: #E8F2F2; --sobre-marca: #04262A; --sobre-tom: #0B1F22; --mistura: #0E2529; --calmo: #7E9497; --lateral: #0B2024; --lateral-linha: #17383E; --realce: rgba(255, 255, 255, .08); --sombra: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 16px rgba(0, 0, 0, .22); --sombra-md: 0 2px 6px rgba(0, 0, 0, .34), 0 12px 32px rgba(0, 0, 0, .30); color-scheme: dark; } [data-seg="ocupacional"] { --seg-900: var(--ocu-900); --seg-700: var(--ocu-700); --seg-500: var(--ocu-500); --seg-300: var(--ocu-300); --seg-50: var(--ocu-50); } [data-seg="especialidades"] { --seg-900: var(--esp-900); --seg-700: var(--esp-700); --seg-500: var(--esp-500); --seg-300: var(--esp-300); --seg-50: var(--esp-50); } * { box-sizing: border-box; } /* O atributo hidden tem de vencer sempre. Sem isto, todo bloco com display:flex declarado por classe (.bloco, .col, .aviso) continua na tela mesmo com hidden ligado - era por isso que o painel do paciente aparecia vazio antes de alguem ser chamado. */ [hidden] { display: none !important; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ============================================================ MOLDURA — lateral de módulos + barra de cima A lateral é a lista de módulos, e é a mesma lista que vai virar a permissão de cada colaborador: quem não tem o módulo não vê o item. Montada por assets/js/layout.js, para existir num lugar só. ============================================================ */ .app { display: flex; min-height: 100vh; align-items: stretch; } .area { flex: 1; min-width: 0; display: flex; flex-direction: column; } .lateral { width: 248px; flex: none; position: sticky; top: 0; align-self: flex-start; height: 100vh; background: var(--lateral); border-right: 1px solid var(--lateral-linha); display: flex; flex-direction: column; z-index: 40; transition: width .18s ease; } [data-menu="compacto"] .lateral { width: 76px; } /* O que só faz sentido com largura: some no compacto, e some de verdade (display:none) para não deixar o leitor de tela lendo rótulo invisível. O !important não é preguiça: .lateral .marca span e .pessoa .dados são seletores mais específicos e declaram display:flex, então venciam esta regra e o texto vazava por cima do conteúdo no menu compacto. Utilitário de visibilidade precisa ganhar de qualquer layout — mesma razão do [hidden] lá em cima. */ [data-menu="compacto"] .so-largo { display: none !important; } .lateral .marca { display: flex; align-items: center; gap: .7rem; padding: 1.05rem 1.1rem; min-height: 84px; border-bottom: 1px solid var(--lateral-linha); text-decoration: none; color: inherit; } .lateral .marca .sinete { flex: none; display: flex; align-items: center; justify-content: center; background: var(--ocu-900); border-radius: 11px; padding: .5rem .55rem; min-width: 44px; min-height: 44px; } .lateral .marca img { height: 26px; width: auto; display: block; } .lateral .marca span { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .lateral .marca b { font-size: .96rem; letter-spacing: -.015em; line-height: 1.15; } .lateral .marca small { font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } [data-menu="compacto"] .lateral .marca { justify-content: center; padding: 1.05rem .5rem; } .modulos { display: flex; flex-direction: column; gap: .2rem; padding: 1rem .7rem; flex: 1; overflow-y: auto; } .modulos .titulo { font-size: .62rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); padding: 0 .5rem .45rem; } .modulo { display: flex; align-items: center; gap: .7rem; padding: .62rem .7rem; min-height: 44px; border-radius: 10px; border-left: 3px solid transparent; text-decoration: none; color: var(--ink-2); font-size: .92rem; font-weight: 600; transition: background .15s, color .15s; } .modulo:hover { background: var(--surface-2); color: var(--ink); } .modulo .icone { flex: none; display: flex; } .modulo .nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modulo.aqui { color: var(--ocu-700); background: var(--ocu-50); border-left-color: var(--ocu-700); font-weight: 700; } [data-menu="compacto"] .modulo { justify-content: center; padding: .62rem .4rem; } [data-menu="compacto"] .modulo.aqui { border-left-color: transparent; } /* Módulo que ainda não existe. Fica visível de propósito: o lugar dele no menu já é decisão tomada, e some no compacto porque ali não há como dizer "em breve" — um ícone apagado sozinho vira defeito aparente. */ .modulo.em-breve { color: var(--muted); cursor: default; } .modulo.em-breve:hover { background: transparent; color: var(--muted); } .modulo.em-breve .icone { opacity: .55; } [data-menu="compacto"] .modulo.em-breve { display: none; } .modulo .selo { flex: none; font-family: var(--mono); font-size: .74rem; font-weight: 700; padding: .1em .5em; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); letter-spacing: 0; } .modulo .selo[hidden] { display: none; } .modulo .selo[data-tom="ok"] { background: var(--st-done-bg); color: var(--st-done); } .modulo .selo[data-tom="atencao"] { background: var(--st-wait-bg); color: var(--st-wait); } .modulo .selo[data-tom="alto"] { background: var(--st-miss); color: var(--sobre-tom); } .modulo .selo.em-breve { font-family: var(--font); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: transparent; color: var(--muted); border: 1px dashed var(--line-forte); } .lateral .pe { border-top: 1px solid var(--lateral-linha); padding: .8rem .8rem .85rem; display: flex; flex-direction: column; gap: .5rem; } .pessoa { display: flex; align-items: center; gap: .65rem; min-width: 0; } .pessoa .avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--ocu-50); color: var(--ocu-700); display: flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 700; letter-spacing: .02em; } .pessoa .avatar.sem { background: var(--surface-2); color: var(--muted); } .pessoa .dados { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .pessoa .dados b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pessoa .dados small { font-size: .7rem; color: var(--muted); } [data-menu="compacto"] .pessoa { justify-content: center; } button.encolher { background: transparent; color: var(--muted); border: 1px solid transparent; font-size: .76rem; font-weight: 600; padding: .4rem .5rem; border-radius: 8px; display: flex; align-items: center; gap: .5rem; justify-content: flex-start; } button.encolher:hover { background: var(--surface-2); color: var(--ink-2); filter: none; } button.encolher svg { transition: transform .18s; flex: none; } [data-menu="compacto"] button.encolher { justify-content: center; } [data-menu="compacto"] button.encolher svg { transform: rotate(180deg); } /* ---------- A barra de cima, agora fina ---------- A marca saiu daqui (mora na lateral). Sobrou o que muda de tela para tela: onde estou, o tema e a hora. */ .app .topo { padding: 0 clamp(1rem, 2.6vw, 1.6rem); min-height: 56px; gap: 1.2rem; } .topo .contexto { display: flex; flex-direction: column; gap: .05rem; line-height: 1.2; min-width: 0; } .topo .contexto b { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; } .topo .contexto small { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .5; } .tema { display: flex; align-items: center; gap: .2rem; padding: .2rem; border-radius: 999px; background: color-mix(in srgb, var(--sobre-barra) 10%, transparent); } button.tema-op { display: flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; background: transparent; border: none; color: var(--sobre-barra); opacity: .6; font-size: .74rem; font-weight: 600; } button.tema-op:hover { opacity: .85; filter: none; background: var(--realce); } button.tema-op[aria-pressed="true"] { background: var(--sobre-barra); color: var(--barra); opacity: 1; font-weight: 700; } button.tema-op[aria-pressed="true"]:hover { background: var(--sobre-barra); } /* Telas estreitas: o menu já encolheu sozinho pelo layout.js; aqui só sobra tirar o texto do seletor de tema, que é o primeiro a atrapalhar. */ @media (max-width: 700px) { button.tema-op span { display: none; } .topo .contexto small { display: none; } } /* ---------- Conversa com o banco ---------- Duas situações que não podem virar silêncio: "estou buscando" e "não consegui gravar". A primeira é uma faixa que corre na barra; a segunda, uma frase na própria barra, que some sozinha. */ [data-carregando] .topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ocu-300), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: corre 1.1s linear infinite; } @keyframes corre { from { background-position: -40% 0; } to { background-position: 140% 0; } } .aviso-banco { font-size: .78rem; font-weight: 600; background: var(--st-miss); color: #fff; padding: .25rem .7rem; border-radius: 999px; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aviso-banco[hidden] { display: none; } /* ---------- Barra superior ---------- */ .topo { background: var(--barra); color: var(--sobre-barra); padding: .85rem clamp(1rem, 3vw, 2rem); display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 color-mix(in srgb, var(--sobre-barra) 8%, transparent), 0 6px 20px rgba(4, 24, 27, .18); } .topo .marca { display: flex; align-items: center; gap: 1rem; min-width: 0; } .topo .marca img { height: 46px; width: auto; display: block; } .topo .marca::after { content: ""; width: 1px; height: 30px; background: color-mix(in srgb, var(--sobre-barra) 22%, transparent); } .topo h1 { font-size: 1.28rem; margin: 0; font-weight: 700; letter-spacing: -.015em; display: flex; flex-direction: column; gap: .1rem; white-space: nowrap; } .topo h1 small { font-weight: 700; opacity: .55; font-size: .64rem; text-transform: uppercase; letter-spacing: .18em; } .topo .espaco { flex: 1; } .topo a { color: var(--sobre-barra); text-decoration: none; font-size: .82rem; opacity: .7; padding: .3rem .7rem; border-radius: 999px; } .topo a:hover { opacity: 1; background: var(--realce); } .topo .relogio { font-family: var(--mono); font-size: 1.15rem; font-variant-numeric: tabular-nums; opacity: .85; } .conteudo { /* Era 1200px, e numa tela de 1920 sobrava um corredor vazio de cada lado maior que a própria lateral. 1600 usa a tela sem esticar linha de texto a ponto de o olho se perder voltando para a esquerda. */ max-width: 1600px; width: 100%; margin-inline: auto; padding: clamp(1rem, 2.6vw, 1.9rem); display: flex; flex-direction: column; gap: 1.15rem; /* Ocupa a altura da janela em TODA tela: a caixa branca não muda de tamanho quando a fila enche ou esvazia. Quem cresce é o bloco marcado com `enche` — sem ele, nada estica e a tela fica como sempre foi. */ flex: 1; min-height: 0; } /* ---------- O bloco que enche a tela ---------- As telas mudavam de tamanho conforme o conteúdo: o quadro branco crescia, encolhia, e quem trabalha nelas perdia a referência de onde clicar. Agora cada tela elege UM bloco para absorver a sobra — normalmente a lista, que passa a rolar por dentro em vez de esticar a página. É a mesma regra em todos os módulos, de propósito: padrão que muda de tela em tela não é padrão. */ .bloco.enche { flex: 1; min-height: 12rem; /* piso: em janela baixa a lista some antes de espremer */ } .bloco.enche .fila, .bloco.enche .rolagem { flex: 1; min-height: 0; overflow-y: auto; /* o respiro impede a barra de rolagem de encostar na borda do cartão */ padding-right: .25rem; } /* Lista vazia ocupa o espaço todo em vez de virar uma tarja fina no alto: é a mesma caixa, cheia ou vazia. */ .bloco.enche .fila .vazio, .bloco.enche > .vazio { flex: 1; display: flex; align-items: center; justify-content: center; } /* Duas colunas que precisam encher juntas (o balcão: fila e clínica) */ .duas.enche { flex: 1; min-height: 0; align-items: stretch; } .duas.enche > .bloco { height: 100%; } @media (max-width: 999px) { /* Empilhado, esticar as duas metades faria uma tela de rolagem infinita */ .duas.enche { display: block; } .duas.enche > .bloco { height: auto; margin-bottom: 1.15rem; } } /* Campo que estica não pode esticar sem fim: um "Seu nome" de mil pixels não fica melhor, fica estranho. */ .linha > .col.cresce { max-width: 560px; } .linha > .col.cresce.livre { max-width: none; } /* ---------- Blocos ---------- */ .bloco { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.15rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--sombra); } .bloco > h2 { font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); margin: 0; font-weight: 700; display: flex; align-items: center; gap: .5rem; } .bloco > h2 .conta { font-family: var(--mono); background: var(--surface-2); color: var(--ink-2); border-radius: 999px; padding: .1em .6em; letter-spacing: 0; font-size: .78rem; } /* ---------- Cartões de indicador ---------- Todos idênticos de estrutura — mesma caixa, mesma tipografia, mesma altura — para que a única diferença que o olho capte seja o TOM. A cor aqui é informação, não enfeite: diz de relance qual número está pedindo ação. Escala única, usada por todos: calmo cinza nada acontecendo (zero na fila) ok verde dentro do esperado atenção âmbar encostando no limite alto vermelho passou do limite crítico roxo passou com folga — para a recepção largar o resto O tom é decidido no JS e escrito em data-tom; o CSS só o pinta. */ .cartoes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); } .cartao { --tom: var(--ink-2); --tom-bg: var(--surface-2); display: flex; flex-direction: column; min-height: 122px; padding: .9rem 1rem 1rem; border: 1px solid color-mix(in srgb, var(--tom) 24%, transparent); border-radius: var(--r); background: var(--tom-bg); transition: background .25s, border-color .25s, color .25s; } .cartao .rotulo { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: color-mix(in srgb, var(--tom) 72%, var(--ink)); display: flex; align-items: center; gap: .45rem; line-height: 1.35; } .cartao .rotulo::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--tom); flex: none; } .cartao .valor { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 2.3rem; font-weight: 700; line-height: 1.05; color: var(--tom); margin-top: .4rem; } .cartao .nota { font-size: .73rem; color: var(--muted); margin-top: auto; padding-top: .5rem; } /* Destaque — a espera do balcão. Ocupa a largura toda porque é o número que a recepção precisa ver sem procurar. */ .destaque { --tom: var(--st-done); --tom-bg: var(--st-done-bg); display: flex; align-items: center; gap: 1.4rem 1.8rem; flex-wrap: wrap; padding: 1.1rem 1.3rem; border: 1px solid color-mix(in srgb, var(--tom) 34%, transparent); border-radius: var(--r); background: linear-gradient(180deg, var(--tom-bg), var(--surface)); transition: background .25s, border-color .25s; } .destaque .principal { display: flex; flex-direction: column; gap: .1rem; min-width: 200px; } .destaque .rotulo { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-2); } .destaque .valor { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 3rem; font-weight: 700; line-height: 1.05; color: var(--tom); } .destaque .valor .un { font-size: 1.1rem; font-weight: 600; margin-left: .15em; } .destaque .lado { display: flex; flex-direction: column; gap: .45rem; } .destaque .selo { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 700; padding: .3em .85em; border-radius: 999px; color: var(--sobre-tom); background: var(--tom); white-space: nowrap; } .destaque .agora { font-size: .82rem; color: var(--ink-2); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; } .destaque .metaEdit { display: flex; align-items: center; gap: .45rem; font-size: .76rem; color: var(--muted); } .destaque .metaEdit input { width: 4.2rem; padding: .3rem .45rem; font-size: .85rem; text-align: center; } .destaque .escala { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: auto; } .destaque .degrau { font-size: .68rem; font-weight: 700; white-space: nowrap; padding: .25em .7em; border-radius: 999px; border: 1px solid var(--line-forte); color: var(--muted); background: var(--surface); opacity: .55; } .destaque .degrau[aria-current="true"] { opacity: 1; border-color: transparent; } .degrau-ok { --d: var(--st-done); } .degrau-atencao { --d: var(--st-wait); } .degrau-alto { --d: var(--st-miss); } .degrau-critico { --d: var(--st-crit); } .destaque .degrau[aria-current="true"] { color: var(--d); background: color-mix(in srgb, var(--d) 14%, var(--mistura)); } /* Tons — os mesmos nomes valem para cartão e destaque */ .cartao[data-tom="marca"], .destaque[data-tom="marca"] { --tom: var(--ocu-700); --tom-bg: var(--ocu-50); } .cartao[data-tom="calmo"], .destaque[data-tom="calmo"] { --tom: var(--calmo); --tom-bg: var(--surface-2); } .cartao[data-tom="ok"], .destaque[data-tom="ok"] { --tom: var(--st-done); --tom-bg: var(--st-done-bg); } .cartao[data-tom="andamento"], .destaque[data-tom="andamento"] { --tom: var(--st-run); --tom-bg: var(--st-run-bg); } .cartao[data-tom="atencao"], .destaque[data-tom="atencao"] { --tom: var(--st-wait); --tom-bg: var(--st-wait-bg); } .cartao[data-tom="alto"], .destaque[data-tom="alto"] { --tom: var(--st-miss); --tom-bg: var(--st-miss-bg); } .cartao[data-tom="critico"], .destaque[data-tom="critico"] { --tom: var(--st-crit); --tom-bg: var(--st-crit-bg); } /* Só o que passou do limite pulsa. Se tudo piscasse, nada chamaria atenção. */ .cartao[data-tom="alto"], .cartao[data-tom="critico"], .destaque[data-tom="alto"], .destaque[data-tom="critico"] { animation: bater 2.6s ease-in-out infinite; } @keyframes bater { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tom) 0%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--tom) 15%, transparent); } } .linha { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; } .col { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .cresce { flex: 1; min-width: 200px; } /* ---------- Formulário ---------- */ label { font-size: .68rem; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; color: var(--muted); } input[type="text"], input[type="number"], select { font-family: inherit; font-size: .98rem; padding: .62rem .75rem; border: 1px solid var(--line-forte); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); width: 100%; transition: border-color .15s, box-shadow .15s; } input[type="text"]:hover, input[type="number"]:hover, select:hover { border-color: var(--seg-500); } input[type="text"]:focus, input[type="number"]:focus, select:focus { outline: none; border-color: var(--seg-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seg-500) 18%, transparent); } input.grande { font-size: 1.1rem; padding: .8rem .85rem; } button:focus-visible, a:focus-visible { outline: 2px solid var(--seg-500); outline-offset: 2px; } button { font-family: inherit; font-size: .89rem; font-weight: 600; padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid transparent; background: var(--seg-700); color: var(--sobre-marca); cursor: pointer; transition: filter .15s, background .15s, border-color .15s; white-space: nowrap; } button:hover { filter: brightness(1.1); } button:disabled { opacity: .35; cursor: not-allowed; filter: none; } button.fantasma { background: transparent; color: var(--ink-2); border-color: var(--line-forte); } button.fantasma:hover { background: var(--surface-2); filter: none; } button.perigo { background: transparent; color: var(--st-miss); border-color: color-mix(in srgb, var(--st-miss) 40%, transparent); } button.perigo:hover { background: var(--st-miss-bg); filter: none; } button.ok { background: var(--st-done); } button.grande { font-size: .98rem; padding: .72rem 1.5rem; } button.pequeno { font-size: .8rem; padding: .38rem .85rem; } /* Escolhas (segmento, vínculo) */ .escolhas { display: flex; gap: .45rem; flex-wrap: wrap; } .escolha { border: 1px solid var(--line-forte); background: var(--surface); color: var(--ink-2); border-radius: var(--r-sm); padding: .55rem 1rem; font-weight: 600; cursor: pointer; font-size: .9rem; transition: background .15s, border-color .15s, color .15s; } .escolha:hover { border-color: var(--seg-500); background: var(--surface-2); filter: none; } .escolha[aria-pressed="true"] { border-color: var(--seg-700); background: var(--seg-700); color: var(--sobre-marca); } /* O botão de segmento carrega a cor do próprio segmento */ .escolha[data-seg="ocupacional"][aria-pressed="true"] { background: var(--ocu-700); border-color: var(--ocu-700); } .escolha[data-seg="especialidades"][aria-pressed="true"] { background: var(--esp-700); border-color: var(--esp-700); } /* ---------- Lista de empresas (combobox) ---------- Campo fechado: só sai daqui empresa que existe em dim_empresas. O atendente digita para filtrar, mas o valor só é aceito por clique ou Enter — texto solto é descartado ao sair do campo. É essa amarração que dá ao RH da empresa, depois, uma lista que fecha. */ /* Linha de campos que precisa nascer alinhada mesmo quando uma coluna ganha texto embaixo. O padrão de .linha é alinhar pelo FIM, e isso funciona enquanto todas as colunas terminam juntas — bastou a empresa ganhar a nota de "421 na base" para o CPF descer sozinho. Alinhando pelo topo, com rótulo e controle de altura fixa, as três colunas começam na mesma linha e o que sobra desce por baixo. */ .linha.alinha-topo { align-items: flex-start; } .linha.alinha-topo > .col > label { min-height: 1.15rem; display: flex; align-items: flex-end; gap: .3rem; } .linha.alinha-topo input[type="text"], .linha.alinha-topo .escolha { min-height: 44px; } .linha.alinha-topo .escolhas { min-height: 44px; } /* A nota e o botão de atualizar moram embaixo do campo, juntos: é ali que se lê "extraída do SOC há 3 dias", e a ação tem de estar onde está o motivo dela. No rótulo, o botão engordava a linha e desalinhava tudo. */ .combo-rodape { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .6rem; margin-top: .15rem; } .combo-rodape .combo-nota { flex: 0 1 auto; min-width: 0; } .combo-rodape .mini { flex: none; } button.mini { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .22rem .6rem; background: transparent; color: var(--seg-700); border-color: color-mix(in srgb, var(--seg-500) 45%, transparent); } button.mini:hover { background: var(--seg-50); filter: none; } button.mini:disabled { color: var(--muted); border-color: var(--line); } .combo { position: relative; } .combo[hidden] { display: none; } .combo input.escolhida { font-weight: 600; padding-right: 2.2rem; border-color: var(--seg-500); background: var(--seg-50); cursor: default; } .combo-x { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 1.55rem; height: 1.55rem; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; background: transparent; color: var(--ink-2); border-color: transparent; } .combo-x:hover { background: var(--surface); filter: none; } .combo-lista { position: absolute; z-index: 40; top: calc(100% + .3rem); left: 0; right: 0; /* Razao social nao cabe na largura do campo; a lista pode passar dele */ min-width: min(28rem, 88vw); max-height: 17rem; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-forte); border-radius: var(--r-sm); box-shadow: var(--sombra-md); } .combo-lista[hidden] { display: none; } .combo-item { display: flex; flex-direction: column; gap: .05rem; padding: .45rem .7rem; cursor: pointer; border-bottom: 1px solid var(--line); } .combo-item:last-child { border-bottom: none; } .combo-item b { font-size: .9rem; font-weight: 600; } .combo-item small { font-size: .72rem; color: var(--muted); font-family: var(--mono); } .combo-item:hover, .combo-item.sob { background: var(--seg-50); } /* Contrato encerrado continua na lista: quem saiu ainda manda gente para o demissional. Fica visivelmente de lado, não escondido. */ .combo-item.inativa b { color: var(--muted); font-weight: 500; } .combo-item.inativa { background: var(--surface-2); } .combo-particular { border-bottom: 2px solid var(--line-forte); } .combo-particular b { color: var(--st-wait); } .combo-vazio { padding: .7rem; font-size: .85rem; color: var(--muted); } .combo-nota { font-size: .73rem; color: var(--muted); line-height: 1.35; } .combo-nota.ruim { color: var(--st-miss); font-weight: 600; } /* ---------- Blocos de alerta ---------- Existem para uma coisa só: ninguém pode ficar avulso. Aparecem quando há paciente parado — chamado e esquecido no balcão, em sala com o número trocado, travado sem pagamento, ou vindo de um dia que já virou. Se estiverem escondidos, é porque está tudo andando. */ .bloco.alerta-bloco { border-color: color-mix(in srgb, var(--st-miss) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-miss) 8%, transparent), var(--sombra); } .bloco.alerta-bloco > h2 { color: var(--st-miss); } .bloco.alerta-bloco > h2 .conta { background: var(--st-miss); color: var(--sobre-tom); } .item .explica { color: var(--muted); font-size: .8rem; } a.tela-link { font-family: inherit; font-size: .89rem; font-weight: 600; padding: .6rem 1.1rem; border-radius: 999px; background: var(--seg-700); color: var(--sobre-marca); text-decoration: none; white-space: nowrap; align-self: center; } a.tela-link:hover { filter: brightness(1.1); } /* ---------- Etiquetas ---------- */ .chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; padding: .24em .7em; border-radius: 999px; border: 1px solid var(--line-forte); color: var(--ink-2); background: var(--surface); white-space: nowrap; letter-spacing: .02em; } .chip-ocupacional { border-color: transparent; color: var(--ocu-700); background: var(--ocu-50); } .chip-especialidades { border-color: transparent; color: var(--esp-700); background: var(--esp-50); } .chip-vinculo { border-color: transparent; background: var(--ink); color: var(--surface); letter-spacing: .06em; font-size: .7rem; } .st { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; padding: .22em .65em; border-radius: 999px; white-space: nowrap; } .st::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; } .st-wait { color: var(--st-wait); background: var(--st-wait-bg); } .st-run { color: var(--st-run); background: var(--st-run-bg); } .st-done { color: var(--st-done); background: var(--st-done-bg); } .st-miss { color: var(--st-miss); background: var(--st-miss-bg); } /* ---------- Filas ---------- */ .fila { display: flex; flex-direction: column; gap: .5rem; } .item { border: 1px solid var(--line); border-left: 3px solid var(--seg-500); border-radius: var(--r); padding: .8rem .95rem; display: flex; align-items: center; gap: .9rem; background: var(--surface); flex-wrap: wrap; transition: box-shadow .15s; } .item:hover { box-shadow: var(--sombra); } /* Paciente que está em outra sala: recuado, mas NÃO apagado — o opacity valia enquanto o item era só um nome; agora ele carrega a trilha, e é justamente essa a informação que o profissional abriu para ler. */ .item.ocupado { border-left-color: var(--line-forte); background: var(--surface-2); } .item.ocupado .quem, .item.ocupado .tempo { opacity: .62; } .item.ocupado .detalhe { opacity: 1; } .item .quem { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: .3rem; } .item .nome { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; } .item .sub { font-size: .8rem; color: var(--muted); display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; } .item .tempo { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--muted); white-space: nowrap; } .item .tempo.alerta { color: var(--st-miss); font-weight: 700; } .vazio { color: var(--muted); font-size: .88rem; padding: 1.5rem; text-align: center; border: 1px dashed var(--line-forte); border-radius: var(--r); } /* ---------- Em andamento ---------- */ .andamento { border: 1px solid color-mix(in srgb, var(--seg-500) 35%, transparent); background: linear-gradient(180deg, var(--seg-50), var(--surface)); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; box-shadow: var(--sombra); } .andamento .quem { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: .35rem; } .andamento .nome { font-size: 1.4rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; } .andamento .sub { font-size: .82rem; color: var(--ink-2); display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; } .andamento .cron { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--seg-700); } .andamento .cron.alerta { color: var(--st-miss); } /* ---------- Exames ---------- */ .exames { display: grid; grid-template-columns: 1fr; gap: .45rem; } @media (min-width: 640px) { .exames { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .exames { grid-template-columns: 1fr 1fr 1fr; } } .exame { display: flex; align-items: center; gap: .65rem; border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .75rem; cursor: pointer; background: var(--surface); transition: background .15s, border-color .15s, box-shadow .15s; } .exame:hover { border-color: var(--seg-500); background: var(--seg-50); } .exame input { width: 18px; height: 18px; accent-color: var(--seg-700); cursor: pointer; flex: none; } .exame .txt { display: flex; flex-direction: column; min-width: 0; } .exame .txt b { font-size: .9rem; font-weight: 600; } .exame .setor { font-size: .72rem; color: var(--muted); } .exame.marcado { border-color: var(--seg-500); background: var(--seg-50); } .exame.sugerido { box-shadow: inset 3px 0 0 var(--seg-300); } .exame.sugerido .setor::after { content: " · sugerido"; color: var(--seg-700); font-weight: 700; } .exame.travado { opacity: .8; cursor: not-allowed; background: var(--surface-2); border-style: dashed; } .exame.travado input { cursor: not-allowed; } /* ---------- Avisos ---------- */ .aviso { border-radius: var(--r); background: var(--surface-2); padding: .75rem .95rem; font-size: .85rem; color: var(--ink-2); border-left: 3px solid var(--seg-500); } .aviso.alerta { border-left-color: var(--st-miss); background: var(--st-miss-bg); } .aviso.suave { background: transparent; border: 1px dashed var(--line-forte); border-left: 3px solid var(--seg-300); } /* ---------- Diálogo ---------- */ .fundo { position: fixed; inset: 0; background: rgba(6, 40, 44, .5); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 60; } .fundo[hidden] { display: none; } .dialogo { background: var(--surface); border-radius: var(--r-lg); padding: 1.4rem; max-width: 480px; width: 100%; display: flex; flex-direction: column; gap: .9rem; box-shadow: var(--sombra-md); } .dialogo h3 { margin: 0; font-size: 1.12rem; letter-spacing: -.01em; } .dialogo p { margin: 0; color: var(--ink-2); font-size: .9rem; } /* ---------- Aviso flutuante ---------- Confirmação que aparece onde o olho está: no topo, sem depender de o usuário rolar a página para descobrir que a ação funcionou. */ .toast { position: fixed; top: 5.6rem; left: 50%; transform: translateX(-50%) translateY(-12px); background: var(--seg-700); color: var(--sobre-marca); padding: .8rem 1.3rem; border-radius: 999px; font-size: .93rem; font-weight: 600; box-shadow: var(--sombra-md); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 2rem); } .toast.aparece { opacity: 1; transform: translateX(-50%) translateY(0); } .toast .marca-ok { width: 1.15em; height: 1.15em; border-radius: 50%; background: color-mix(in srgb, var(--sobre-marca) 25%, transparent); display: inline-flex; align-items: center; justify-content: center; font-size: .8em; flex: none; } /* ---------- Trilha do paciente ---------- */ .trilha { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; } .passo { font-size: .7rem; font-weight: 600; padding: .2em .6em; border-radius: 999px; border: 1px solid var(--line-forte); color: var(--muted); white-space: nowrap; } .passo.feito { background: var(--st-done-bg); color: var(--st-done); border-color: transparent; } .passo.agora { background: var(--st-run-bg); color: var(--st-run); border-color: transparent; font-weight: 700; } /* ---------- Trilha aberta: os exames do paciente ---------- A sala vê a fila do SEU exame, mas o paciente é um só: para saber se pode chamar agora, se ele acabou de sair de outra sala ou se ainda tem meia manhã pela frente, é preciso enxergar o dia inteiro dele. Daí o botão que abre a lista completa dentro do próprio item da fila. */ button.mais { width: 2.1rem; height: 2.1rem; padding: 0; flex: none; border-radius: 50%; background: transparent; color: var(--ink-2); border: 1px solid var(--line-forte); font-size: 1.25rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } button.mais:hover { background: var(--surface-2); filter: none; } button.mais[aria-expanded="true"] { background: var(--seg-700); border-color: var(--seg-700); color: var(--sobre-marca); } .detalhe { flex-basis: 100%; margin-top: .5rem; padding-top: .7rem; border-top: 1px dashed var(--line-forte); display: flex; flex-direction: column; gap: .1rem; } .detalhe[hidden] { display: none; } .detalhe .resumo { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .35rem; } .etapa-linha { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .34rem .5rem; border-radius: var(--r-sm); font-size: .87rem; } .etapa-linha .bola { width: .72rem; height: .72rem; border-radius: 50%; flex: none; background: var(--bola); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bola) 18%, transparent); } .etapa-linha .exame-nome { font-weight: 600; } .etapa-linha .quando { color: var(--muted); font-size: .8rem; } .etapa-linha .aqui-marca { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--seg-700); background: var(--seg-50); padding: .15em .55em; border-radius: 999px; } .etapa-linha[data-sit="aguardando"] { --bola: var(--bola-espera); } .etapa-linha[data-sit="andamento"] { --bola: var(--bola-agora); background: color-mix(in srgb, var(--bola-agora) 10%, transparent); } .etapa-linha[data-sit="concluido"] { --bola: var(--bola-feito); } .etapa-linha[data-sit="ausente"] { --bola: var(--bola-falta); } .etapa-linha[data-sit="concluido"] .exame-nome { color: var(--muted); font-weight: 500; } /* O exame desta sala, no meio dos outros: sem isso o profissional perde a própria linha na lista de quem tem oito exames. */ .etapa-linha.aqui { background: var(--seg-50); } .etapa-linha.aqui .exame-nome { font-weight: 700; } /* Legenda — as cores só funcionam se estiverem escritas em algum lugar */ .legenda { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .74rem; color: var(--muted); } .legenda span { display: inline-flex; align-items: center; gap: .35rem; } .legenda span::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--bola); } .legenda .l-espera { --bola: var(--bola-espera); } .legenda .l-agora { --bola: var(--bola-agora); } .legenda .l-feito { --bola: var(--bola-feito); } /* ============================================================ Dados do particular, conta a receber e tabela de preços Tudo aqui nasceu do mesmo pedido: o particular vem de uma empresa sem contrato, então nós é que mandamos o ASO para ele, e nós é que recebemos na hora. Contato e dinheiro são as duas coisas que o balcão não pode deixar passar — por isso ganharam desenho próprio, e não mais uma linha de formulário no meio das outras. ============================================================ */ /* ---------- Para onde vai o ASO ---------- */ .bloco-particular { border: 1px dashed var(--line-forte); border-left: 3px solid var(--st-wait); border-radius: var(--r); padding: .85rem .95rem; display: flex; flex-direction: column; gap: .55rem; background: color-mix(in srgb, var(--st-wait-bg) 45%, transparent); } .titulo-particular { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .titulo-particular b { font-size: .95rem; } .bloco-particular .combo-nota.falta { color: var(--st-miss); font-weight: 600; font-size: .78rem; } /* "E-mail para receber ASO + exames" ocupa duas linhas e empurrava só o campo dele para baixo, desalinhando a fileira inteira. Todos os rótulos deste bloco reservam as duas linhas, e os campos nascem na mesma altura. */ .bloco-particular .linha.alinha-topo > .col > label { min-height: 2.35rem; } /* O "· ok / · confira" ao lado do rótulo, no mesmo lugar em que o CPF do paciente já dizia isso — o olho procura no canto que já conhece. */ .aviso-campo { text-transform: none; letter-spacing: 0; font-weight: 600; } .aviso-campo.bom { color: var(--st-done); } .aviso-campo.ruim { color: var(--st-miss); } input[type="email"], input[type="date"], input[type="tel"] { font-family: inherit; font-size: .98rem; padding: .62rem .75rem; border: 1px solid var(--line-forte); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); width: 100%; transition: border-color .15s, box-shadow .15s; } input[type="email"]:hover, input[type="date"]:hover, input[type="tel"]:hover { border-color: var(--seg-500); } input[type="email"]:focus, input[type="date"]:focus, input[type="tel"]:focus { outline: none; border-color: var(--seg-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seg-500) 18%, transparent); } .linha.alinha-topo input[type="email"], .linha.alinha-topo input[type="date"], .linha.alinha-topo input[type="tel"] { min-height: 44px; } /* ---------- A conta do particular ---------- O valor fica GRANDE porque é dito em voz alta, com o paciente na frente, e conferido contra a maquininha. Número pequeno no meio de um formulário é número que se lê errado. */ .cobranca { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; border-radius: var(--r); border: 1px solid var(--st-miss); background: var(--st-miss-bg); padding: .9rem 1rem; } .cobranca .conta { display: flex; flex-direction: column; gap: .1rem; min-width: 230px; flex: 1; } .cobranca .rotulo { font-size: .68rem; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; color: var(--ink-2); } .cobranca .valor { font-size: 2.1rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); } .cobranca .itens { font-size: .78rem; color: var(--ink-2); } .cobranca .lado { display: flex; flex-direction: column; gap: .45rem; justify-content: center; flex: 1.2; min-width: 260px; } .cobranca .pagar { display: flex; align-items: center; gap: .55rem; text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--ink); cursor: pointer; font-weight: 400; } .cobranca .pagar input { width: 18px; height: 18px; flex: none; accent-color: var(--st-done); } .cobranca a.mini { align-self: flex-start; text-decoration: none; } /* Link com cara de botão pequeno — o mesmo desenho de button.mini */ a.mini { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .22rem .6rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--seg-500) 45%, transparent); background: transparent; color: var(--seg-700); } a.mini:hover { background: var(--seg-50); } /* O preço ao lado do exame. Só aparece no particular: em SOC e SOCNET a conta é da empresa, e valor na tela seria número sem dono. */ .exame .preco { margin-left: auto; flex: none; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--st-done); } .exame .preco.vazio { color: var(--st-miss); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } /* ---------- Tabela de preços ---------- */ .tabela-precos { min-width: 640px; } .tabela-precos td { vertical-align: middle; } .tabela-precos tr:hover td { background: var(--surface-2); } input.valor-venda { width: 8.5rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; padding: .42rem .6rem; } input.valor-venda::placeholder { font-weight: 400; font-style: italic; color: var(--st-miss); text-align: right; } input.valor-venda.ruim { border-color: var(--st-miss); } .etiqueta-propria { margin-left: .45rem; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--seg-700); background: var(--seg-50); border-radius: 999px; padding: .1rem .45rem; } /* Diálogo que carrega formulário inteiro (o Ajustar da triagem) */ .dialogo.largo { max-width: 780px; max-height: 88vh; overflow-y: auto; } /* ============================================================ Gráficos e relatórios As cores de série são a paleta de referência de visualização de dados, validada para contraste e para daltonismo NOS DOIS temas contra as superfícies desta base (#FFFFFF e #0E2529). A ordem é fixa: série 1 é sempre a mesma cor, não a "primeira que sobrou" — se um filtro tira uma categoria, as que ficam não podem trocar de cor no meio da leitura. Fora da rosca, gráfico daqui usa UMA cor só: uma série, uma cor. Cor diferente por barra sugere categoria onde só há tamanho. ============================================================ */ :root { --g-barra: var(--ocu-500); --g-trilho: var(--surface-2); --g-grade: var(--line); --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100; --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #4a3aa7; --serie-8: #e34948; } [data-tema="escuro"] { --g-barra: #46C3BA; --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --serie-8: #e66767; } .grafico { position: relative; width: 100%; } .g-svg { display: block; width: 100%; height: auto; overflow: visible; } .g-barra { fill: var(--g-barra); } .g-barra.g-agrupado { fill: var(--calmo); } /* a cauda somada não é uma categoria */ .g-trilho { fill: var(--g-trilho); } .g-grade { stroke: var(--g-grade); stroke-width: 1; } .g-eixo-linha { stroke: var(--line-forte); stroke-width: 1; } .g-alvo { fill: transparent; } /* área de hover, maior que a marca */ /* Texto de gráfico usa tinta de texto, nunca a cor da barra */ .g-eixo { fill: var(--muted); font-size: 11px; font-family: var(--font); } .g-rotulo { fill: var(--ink-2); font-size: 12px; font-family: var(--font); } .g-valor { fill: var(--ink); font-size: 11.5px; font-weight: 700; font-family: var(--font); font-variant-numeric: tabular-nums; } .g-var { font-size: 10.5px; font-weight: 700; font-family: var(--font); } .g-var.g-sobe { fill: var(--st-done); } .g-var.g-desce { fill: var(--st-miss); } .g-var.g-igual { fill: var(--muted); } .g-miolo { fill: var(--ink); font-size: 1.35rem; font-weight: 800; font-family: var(--font); font-variant-numeric: tabular-nums; } .g-marca:hover .g-barra { filter: brightness(1.12); } .g-marca:hover .g-trilho { fill: color-mix(in srgb, var(--g-barra) 14%, var(--g-trilho)); } .g-dica { position: absolute; z-index: 30; transform: translate(-50%, -100%); pointer-events: none; background: var(--barra); color: var(--sobre-barra); border-radius: var(--r-sm); padding: .4rem .6rem; font-size: .78rem; line-height: 1.35; box-shadow: var(--sombra-md); white-space: nowrap; display: flex; flex-direction: column; } .g-dica[hidden] { display: none; } .g-dica b { font-size: .95rem; font-variant-numeric: tabular-nums; } .g-dica span { opacity: .8; } /* ---------- Rosca e legenda ---------- */ .g-rosca-caixa { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; } .g-fatia { /* O anel entre fatias é a superfície aparecendo: separa sem desenhar uma borda que competiria com a cor. */ stroke: var(--surface); stroke-width: 2; } .g-fatia.g-agrupado { fill: var(--calmo); } .g-fatia:hover { filter: brightness(1.1); } .g-legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 200px; } .g-legenda li { display: flex; align-items: center; gap: .5rem; padding: .22rem 0; font-size: .84rem; border-bottom: 1px solid var(--line); } .g-legenda li:last-child { border-bottom: none; } .g-legenda .g-ponto { width: .72rem; height: .72rem; border-radius: 3px; flex: none; } .g-legenda .g-nome { flex: 1; min-width: 0; color: var(--ink-2); } .g-legenda .g-num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-size: .78rem; white-space: nowrap; } .serie-1 { fill: var(--serie-1); background: var(--serie-1); } .serie-2 { fill: var(--serie-2); background: var(--serie-2); } .serie-3 { fill: var(--serie-3); background: var(--serie-3); } .serie-4 { fill: var(--serie-4); background: var(--serie-4); } .serie-5 { fill: var(--serie-5); background: var(--serie-5); } .serie-6 { fill: var(--serie-6); background: var(--serie-6); } .serie-7 { fill: var(--serie-7); background: var(--serie-7); } .serie-8 { fill: var(--serie-8); background: var(--serie-8); } /* path não tem background, e span não tem fill — cada um usa o que entende */ path.serie-1, path.serie-2, path.serie-3, path.serie-4, path.serie-5, path.serie-6, path.serie-7, path.serie-8 { background: none; } /* Dois gráficos lado a lado quando cabe, um sobre o outro quando não */ .dupla { display: grid; grid-template-columns: 1fr; gap: 1.15rem; align-items: start; } @media (min-width: 1000px) { .dupla { grid-template-columns: 1fr 1fr; } } .dupla.pesa-esquerda { grid-template-columns: 1fr; } @media (min-width: 1000px) { .dupla.pesa-esquerda { grid-template-columns: 1.35fr 1fr; } } /* ---------- Barra de filtros ---------- Uma linha só, acima do que ela filtra, e sempre visível: filtro que exige rolar para cima é filtro que o usuário esquece que está ligado. */ .filtros { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; } .filtros .col { min-width: 150px; } .filtros .col.estreita { min-width: 118px; } .atalhos { display: flex; gap: .35rem; flex-wrap: wrap; } .atalho { font-size: .78rem; font-weight: 600; padding: .42rem .8rem; border-radius: 999px; background: transparent; color: var(--ink-2); border: 1px solid var(--line-forte); } .atalho:hover { background: var(--surface-2); filter: none; } .atalho[aria-pressed="true"] { background: var(--seg-700); color: var(--sobre-marca); border-color: transparent; } .filtro-nota { font-size: .8rem; color: var(--ink-2); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } /* ---------- Tabela do relatório ---------- */ .rolagem { overflow-x: auto; } /* Um mês de movimento são centenas de linhas: sem caixa própria a página ficava com quinze mil pixels de altura, o cabeçalho fixo não fixava nada e os filtros no topo sumiam de vista. A tabela rola por dentro. */ .rolagem.alta { max-height: 62vh; overflow-y: auto; } .tabela-rel { min-width: 900px; } .tabela-rel th { position: sticky; top: 0; background: var(--surface); z-index: 2; } .tabela-rel tbody tr:hover td { background: var(--surface-2); } .tabela-rel td.mono { white-space: nowrap; } .tabela-rel .linha-exames td { background: var(--surface-2); font-size: .8rem; color: var(--ink-2); padding: .6rem .8rem .8rem; } .tabela-rel .linha-exames[hidden] { display: none; } .passos-exame { display: flex; flex-direction: column; gap: .25rem; } .passos-exame .passo-linha { display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline; } .passos-exame b { font-weight: 600; color: var(--ink); min-width: 12rem; } .passos-exame .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .78rem; } button.abrir-linha { font-family: var(--mono); font-size: .9rem; line-height: 1; padding: .25rem .5rem; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); border-color: var(--line-forte); } button.abrir-linha:hover { background: var(--surface-2); filter: none; } /* ============================================================ Configurações — perfis, chaves e a logo do cliente ============================================================ */ /* Os quatro perfis lado a lado: quem lê isto está decidindo quem vê o quê, e precisa comparar as opções sem rolar a tela. */ .perfis { display: grid; grid-template-columns: 1fr; gap: .7rem; } @media (min-width: 760px) { .perfis { grid-template-columns: 1fr 1fr; } } @media (min-width: 1200px) { .perfis { grid-template-columns: repeat(4, 1fr); } } .perfil { border: 1px solid var(--line); border-top: 3px solid var(--seg-500); border-radius: var(--r); padding: .8rem .9rem; background: var(--surface); display: flex; flex-direction: column; gap: .35rem; } .perfil b { font-size: .96rem; letter-spacing: -.01em; } .perfil .desc { font-size: .82rem; color: var(--ink-2); line-height: 1.4; } .perfil .modulos { font-size: .74rem; color: var(--muted); border-top: 1px dashed var(--line-forte); padding-top: .4rem; margin-top: .15rem; } .perfil .marca { margin-top: .1rem; } /* Interruptor de parâmetro: rótulo clicável, alvo grande */ label.troca { display: flex; align-items: center; gap: .55rem; text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--ink); font-weight: 400; cursor: pointer; min-height: 44px; } label.troca input { width: 18px; height: 18px; accent-color: var(--seg-700); flex: none; } /* A logo do cliente dentro da tabela do portal */ .celula-logo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .celula-logo img { height: 34px; max-width: 120px; object-fit: contain; background: var(--surface-2); border-radius: var(--r-sm); padding: .2rem .35rem; } table { border-collapse: collapse; width: 100%; font-size: .86rem; } th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: .5rem .6rem; border-bottom: 1px solid var(--line); } td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); } td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .rodape-nota { font-size: .78rem; color: var(--muted); text-align: center; padding: 0 0 2rem; } @media (prefers-reduced-motion: reduce) { * { transition-duration: .001ms !important; animation-duration: .001ms !important; } }