:root { /* Ponte: os nomes antigos apontam para os TOKENS da Plataforma (plataforma.css). Sem hex aqui — as cores vêm do contrato. A limpeza dos hex inline restantes entra no ciclo de modularização (COM-004, item 1 da CLÍNICA). */ --teal-900:var(--acento); --teal-700:var(--acento); --teal-600:var(--acento); --ink:var(--texto); --ink-soft:var(--texto-2); --line:var(--borda); --bg:var(--fundo); --card:var(--superficie); --amber:var(--atencao); --amber-bg:var(--atencao-suave); --green:var(--ok); --green-bg:var(--ok-suave); --purple:var(--info); --purple-bg:var(--info-suave); --sky:var(--info); --sky-bg:var(--info-suave); --blue:var(--texto-2); --blue-bg:var(--fundo); --red:var(--erro); --red-bg:var(--erro-suave); --slot-h:26px; /* DEVE bater com SLOT_H no core.js (26). Ficou 34 quando o JS virou 24 (12/07) → balões, rótulos de hora e linha do "agora" desalinhavam e o duplo-clique caía em cima de um balão. Se mudar um, mudar o outro. */ } * { box-sizing:border-box; margin:0; padding:0; } /* height:100dvh (viewport dinâmica): no iPhone a barra do Safari aparece/some ao rolar e mudava o 100vh no meio da rolagem — a agenda "travava e liberava". Com dvh a altura acompanha a barra. */ body { font-family:var(--fonte); background:var(--fundo); color:var(--texto); font-size:14px; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; } .aviso { background:var(--atencao-suave); border-bottom:1px solid var(--atencao-borda); color:var(--atencao); font-size:13px; font-weight:500; text-align:center; padding:4px 10px; display:flex; align-items:center; justify-content:center; gap:6px; } .aviso svg { width:14px; height:14px; flex:none; } header { background:var(--card); border-bottom:1px solid var(--line); padding:10px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .subhead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 16px; background:var(--superficie); border-bottom:1px solid var(--borda); } .ir-data { font:inherit; padding:7px 10px; border:1px solid var(--teal-700); border-radius:8px; color:var(--teal-900); background:var(--card); cursor:pointer; } .ir-data:hover { background:var(--teal-50, #f0fbfa); } /* ⭐ A MARCA MÃE NO CABEÇALHO — a trava DEITADA (o médico, 22/08/2026). Dois arquivos, de naturezas diferentes e por motivo, não por acaso: · `solonexa-anel.png` (27.961 bytes) — o anel COLORIDO, com degradê. É IMAGEM porque recolorir um degradê destrói o desenho. Vem do `SOLONEXA-marca/marca/anel/`. Ainda é bitmap: o anel é a única peça da marca que continua sem vetor. · `solonexa-palavra.svg` (2.814 bytes) — a palavra em VETOR de verdade (contorno das oito letras), usada como MÁSCARA: o desenho vem do alfa, a cor vem do `background-color` daqui. Assim a MESMA palavra serve navy no cabeçalho branco e branca por cima de cor, sem um segundo arquivo. E por ser vetor, não borra em tela nenhuma. ⛔ O arquivo tem `fill="#000"` fixo, NÃO `currentColor`: dentro de uma máscara não existe contexto de cor, e o que a máscara lê é o ALFA. Preto opaco = "mostra aqui". ⚠️ Máscara falha CALADA — arquivo sem alfa vira retângulo maciço, sem uma linha no console. Guarda: `scripts/test-marca-mae-no-cabecalho.mjs`. */ /* ⭐ 22/08/2026 — A MARCA-MÃE FICA EM PÉ: o anel em cima, SOLONEXA embaixo dele, e só depois a trava vertical e "Atlas". Decisão do médico depois de ver as duas opções lado a lado. — Isto é GRID e não reordenação do HTML de propósito: a ordem de leitura no código continua anel → SOLONEXA → Atlas, que é a ordem que o leitor de tela anuncia. A palavra não é centralizada por margem: quem se centra é o ANEL (`justify-self`), porque a coluna 1 tem a largura do item largo, que é a palavra. */ .brand { display:grid; grid-template-columns:auto auto auto; grid-template-rows:auto auto; align-items:center; column-gap:12px; row-gap:4px; flex:none; min-width:0; } .nx-anel { grid-column:1; grid-row:1; justify-self:center; width:34px; height:35px; display:block; } .nx-palavra { grid-column:1; grid-row:2; width:96px; height:calc(96px * 75.40 / 628.61); background-color:var(--nx-navy, #0F1E4E); -webkit-mask:url(solonexa-palavra.svg) no-repeat center/contain; mask:url(solonexa-palavra.svg) no-repeat center/contain; } /* a trava e o "Atlas" atravessam as DUAS linhas — são vizinhos da marca inteira, não do anel */ .brand-risco { grid-column:2; grid-row:1 / span 2; width:1px; height:46px; background:var(--line); } .brand-txt { grid-column:3; grid-row:1 / span 2; } .brand-txt b { color:var(--teal-900); font-size:15px; display:block; } .brand-txt span { font-size:var(--tam-secund); color:var(--ink-soft); } /* ⭐ `.mini` — A CLASSE QUE 121 LUGARES PEDIAM E NINGUÉM TINHA ESCRITO (o médico, 21/08/2026). Achada em 18/08 e anotada como "não consertado"; ele mandou consertar. Era estilo pedido 121× e definido ZERO vezes: toda explicação em letra miúda do Atlas saía do mesmo tamanho do texto normal — a tela vira parede de texto e a pessoa não acha o número. ⛔ SÓ TAMANHO, de propósito. A evidência está no próprio código: 22 usos escrevem a cor à mão (`--ink-soft`/`--texto-2`) e 15 escrevem `font-weight:400` — ou seja, quem escreveu NUNCA contou com esta classe para cor nem peso. Dar cor aqui repintaria ~100 trechos que eu não conferi, inclusive `.mini` dentro de faixa vermelha, que viraria cinza e perderia o alarme. ⚠️ `--tam-secund` é 13px e está declarado como "mínimo absoluto — nada abaixo disso". */ .mini { font-size:var(--tam-secund); line-height:1.45; } /* ⭐ CAIXA DE ESCREVER É SEMPRE BRANCA (o médico, 19/08) — "caixa de escrever sempre fundo branco". Antes desta linha NENHUM campo do Atlas declarava a própria cor de fundo: todos herdavam o branco do navegador. É por isso que ela vem JUNTO com as faixas coloridas abaixo — no dia em que um bloco ganha fundo, o campo dentro dele fica bege e vira "texto solto", e a pessoa não sabe mais onde pode digitar. Declarada uma vez, vale no sistema inteiro, e acompanha o tema escuro sozinha porque --superficie troca junto. ⛔ Caixa/rádio/range/cor/arquivo ficam de fora: neles "fundo" é o próprio desenho do controle. ⛔ Desabilitado e só-leitura são a exceção de propósito — fundo --fundo-2 é como se diz "aqui não dá pra escrever". ⚠️ O :where() NÃO é enfeite: com :not() direto, a cadeia de exclusões pesa (0,5,1) e VENCE o `input:disabled` (0,1,1) — o campo desabilitado saía branco, igualzinho a um onde se escreve, que é exatamente a confusão que esta regra existe pra evitar. :where() não soma especificidade. Pego medindo na produção depois de publicar, não lendo o código. */ input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file])), textarea, select { background:var(--superficie); color:var(--texto); } input:disabled, textarea:disabled, select:disabled { background:var(--fundo-2); } button { font:inherit; cursor:pointer; border:1px solid var(--line); background:var(--card); padding:7px 12px; border-radius:8px; } button:hover { background:var(--bg); } button.ghost { border:none; background:transparent; font-size:16px; } .data-label { font-weight:700; font-size:15px; min-width:220px; text-align:center; text-transform:capitalize; } .spacer { flex:1; } .chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:var(--tam-secund); font-weight:600; border:1px solid var(--line); background:var(--card); margin-left:6px; } .chip .dot { width:8px; height:8px; border-radius:50%; } .atualizado { font-size:var(--tam-secund); color:var(--ink-soft); } /* overscroll-behavior:contain segura o "rubber-band" do iOS dentro do #cal (não puxa a barra do Safari nem encadeia a rolagem no body) — parte do conserto da rolagem que travava no celular. */ .cal-wrap { flex:1; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .cal-head { position:sticky; top:0; z-index:5; display:grid; background:var(--card); border-bottom:2px solid var(--line); min-width:700px; } .col-head { padding:10px 8px; text-align:center; border-left:1px solid var(--line); font-weight:600; font-size:13px; } .col-head small { display:block; font-weight:400; color:var(--ink-soft); font-size:var(--tam-secund); } .col-head .bar { height:3px; border-radius:2px; margin-top:6px; } .cal-body { display:grid; min-width:700px; } .gutter { position:relative; } .h-label { position:absolute; right:8px; transform:translateY(-50%); font-size:var(--tam-secund); color:var(--ink-soft); } .day-col { position:relative; border-left:1px solid var(--line); background:var(--card); } /* Horário fechado por restrição de agenda (bloqueio). Cinza listrado; cliques passam. */ .bloqueio { position:absolute; left:2px; right:2px; border-radius:6px; z-index:1; pointer-events:none; background:repeating-linear-gradient(45deg,#e5e9ef,#e5e9ef 6px,#cfd6e0 6px,#cfd6e0 12px); border:1px solid #cbd5e1; color:#475569; font-size:10.5px; line-height:1.3; padding:2px 6px; overflow:hidden; } .bloqueio b { font-size:var(--tam-secund); text-transform:uppercase; letter-spacing:.3px; color:#64748b; } .slot { height:var(--slot-h); border-bottom:1px solid var(--fundo); } .slot.hour { border-bottom-color:var(--borda); } /* Balão de LINHA ÚNICA (COM-009): hora · nome · procedimento(ellipsis) numa linha só, largura total. EXCEÇÃO ao mínimo de 13px do COM-004 (registrada 07/07, aprovada pelo médico): a linha é compacta de propósito (SLOT_H fixo) — em 13px+ o horário corta ("13:0" em vez de "13:00"). COM-009 manda: "densidade do Support sobre a estética dos tokens". Só os elementos DENTRO do balão ficam pequenos; o resto do app segue o mínimo de 13px normalmente. */ .appt { position:absolute; border-radius:8px; padding:0 9px; overflow:hidden; border:1px solid; z-index:2; box-shadow:var(--sombra); transition:box-shadow .12s; display:flex; align-items:center; gap:7px; white-space:nowrap; } /* 12/07: balão alto (duração) — linha de texto CENTRALIZADA no balão */ .appt:hover { box-shadow:0 3px 10px rgba(15,23,42,.14); z-index:4; } .appt .a-time { font-weight:700; font-size:12px; opacity:.9; flex:none; } .appt .a-nome { font-weight:600; font-size:12.5px; color:var(--ink); flex:none; max-width:58%; overflow:hidden; text-overflow:ellipsis; } .appt .a-proc { opacity:.55; font-size:10px; text-transform:uppercase; letter-spacing:.2px; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; } .appt .a-flag { flex:none; font-size:12px; } /* 12/07: ícones editar/excluir um pouco maiores (o ✏️/🗑 inline vai a 14px) */ /* BALÃO ESTREITO CONDENSA PRA BAIXO (o médico, 29/08). Quando o balão divide a largura com outro, a informação desce pra uma 2ª linha em vez de ser cortada pro lado: nome em cima; procedimento, valor e botões embaixo. O .a-br é a quebra — só existe quando está estreito. Balão que tem a linha inteira pra si continua exatamente como antes. */ /* NADA DE LETRA COMIDA EM CIMA (o médico, 29/08). O balão centraliza o conteúdo; se o conteúdo for mais alto que a caixa, o excesso some pros DOIS lados e come a primeira linha. A cura é o conteúdo caber: os controles de dentro do balão perdem a folga que não usavam. Medido no navegador com altura livre — 1 linha passou de 24px para 21px, e a caixa tem 22px. */ .appt .atd-btn { line-height:14px; } .appt .a-flag { line-height:1.1; } .appt .a-flag span { font-size:12px; } .appt .a-quick button { line-height:1.2; } .appt .tele-appt { line-height:1.3; } .appt .a-br { display:none; } .appt.estreito { flex-wrap:wrap; align-content:center; padding:2px 8px; gap:0 6px; } .appt.estreito .a-nome, .appt.estreito .a-time { line-height:1.2; } .appt.estreito .a-proc { line-height:1.3; } .appt.estreito .a-br { display:block; flex-basis:100%; height:0; margin:0; } /* ⛔ Balao ESTREITO nao carrega botao de acao (o médico, 29/08/2026). Com "Todos" ligado as colunas ficam finas; ai "🩺 Registrar" + "↩️ Estornar" empilhavam em 4 linhas numa caixa de 2 e COMIAM a hora e o NOME — sumia justo quem e o paciente. Os dois continuam onde sempre estiveram: no clique do balao (menu da bolinha de status) e na tela de atendimento. */ .appt.estreito .atd-btn-reg, .appt.estreito .atd-btn-est { display:none; } /* ⛔ E nem os icones clicaveis (o médico, 29/08/2026): ✏️ 🗑 ✓ 🚪 comiam o NOME ate sobrar "M...". Todos eles passaram a morar no CLIQUE DIREITO do balao (e na bolinha de status), que funciona em qualquer balao. No balao LARGO os icones continuam onde sempre estiveram. */ .appt.estreito .a-acoes, .appt.estreito .a-quick, .appt.estreito .tele-appt { display:none; } /* ⭐ No balao estreito o NOME fica sozinho na 1a linha e a HORA desce pra 2a (o médico, 29/08/2026). Medido: num balao de 100px o nome ia de "Mar…" para "Marilene A…" — 26px de espaco viram 68px. A hora nao se perde: ela continua escrita na 2a linha, e a posicao na grade ja diz o horario. */ .appt.estreito > * { order:5; } .appt.estreito .a-dot { order:0; } .appt.estreito .a-nome { order:1; } .appt.estreito .a-br { order:2; } .appt.estreito .a-time { order:3; } .appt.estreito .a-proc { order:4; } /* No estreito o NOME é quem estica e encolhe (flex-basis 0). Com `flex:none` ele mantinha a largura natural, não cabia ao lado da hora e PULAVA pra linha de baixo — aí a informação descia mais uma linha, o balão precisava de 66px e só tinha 44: era o corte. Medido no navegador com altura livre: assim o pior caso passou de 66px para 42px. */ .appt.estreito .a-nome { flex:1 1 0; min-width:0; max-width:none; } .appt.estreito .a-proc { flex:1 1 0; min-width:0; } /* Chip dos que NÃO vão acontecer: 2+ desmarcado/cancelado/faltou no mesmo horário viram um só, pra pararem de disputar largura com quem vai ser atendido. Clique abre os de verdade. */ .appt.mortos { background:var(--fundo); border-color:var(--line); color:var(--ink-soft); cursor:pointer; box-shadow:none; } .appt.mortos .a-nome { color:var(--ink-soft); } .appt.mortos .a-proc { opacity:.65; } .appt .tele-appt { border:none; background:#ede9fe; color:#6d28d9; border-radius:5px; padding:0 6px; cursor:pointer; font-size:12.5px; flex:none; } /* CORES DE STATUS "estilo Support" (a pedido do médico, 06/07 — "fazer igual a princípio"). Centralizadas aqui; mais vivas que os tokens da plataforma (--atencao é marrom). Formalizar no contrato depois (DEC). */ :root { --st-agendado:#64748b; --st-agendado-bg:#f1f5f9; --st-confirmado:#2563eb; --st-confirmado-bg:#dbeafe; /* AZUL */ --st-espera:#f59e0b; --st-espera-bg:#fef3c7; /* AMARELO — sala de espera */ --st-atendimento:#0d9488; --st-atendimento-bg:#ccfbf1; /* teal — em atendimento */ --st-atendido:#16a34a; --st-atendido-bg:#dcfce7; /* VERDE — atendido */ --st-desmarcado:#dc2626; --st-desmarcado-bg:#fee2e2; /* VERMELHO — paciente DESMARCOU (fica na agenda) */ --st-cancelado:#92400e; --st-cancelado-bg:#f3e8dc; /* MARROM — CANCELOU (fica na agenda) */ --st-faltou:#dc2626; --st-faltou-bg:#fee2e2; /* VERMELHO — faltou */ --st-atrasado:#ea580c; --st-atrasado-bg:#ffedd5; /* LARANJA — passou da hora, não chegou (Rodada 7 32.6) */ } /* Balão colorido pelo status (COM-004): fill suave + dot da cor. Sem faixa fina. */ .appt.agendado { background:var(--st-agendado-bg); border-color:var(--st-agendado); } .appt.confirmado { background:var(--st-confirmado-bg); border-color:var(--st-confirmado); } .appt.espera { background:var(--st-espera-bg); border-color:var(--st-espera); } .appt.atendimento { background:var(--st-atendimento-bg); border-color:var(--st-atendimento); } .appt.atendido { background:var(--st-atendido-bg); border-color:var(--st-atendido); opacity:.82; } /* Desmarcou = vermelho NORMAL (token); só o FALTOU é vermelho BEM MAIS FORTE (o médico, 17/07). */ .appt.desmarcado { background:var(--st-desmarcado-bg); border-color:var(--st-desmarcado); opacity:.72; } .appt.faltou { background:#f87171; border-color:#b91c1c; opacity:1; } .appt.faltou .a-nome { color:#7f1d1d; } .appt.faltou .a-proc { color:#991b1b; opacity:.85; } .appt.cancelado { background:var(--st-cancelado-bg); border-color:var(--st-cancelado); opacity:.72; } .appt { border-width:1px; } .appt.agendado, .appt.confirmado, .appt.espera, .appt.atendimento, .appt.atendido, .appt.cancelado, .appt.desmarcado, .appt.faltou { border-left-width:4px; } .appt .a-dot { width:8px; height:8px; border-radius:50%; flex:none; display:inline-block; } .appt.agendado .a-dot{background:var(--st-agendado)} .appt.confirmado .a-dot{background:var(--st-confirmado)} .appt.espera .a-dot{background:var(--st-espera)} .appt.atendimento .a-dot{background:var(--st-atendimento)} .appt.atendido .a-dot{background:var(--st-atendido)} .appt.desmarcado .a-dot, .appt.faltou .a-dot{background:var(--st-desmarcado)} .appt.cancelado .a-dot{background:var(--st-cancelado)} .appt.atrasado { background:var(--st-atrasado-bg); border-color:var(--st-atrasado); } .appt.atrasado .a-dot{background:var(--st-atrasado)} .appt.cancelado .a-nome { text-decoration:line-through; } /* Fase 1 financeiro: parcela em aberto do paciente — bolinha vermelha na linha da agenda. ⛔ 24/08/2026 — A BOLINHA DIZIA UMA COISA E ERA LIDA COMO OUTRA (reclamação das recepcionistas: "a bolinha de pago não está fiel"). Ela sempre significou "este PACIENTE deve alguma coisa" — nunca "esta consulta não foi paga" —, e isso é de propósito: senão a recepção deixa sair quem deve de outra data (ordem do médico, 20/08, caso de um paciente). Só que na lista do dia ela é um pontinho mudo: a explicação existia apenas no `title`, e ninguém passa o mouse com fila no balcão. Em 24/08, 36 das 70 bolinhas das próximas consultas eram de OUTRA data. Agora a forma carrega o recado, sem precisar de mouse (ordem do médico, 24/08): • CHEIA = deve ESTA consulta. • VAZADA = deve alguma coisa, mas de OUTRA data. ⛔ 29/08/2026 — A COR ESTAVA DIZENDO DUAS COISAS OPOSTAS AO MESMO TEMPO. O âmbar marcava "deve, mas de outra data" (vazada) E TAMBÉM "não deve nada, é consulta futura" (cheia). Num ponto de 6px, `--atencao` e `--erro` são o mesmo borrão marrom-vermelho (o âmbar do tema claro é queimado, não é laranja de verdade): o médico leu a bolinha de uma paciente Morimoto como dívida quando o que ela tem é consulta de 01/12 — três meses à frente. Duas dimensões, dois canais separados: • COR diz SE DEVE ....... vermelho = deve · âmbar = NÃO deve. • FORMA diz DE QUANDO ..... cheia = desta consulta · vazada = de outra data. A `futura` é a ÚNICA âmbar e vem maior e mais fina de propósito: o que a distingue à distância é o PESO (anel fino e claro × ponto sólido e saturado), não o tom — e peso sobrevive a foto de tela, monitor ruim e daltonismo, que é onde a cor sozinha falha. */ /* ⛔⛔ 16/09/2026 — A BOLINHA NÃO EXISTIA NA LISTA "GERAL" DO CELULAR. As três regras estavam presas em `.appt` (o balão da grade), e a lista do celular desenha o mesmo `a-pend` dentro de `.al-nome`: nenhuma regra alcançava, e o ponto saía com ZERO pixel — invisível, calado. Quem abrisse a agenda no telefone em ▦ Geral via todo mundo limpo, inclusive quem deve. É a regra 14 na tela: uma leitura que não aparece vira "não há nada". */ .appt .a-pend, .al-nome .a-pend { width:7px; height:7px; border-radius:50%; flex:none; display:inline-block; background:var(--red); box-shadow:0 0 0 1.5px var(--red-bg); } .appt .a-pend.outra, .al-nome .a-pend.outra { width:8px; height:8px; background:transparent; border:2px solid var(--red); box-shadow:none; } /* Mesma régua na etiqueta escrita da agenda em cards (ac-pend): vazada quando é de outra data. */ .ac-pend.outra { color:var(--red); background:transparent; border:1px solid var(--red); } /* 🟠 CONSULTA A PAGAR (o médico, 28/08) — o que ainda VAI acontecer não é dívida e não pode usar o vermelho. A conta da próxima consulta nasce quando a recepção marca; ela fica laranja até pagar e só vira vermelha 10 dias antes (a régua mora no servidor, `pendencia_faixa`). Na grade ela é a ÚNICA VAZADA ÂMBAR — anel fino, sem miolo: não deve nada. */ /* ⛔ 29/08/2026 (2ª rodada) — A FORMA SOZINHA NÃO BASTOU. O anel fino resolveu o PESO, mas o tom continuou marrom: `--atencao` #B45309 × `--erro` #B91C1C têm o mesmo vermelho (180×185). Conferido no banco: as três bolinhas que o médico leu como dívida eram consultas de 18/09, 01/12 e 19/01 — nenhuma devia nada. Agora usa `--a-pagar`, laranja de verdade, e o anel engrossa pra 2px: cor de 1px de espessura não se lê, por mais certa que ela seja. */ /* ⭐ 16/09/2026 — o anel deixou de ser LARANJA e virou AMARELO (`--a-pagar`, agora #EAB308), por ordem do médico: no monitor da recepção o laranja continuava sendo lido como vermelho, e elas avisaram que paciente com a consulta PAGA estava "com bolinha vermelha". Medido: a paciente do aviso tinha uma única conta em aberto, de 19/10 — faixa `futura`, este anel. A cor estava certa pela régua e errada pelos olhos, que é o único tribunal que interessa aqui. */ .appt .a-pend.futura, .al-nome .a-pend.futura { width:10px; height:10px; background:transparent; border:2px solid var(--a-pagar); box-shadow:none; } /* ⛔⛔ 16/09/2026 — O SELO ESCRITO ERA O ÚNICO LUGAR ONDE O VERMELHO CONDENADO EM 29/08 CONTINUAVA DE PÉ, e é justamente o que aparece no CELULAR: a agenda do telefone abre em ☰ Cartões, onde não há bolinha nenhuma — há esta etiqueta. Ela usava `--amber`, que no tema claro é o #B45309 que a própria régua de 29/08 condenou por ter o mesmo vermelho do `--erro`. Ou seja: no telefone, quem tinha consulta A PAGAR aparecia escrito em vermelho-marrom, ao lado de quem realmente devia. Escrever a mesma coisa em vermelho nas duas era a tela dizendo duas coisas opostas na mesma cor. ⚠️ O texto NÃO vira amarelo: amarelo pequeno sobre fundo claro não se lê (a razão original). Fica a tinta do texto comum, com a moldura amarela dizendo de que grupo ele é — e a PALAVRA ("consulta a pagar") continua carregando o recado, como sempre carregou. */ .ac-pend.futura { color:var(--ink); background:var(--a-pagar-suave); border:1px solid var(--a-pagar); } /* Data clicável da ficha/lista de Pacientes (21/08) e o balão que ela abriu. O destaque é um APONTAR: sai no primeiro clique (limparDestaque, core.js). Só a data+hora é alvo — a linha inteira seria alvo grande demais numa tela usada com o paciente na frente. */ .data-viva { color:var(--teal-700); font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer; border-radius:4px; } .data-viva:hover { background:var(--teal-50, #e9f7f5); } .appt.veio-da-ficha { box-shadow:0 0 0 2px var(--teal-700), 0 2px 10px rgba(15,118,110,.28); z-index:3; } /* DEC-053: selo do FECHAMENTO do plano no balão — quadradinho (≠ bolinha de pendência): verde = total, amarelo = parcial, vermelho = avulso (pior cenário, equipe fica atenta). */ .appt .a-fech { width:7px; height:7px; border-radius:2px; flex:none; display:inline-block; } .appt .a-fech.total { background:var(--st-atendido); } .appt .a-fech.parcial { background:var(--st-espera); } .appt .a-fech.avulso { background:var(--red); box-shadow:0 0 0 1.5px var(--red-bg); } .it-tag { display:inline; flex:none; font-weight:800; font-size:9px; color:#92400e; letter-spacing:.4px; background:#fef3c7; border-radius:4px; padding:1px 4px; } /* 15/10/2026 — INÍCIO DE TRATAMENTO, NÃO PAGO: vermelho dos tokens (o que não está pago é o que não pode passar despercebido); no balão estreito some o "INÍCIO DE TRATAMENTO — " e fica o "NÃO PAGO", que é o recado — o nome do paciente não pode ser comido (regra de 29/08). */ .it-tag.it-nao-pago { color:var(--erro); background:var(--erro-suave); border:1px solid var(--erro-borda); white-space:nowrap; } .it-tag.it-sem-conferir { color:var(--atencao); background:var(--atencao-suave); border-color:var(--atencao-borda); } .appt.estreito .it-tag .it-longo { display:none; } .now-line { position:absolute; left:0; right:0; height:2px; background:var(--red); z-index:1; pointer-events:none; } .now-line::before { content:''; position:absolute; left:0; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--red); } .vazio { padding:60px 20px; text-align:center; color:var(--ink-soft); } /* Visão de mês */ .dia-layout { display:flex; gap:16px; padding:14px 16px; align-items:flex-start; height:100%; } .dia-main { flex:1; min-width:0; overflow:auto; } .mes-layout { display:flex; gap:16px; padding:16px; align-items:flex-start; } .mes-side { width:210px; flex:none; } .mes-links { display:flex; flex-direction:column; gap:5px; margin-bottom:16px; } .mes-links button { display:flex; align-items:center; gap:10px; width:100%; justify-content:flex-start; text-align:left; padding:9px 12px; border:1px solid var(--borda); border-radius:8px; background:var(--superficie); font-size:13px; font-weight:500; color:var(--texto); cursor:pointer; } .mes-links button:hover { background:var(--acento-suave); border-color:var(--acento-borda); color:var(--acento); } .mes-links button svg { width:16px; height:16px; flex:none; opacity:.85; } .mes-mini { background:var(--superficie); border:1px solid var(--borda); border-radius:10px; padding:12px; box-shadow:var(--sombra); } /* Contagem da lista de espera (Pacote 16, 19/07): no ⏳ da barra de ações e nos botões da coluna esquerda — ninguém via quantos esperam (#esperaBadge antigo apontava pra elemento extinto). */ .espera-badge { background:var(--acento); color:#fff; border-radius:10px; padding:1px 7px; font-size:var(--tam-secund); font-weight:700; margin-left:4px; } .mes-links .espera-badge { margin-left:auto; } .mes-main { flex:1; min-width:0; } .mes-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; } .mes-head { margin-bottom:6px; } .mes-dow { text-align:center; font-size:13px; font-weight:700; color:var(--texto-2); text-transform:uppercase; letter-spacing:.5px; } .mes-cel { min-height:152px; border:1px solid var(--borda); border-radius:10px; background:var(--superficie); padding:6px 7px; cursor:pointer; transition:box-shadow .12s; overflow:hidden; } .mes-cel:hover { box-shadow:var(--sombra); border-color:var(--acento); } .mes-cel.vazia { border:none; background:transparent; cursor:default; } .mes-cel.fds { background:var(--fundo); } .mes-cel.hoje { border:2px solid var(--acento); } .mes-num { font-size:14px; font-weight:700; color:var(--texto); display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; } .mes-cont { font-size:var(--tam-secund); font-weight:700; color:#fff; background:var(--acento); border-radius:10px; padding:1px 7px; } .mes-ev { font-size:13px; line-height:1.4; padding:2px 6px; border-left:3px solid var(--texto-2); border-radius:3px; background:var(--fundo); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Cor cheia por status — mesmos tokens do balão do dia (.appt.*), pro mês bater com o Support. */ .mes-ev.agendado { background:var(--st-agendado-bg); border-left-color:var(--st-agendado); } .mes-ev.confirmado { background:var(--st-confirmado-bg); border-left-color:var(--st-confirmado); } .mes-ev.espera { background:var(--st-espera-bg); border-left-color:var(--st-espera); } .mes-ev.atendimento { background:var(--st-atendimento-bg); border-left-color:var(--st-atendimento); } .mes-ev.atendido { background:var(--st-atendido-bg); border-left-color:var(--st-atendido); opacity:.82; } .mes-ev.desmarcado, .mes-ev.faltou { background:var(--st-desmarcado-bg); border-left-color:var(--st-desmarcado); opacity:.72; } .mes-ev.cancelado { background:var(--st-cancelado-bg); border-left-color:var(--st-cancelado); opacity:.72; } .mes-ev-h { font-weight:700; color:var(--texto-2); } .mes-mais { font-size:13px; color:var(--acento); font-weight:600; padding-left:4px; margin-top:2px; } /* Dia com bloqueio/férias na visão de MÊS (Pacote 16, 19/07): é onde a recepção escolhe a data do retorno. Listrado discreto com os tokens (sem hex novo) + 🚫 pequeno com o motivo no title. */ .mes-cel.bloq { background:repeating-linear-gradient(135deg, var(--superficie), var(--superficie) 9px, var(--fundo) 9px, var(--fundo) 13px); } .mes-cel.bloq.fds { background:repeating-linear-gradient(135deg, var(--fundo), var(--fundo) 9px, var(--borda) 9px, var(--borda) 13px); } .mes-bloq { font-size:11px; cursor:help; } .mes-popup { position:fixed; z-index:90; width:240px; background:var(--superficie); border:1px solid var(--borda); border-radius:10px; box-shadow:0 8px 24px rgba(26,43,59,.18); padding:12px 14px; pointer-events:none; font-size:13px; } .mes-popup .mp-hora { font-weight:700; color:var(--acento); } .mes-popup .mp-nome { font-weight:700; font-size:14px; margin:2px 0 6px; } .mes-popup .mp-linha { color:var(--texto-2); margin-bottom:3px; } .mes-popup .badge { display:inline-block; margin-top:6px; } /* Área agenda + ficha lado a lado */ .area { flex:1; display:flex; min-height:0; } .ficha-panel { width:340px; flex-shrink:0; border-left:1px solid var(--line); background:var(--card); overflow-y:auto; display:flex; flex-direction:column; } /* TELA CHEIA da agenda (o médico, 16/07): esconde topo, ações, painel direito e coluna esquerda — a grade dos balões usa a tela toda (colunas largas, nomes inteiros). Só CSS; sai com o botão ou Esc. */ body.agenda-cheia header, body.agenda-cheia .acoes-bar, body.agenda-cheia #fichaPanel, body.agenda-cheia .mes-side { display:none !important; } body.agenda-cheia .dia-layout, body.agenda-cheia .mes-layout { padding:8px 10px; gap:0; } body.agenda-cheia .cal-head, body.agenda-cheia .cal-body { max-width:none !important; } body.agenda-cheia .subhead { position:sticky; top:0; z-index:60; } /* Balões mais altos (SLOT_H maior no JS) → mostra o PROCEDIMENTO numa 2ª linha embaixo do nome. */ body.agenda-cheia .appt { align-items:flex-start; padding:4px 9px; } body.agenda-cheia .appt .a-nome { max-width:none; font-size:13px; } /* procedimento LOGO ABAIXO do nome (não no rodapé) e com cor forte (não apagada). */ body.agenda-cheia .appt .a-proc { position:absolute; left:10px; right:8px; top:19px; font-size:11px; font-weight:500; opacity:.92; color:var(--ink); } /* No estreito a 2ª linha vem da quebra, não do posicionamento absoluto da tela cheia. */ body.agenda-cheia .appt.estreito { align-items:center; } body.agenda-cheia .appt.estreito .a-proc { position:static; left:auto; right:auto; top:auto; } #btnTelaCheia { white-space:nowrap; } .ficha-vazia { flex:1; display:flex; flex-direction:column; align-items:center; padding:18px 14px; } .ficha-hint { color:var(--ink-soft); font-size:12.5px; text-align:center; margin-top:20px; line-height:1.6; } .ficha-conteudo { flex:1; display:flex; flex-direction:column; } /* mini-calendário */ .mc-wrap { width:100%; } .mc-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } .mc-top b { font-size:13px; color:var(--teal-900); text-transform:capitalize; } .mc-top button { border:none; background:transparent; cursor:pointer; font-size:15px; color:var(--ink-soft); padding:2px 8px; } .mc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .mc-dow { text-align:center; font-size:9.5px; color:var(--ink-soft); font-weight:700; padding:2px 0; } .mc-day { text-align:center; font-size:11.5px; padding:5px 0; border-radius:6px; cursor:pointer; } .mc-day:hover { background:var(--bg); } .mc-day.hoje { background:var(--teal-600); color:#fff; font-weight:700; } .mc-day.sel { outline:2px solid var(--teal-600); } .mc-day.tem { font-weight:700; color:var(--teal-700); } .mc-day.vazio { cursor:default; } /* abas de profissional */ /* Linha dos profissionais SEMPRE visível na agenda (o médico, 13/07): sticky + remonta se vier vazia. */ .prof-tabs { display:flex; gap:6px; align-items:center; padding:8px 16px; background:var(--card); border-bottom:1px solid var(--line); overflow-x:auto; position:sticky; top:0; z-index:45; flex:none; } .prof-tabs-lbl { font-size:var(--tam-secund); font-weight:700; color:var(--ink-soft); margin-right:4px; white-space:nowrap; } .prof-tab { border:1px solid var(--line); background:var(--bg); border-radius:99px; padding:5px 14px; font:inherit; font-size:13px; color:var(--ink-soft); cursor:pointer; white-space:nowrap; } .prof-tab:hover { color:var(--ink); border-color:var(--teal-700); } .prof-tab.on { background:var(--teal-700); border-color:var(--teal-700); color:#fff; font-weight:600; } /* Farol dos robôs (só admin) — fim da barra de profissionais, bem à direita */ .robos-farol { margin-left:auto; display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--bg); border-radius:99px; padding:4px 10px; font-size:13px; cursor:pointer; white-space:nowrap; flex:none; } .robos-farol:hover { border-color:var(--teal-700); } .robos-farol.alerta { border-color:#dc2626; background:#fef2f2; } .robos-bola { width:9px; height:9px; border-radius:50%; background:#94a3b8; flex:none; } .robos-bola.ok { background:#16a34a; } .robos-bola.ruim { background:#dc2626; animation:robosPulse 1.1s ease-in-out infinite; } .robos-bola.atencao { background:#d97706; } /* ⛔ 26/09 (achado 375): o cinza do "não sei". Leitura que caiu NÃO guarda a última cor — um farol verde por queda de rede é o pior estado possível num alarme. */ .robos-bola.naosei { background:#94a3b8; } @keyframes robosPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.55); } 50%{ box-shadow:0 0 0 5px rgba(220,38,38,0); } } .robos-painel { position:fixed; z-index:120; width:min(360px,92vw); max-height:70vh; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.18); padding:8px; } .robos-painel-top { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; padding:4px 6px 8px; border-bottom:1px solid var(--line); margin-bottom:6px; } .robos-painel-top button { margin-left:auto; border:none; background:none; font-size:15px; cursor:pointer; color:var(--ink-soft); } .robo-linha { display:flex; gap:9px; align-items:flex-start; padding:8px 6px; border-radius:8px; } .robo-linha + .robo-linha { border-top:1px solid var(--line); } .robo-linha.parado { background:#fef2f2; } .robo-linha.atencao { background:#fffbeb; } .robo-ic { font-size:13px; line-height:1.4; flex:none; } .robo-linha > div { display:flex; flex-direction:column; gap:1px; } .robo-linha b { font-size:13px; color:var(--ink); } .robo-linha span { font-size:12.5px; color:var(--ink-soft); } /* Ficha (conteúdo) */ .ficha-foto { width:52px; height:52px; border-radius:50%; object-fit:cover; background:#e2e8f0; flex-shrink:0; margin-right:10px; border:2px solid var(--line); cursor:zoom-in; } /* Foto ampliada (10/08/2026, pedido do médico: "às vezes queremos ver o paciente"). */ #mFotoGrande { display:none; position:fixed; inset:0; background:rgba(15,23,42,.82); z-index:120; align-items:center; justify-content:center; cursor:zoom-out; } #mFotoGrande img { max-width:88vw; max-height:88vh; border-radius:12px; background:var(--card); } #mFotoGrande .fechar-foto { position:absolute; top:14px; right:18px; font-size:26px; line-height:1; color:#fff; background:none; border:none; cursor:pointer; } .foto-btn { font-size:var(--tam-secund); padding:3px 8px; border:1px solid var(--line); border-radius:6px; background:var(--bg); cursor:pointer; } .pront-btn { font-size:var(--tam-secund); padding:3px 8px; border:1px solid var(--teal-700); border-radius:6px; background:var(--teal-700); color:#fff; font-weight:600; cursor:pointer; } /* Botões da FICHA do paciente (o médico, 13/07): maiores, ocupam o quadrado sem espaço em branco. */ .ficha-acoes .pront-btn, .ficha-acoes .foto-btn { padding:11px 10px; min-height:46px; font-size:14px; display:flex; align-items:center; justify-content:center; gap:6px; line-height:1.15; } /* ----- Prontuário (tela cheia) ----- */ .pront-topo { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:var(--card); border-bottom:1px solid var(--line); } .pront-topo b { color:var(--teal-900); font-size:16px; } .bonita-btn { font:inherit; font-size:13px; padding:7px 12px; border:1px solid var(--purple,#7c3aed); background:var(--purple,#7c3aed); color:#fff; border-radius:8px; cursor:pointer; font-weight:600; } /* ⭐ 20/09/2026 — OS BOTÕES DA BARRA DO PRONTUÁRIO: mesma altura, cor leve, DUAS famílias. `t` = o que se faz NESTA tela (verde-azulado); `p` = Portal do paciente (azul). A cor é o que agrupa — os quatro do Portal continuam à mão, sem menu, porque ele usa os quatro todo dia. ⛔ Altura FIXA de 34px com inline-flex: é ela que faz a barra parar de parecer remendo. Com padding só, cada rótulo dava uma altura diferente. ⚠️ Mais específico que `.bonita-btn` de propósito — a classe velha fica nos botões porque é por ela que a regra do celular os esconde na capa. */ /* ⭐ 23/09/2026 — SIMETRIA, o pedido dele ("botões mais simétricos"): além da altura fixa, largura MÍNIMA e rótulo centralizado. Os curtos (Início, Exames, Copiloto, Conecta) passam a ter exatamente a mesma caixa; os longos crescem só o que precisam. ⛔ Largura FIXA não serve: cortaria "Ver o Portal dele" ou obrigaria a abreviar nome que outros textos citam por extenso. */ .pront-topo .pr-topo-btn { display:inline-flex; align-items:center; justify-content:center; height:34px; min-width:112px; padding:0 12px; font:inherit; font-size:13px; font-weight:600; border:1px solid var(--borda); border-radius:8px; background:var(--superficie); color:var(--texto); cursor:pointer; white-space:nowrap; transition:filter .12s; } /* 24/09/2026 — Equilíbrio aprovado pelo médico: identidade por cor, ícones de traço. Exames/envio compartilham teal; Portal/check-in compartilham azul. ⭐ 28/09/2026 — ELE: "mais um pouco de cor nos botões e a escrita precisa ficar mais destacada, branca ou preta, veja o que fica melhor pra leitura". Os sobretons de 16% viraram FUNDO CHEIO na cor do próprio token, e a letra passou a ser `--superficie`: BRANCA no tema claro (os tokens são escuros, contraste 5:1 a 7:1) e ESCURA no tema escuro (lá os tokens são claros) — a mesma linha acerta os dois temas sozinha. As misturas com `--texto-2` saíram: eram elas que acinzentavam o vermelho, o verde e o azul. Contraste conferido por conta em scripts/test-a-barra-do-prontuario-e-uma-fileira-so.mjs, nos DOIS temas (mínimo 4,5:1). */ .pront-topo { --pr-cor:var(--texto-2); } .pront-topo .pr-topo-btn { gap:7px; font-weight:600; border-radius:var(--raio); min-width:96px; background:var(--pr-cor); border-color:color-mix(in srgb, var(--pr-cor) 80%, var(--texto)); color:var(--superficie); } .pront-topo .pr-topo-btn.t { --pr-cor:var(--acento); } .pront-topo .pr-topo-btn.a { --pr-cor:var(--erro); } .pront-topo .pr-topo-btn.c { --pr-cor:var(--ok); } .pront-topo .pr-topo-btn.p { --pr-cor:var(--info); } .pront-topo .pr-topo-btn.v { --pr-cor:color-mix(in srgb, var(--info) 50%, var(--erro)); } .pront-topo .pr-topo-icone { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .pront-topo .fechar { flex:none; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border:1px solid var(--borda); border-radius:var(--raio); font-size:var(--tam-secund); background:var(--texto-2); color:var(--superficie); font-weight:600; } #prTopoNome { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--esp-2); } #prSub { white-space:nowrap; } /* O nome do paciente some da barra SÓ no Resumo, onde ele já está grande logo abaixo. ⛔ `display:none` e não remoção: o #prNome continua no lugar, porque outras telas o LEEM. */ .pront-topo.pr-sem-nome #prTopoNome { display:none; } /* O grupo que pode rolar. `min-width:0` nos dois níveis: sem ele o flex se recusa a encolher e o transbordo volta, só que empurrando o ✕ Fechar de novo. `scrollbar-width:none` porque a barrinha do navegador dentro de uma barra de 34 px come a altura dos botões. */ .pront-topo .pr-topo-acoes { display:flex; gap:8px; align-items:center; min-width:0; overflow-x:auto; scrollbar-width:none; } .pront-topo .pr-topo-acoes::-webkit-scrollbar { display:none; } .pront-topo .fechar { flex:none; } /* ⭐ 23/09/2026 — A PEÇA DUPLA: "📤 Subir exames" com o ↗ colado, uma caixa só (o médico: "abrir pode ser um ícone dentro do botão subir exames, não precisa um 2º botão"). São dois