:root{ /* ========================================================================= TEMA CLARO, único. Decisão de 30/out/2026. Um tema só permite calibrar cada cor para o fundo EXATO em que ela cai, em vez de procurar um valor médio que sirva aos dois e não sirva bem a nenhum. O escuro, quando voltar, é arquivo à parte com os mesmos PAPÉIS. 🚨 A regra que organiza tudo: cada cor de estado tem TRÊS valores, porque os três papéis têm exigências diferentes de contraste. --x-fundo superfície de pílula e de ícone (não precisa contrastar) --x preenchimento de gráfico e dente (mínimo 3:1) --x-texto palavra escrita (mínimo 4,5:1) Usar um valor só para os três foi a origem de sete reprovações medidas. Conferir com python3 marca/checar-contraste.py ========================================================================= */ /* ---- marca registrada, não se mexe ---------------------------------- */ --utly-roxo: oklch(0.438 0.130 294.5); --utly-ciano: oklch(0.679 0.117 210.2); /* ⛔ nunca em texto: 2,77:1 */ --utly-roxo-claro: oklch(0.544 0.142 295.7); --utly-ciano-claro: oklch(0.723 0.125 210.4); --utly-azul: oklch(0.267 0.045 265.5); /* ---- neutros, matiz 265 (o do azul da marca) ------------------------- Matiz único faz o cinza parecer da família em vez de cinza de sistema. */ --n-0: oklch(1.000 0.000 265); --n-25: oklch(0.988 0.003 265); --n-50: oklch(0.966 0.005 265); --n-100: oklch(0.945 0.007 265); --n-150: oklch(0.918 0.009 265); --n-200: oklch(0.888 0.011 265); --n-300: oklch(0.830 0.014 265); --n-400: oklch(0.670 0.017 265); --n-500: oklch(0.530 0.020 265); --n-600: oklch(0.455 0.022 265); --n-700: oklch(0.372 0.024 265); --n-800: oklch(0.295 0.032 265); --n-900: oklch(0.215 0.038 265); /* ---- as quatro superfícies, e a ordem importa ------------------------ Branco puro é o CARD, não a página. Invertido, o card some. */ --fundo: var(--n-50); /* a página */ --superficie: var(--n-0); /* o card, branco puro */ --superficie-2: var(--n-25); /* card dentro de card, e campo de entrada */ --superficie-3: var(--n-100); /* coluna de kanban, cabeçalho de tabela */ --campo-borda: var(--borda-forte); /* ---- as duas bordas, e elas NÃO são a mesma -------------------------- A do card é decorativa: quem separa o card da página são três coisas juntas, a borda, a sombra e o card ser mais claro que o fundo. A de controle é obrigatória: campo e botão precisam de 3:1 pela WCAG 1.4.11, porque sem a borda não dá para saber onde clicar. */ --borda: var(--n-200); /* 1,2:1 — decorativa */ --borda-suave: var(--n-100); --borda-forte: oklch(0.640 0.018 265); /* 3,0:1 — campo e botão */ /* A divisão entre COLUNAS da tela é outra coisa de borda de card. Card tem sombra e fundo próprio ajudando; coluna não tem nada além da linha, e por isso ela precisa ser mais presente. Sem isso a conversa e a ficha do paciente viram um bloco só, que foi o que aconteceu na primeira versão. */ --borda-estrutura: oklch(0.830 0.014 265); /* 1,7:1 no card e 1,5:1 na página */ --texto: var(--n-900); /* 16,4:1 na página */ --texto-2: var(--n-600); /* 6,8:1 */ --texto-fraco: var(--n-500); /* 4,9:1 — o mínimo que ainda é texto */ --acento: var(--utly-roxo); /* 7,7:1 na página */ --acento-forte: oklch(0.390 0.135 294.5); /* faixa e botão cheio */ --acento-suave: oklch(0.962 0.016 294.5); /* item ativo */ --acento-borda: oklch(0.880 0.045 294.5); --foco: var(--utly-ciano); /* anel: 3:1 basta */ /* ---- estado, nos três papéis ----------------------------------------- */ --ok-fundo: oklch(0.962 0.030 150); --ok: oklch(0.620 0.145 150); /* 3,4:1 no card — barra, dente */ --ok-texto: oklch(0.510 0.130 150); /* 5,4:1 — palavra */ --atencao-fundo: oklch(0.966 0.042 78); --atencao: oklch(0.644 0.150 78); /* 3,1:1 na página e 3,3:1 no card */ --atencao-texto: oklch(0.530 0.115 78); /* 5,4:1 */ --perigo-fundo: oklch(0.964 0.034 27); --perigo: oklch(0.600 0.190 27); /* 4,3:1 */ --perigo-texto: oklch(0.550 0.180 27); /* 5,3:1 */ --info: var(--n-600); /* ⛔ não existe info azul: azul é marca */ /* ---- odontograma ----------------------------------------------------- Cor NUNCA sozinha. A fazer é contorno, feito é sólido, ausente leva X, implante leva o pino. Vermelho e verde juntos quebram na daltonia, e aqui só funciona porque o preenchimento distingue sem a cor. */ --dente-higido: var(--n-100); --dente-afazer: var(--perigo); /* 4,3:1 — contorno */ --dente-feito: var(--ok); /* 3,4:1 — sólido */ --dente-atencao: var(--atencao); /* 3,0:1 */ --dente-ausente: oklch(0.640 0.018 265); /* 3,0:1 — era 2,7 */ --dente-implante: oklch(0.560 0.130 300); /* 4,9:1 */ --dente-protese: oklch(0.565 0.150 340); /* 5,0:1 */ /* ---- profissionais, categóricos, todos acima de 3:1 ------------------ */ --prof-1: oklch(0.550 0.140 294); --prof-2: oklch(0.580 0.130 150); --prof-3: oklch(0.600 0.150 340); --prof-4: oklch(0.620 0.140 60); --prof-5: oklch(0.560 0.120 190); /* ---- tipografia ------------------------------------------------------ */ --t-micro:11.5px; --t-peq:12.5px; --t-corpo:14.5px; --t-medio:15.5px; --t-h3:15px; --t-h2:17px; --t-h1:25px; --t-display:33px; --t-hero:42px; /* ---- espaço, raio, sombra -------------------------------------------- */ /* ⚠️ Respiro é a diferença entre parecer profissional e parecer apertado. A escala subiu um degrau em 30/out: o que era 20 virou 24, o que era 24 virou 28, e o respiro da página virou 40. Interface densa parece planilha. */ --e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:20px;--e6:24px;--e7:28px;--e8:32px; --e9:36px;--e10:40px;--e12:48px; --pad-card:var(--e6) var(--e7); /* 24 em cima, 28 nas laterais */ --pad-pagina:var(--e7) var(--e10); /* 28 em cima, 40 nas laterais */ --gap-bloco:var(--e6); /* entre cartões */ --r1:6px;--r2:8px;--r3:10px;--r4:12px;--r5:14px;--r6:18px;--r-cheio:999px; /* A sombra usa o matiz da marca, não preto. Preto sobre fundo colorido suja; a mesma cor em opacidade baixa afunda. */ --s1:0 1px 2px oklch(0.267 0.045 265/.055); --s2:0 2px 8px oklch(0.267 0.045 265/.07),0 1px 2px oklch(0.267 0.045 265/.05); --s3:0 12px 32px oklch(0.267 0.045 265/.11); --barra:248px; } /* ============================ base ============================ */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:-apple-system,"Segoe UI",system-ui,sans-serif;background:var(--fundo);color:var(--texto); font-size:var(--t-corpo);line-height:1.5;-webkit-font-smoothing:antialiased; font-feature-settings:"cv05","ss01"} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} :focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-radius:var(--r1)} .num{font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-weight:620} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ============================ estrutura ============================ */ .app{display:flex;min-height:100vh} .side{width:var(--barra);flex:none;background:var(--superficie);border-right:1px solid var(--borda); display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:4} /* Só o lockup da Utly, sem "Sistemas" embaixo. O Felipe comparou com o Simples Dental, que põe só a marca, e tem razão: a palavra extra não informava nada que o contexto já não dissesse, e roubava respiro da única coisa que precisa ser reconhecida ali. */ .marca{padding:var(--e6) var(--e5) var(--e5);text-align:center} .marca img{height:30px;display:block;margin:0 auto} .cli-bloco{margin-top:var(--e4);padding-top:var(--e4);border-top:1px solid var(--borda-suave)} .rot{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-fraco);font-weight:650} .cli{font-size:var(--t-medio);font-weight:620;letter-spacing:-.02em;margin-top:3px} /* A barra tem duas zonas, e a divisão é por frequência de uso, não por tema: em cima o que se abre todo dia, embaixo o que se configura uma vez e some. Misturar os dois faz "Configurações" competir com "Agenda" pelo mesmo olhar. */ .side nav{padding:var(--e3) var(--e3) var(--e2);display:flex;flex-direction:column;gap:1px; flex:1;overflow-y:auto;min-height:0} .side .grupo{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--n-400); font-weight:700;padding:var(--e4) 14px var(--e2)} .side .grupo:first-child{padding-top:var(--e2)} .side .rodape-nav{padding:var(--e2) var(--e3) var(--e3);border-top:1px solid var(--borda-suave); display:flex;flex-direction:column;gap:1px} .side nav a,.side .rodape-nav a{display:flex;align-items:center;gap:var(--e3);padding:11px 14px;border-radius:var(--r3); font-size:var(--t-corpo);color:var(--texto-2);line-height:1;position:relative} .side nav a svg,.side .rodape-nav a svg{width:19px;height:19px;flex:none;color:var(--texto-fraco)} .side nav a:hover,.side .rodape-nav a:hover{background:var(--n-100)} .side nav a.on,.side .rodape-nav a.on{background:var(--acento-suave);color:var(--acento);font-weight:620} .side nav a.on svg,.side .rodape-nav a.on svg{color:var(--acento)} .side nav a.on::before,.side .rodape-nav a.on::before{content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%); width:3px;height:19px;border-radius:0 3px 3px 0;background:var(--acento)} .contador{margin-left:auto;font-size:var(--t-micro);font-weight:700;background:var(--perigo);color:#fff; min-width:19px;height:19px;border-radius:var(--r-cheio);display:grid;place-items:center;padding:0 5px} .pe{padding:var(--e3) var(--e5);border-top:1px solid var(--borda-suave);display:flex;align-items:center;gap:10px} .av{width:32px;height:32px;border-radius:50%;background:var(--acento-suave);color:var(--acento); display:grid;place-items:center;font-size:var(--t-peq);font-weight:700;flex:none} .pe .n{font-size:13.5px;font-weight:580;line-height:1.3} .pe .c{font-size:var(--t-micro);color:var(--texto-fraco)} main{flex:1;min-width:0;display:flex;flex-direction:column} .topo{position:sticky;top:0;z-index:3;background:color-mix(in oklch,var(--fundo) 88%,transparent); backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--borda); padding:var(--e6) var(--e10);display:flex;align-items:flex-start;gap:var(--e4)} .tit{display:flex;align-items:center;gap:11px} .tit .ico{width:30px;height:30px;border-radius:var(--r2);background:var(--acento-suave);color:var(--acento); display:grid;place-items:center;flex:none} .tit .ico svg{width:17px;height:17px} .topo h1{font-size:var(--t-h1);font-weight:650;letter-spacing:-.028em;line-height:1.14} /* duas linhas de apoio: a primeira diz O QUE é, a segunda diz PARA QUE serve. Uma linha só vira legenda; duas viram orientação, e cabem num título. */ .topo .sub{font-size:14px;color:var(--texto-2);margin-top:7px;line-height:1.5} .topo .sub2{font-size:13px;color:var(--texto-fraco);margin-top:2px;line-height:1.5} /* alternador de dois estados, no lugar de duas pílulas soltas */ .seg{display:inline-flex;background:var(--n-100);border-radius:var(--r3);padding:3px} .seg a{padding:7px 16px;border-radius:var(--r2);font-size:13.5px;color:var(--texto-2);font-weight:550} .seg a.on{background:var(--superficie);color:var(--texto);font-weight:620;box-shadow:var(--s1)} .espaco{flex:1} .corpo{padding:var(--pad-pagina) var(--e10) var(--e12);flex:1;min-width:0} .corpo.cheio{padding:0;display:flex;min-height:0;flex:1} /* ============================ peças ============================ */ /* ⚠️ Botão e campo usam --borda-forte (3:1). Card usa --borda (decorativa). Sem contorno de 3:1 não dá para saber onde se clica, e isso é WCAG 1.4.11. */ /* ========================================================================= BOTÕES — um sistema só, quatro pesos, e uma regra de uso ------------------------------------------------------------------------- A regra: UMA ação principal por tela. Se duas coisas gritam, nenhuma grita. .btn.pri sólido, a ação que a tela existe para fazer (uma por tela) .btn contorno, as ações de apoio (quantas precisar) .btn.sut sem contorno, ação de terceira ordem .btn.ico quadrado, só ícone, para ação que o ícone já explica Tamanho: 38px por padrão, 32px com .sm. ⚠️ Contorno usa --borda-forte (3:1): sem isso não dá para saber onde clicar, e isso é WCAG 1.4.11, não gosto. ========================================================================= */ .btn{height:38px;padding:0 15px;border:1px solid var(--borda-forte);border-radius:var(--r3); background:var(--superficie);font-size:13.5px;font-weight:550;color:var(--texto); display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap; cursor:pointer;transition:background .12s,border-color .12s} .btn svg{width:15px;height:15px;flex:none;color:var(--texto-fraco)} .btn:hover{background:var(--n-50)} .btn.pri{background:var(--acento);border-color:var(--acento);color:var(--n-0);font-weight:600} .btn.pri svg{color:var(--n-0)} .btn.pri:hover{background:var(--acento-forte);border-color:var(--acento-forte)} .btn.sut{border-color:transparent;background:transparent;color:var(--texto-2)} .btn.sut:hover{background:var(--n-100)} .btn.ico{width:38px;padding:0;position:relative} .btn.ico svg{width:17px;height:17px} .btn.sm{height:32px;padding:0 12px;font-size:12.5px} .btn.sm.ico{width:32px;padding:0} .btn.cheio{width:100%} .ponto{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%; background:var(--perigo);border:1.5px solid var(--superficie)} /* nomes antigos, mantidos para não quebrar tela já escrita */ .pill{height:38px;padding:0 15px;border:1px solid var(--borda-forte);border-radius:var(--r3); background:var(--superficie);font-size:13.5px;font-weight:550;color:var(--texto); display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap} .pill svg{width:15px;height:15px;flex:none;color:var(--texto-fraco)} .pill.forte{background:var(--acento);border-color:var(--acento);color:var(--n-0);font-weight:600} .pill.forte svg{color:var(--n-0)} .icobtn{width:38px;height:38px;border:1px solid var(--borda-forte);border-radius:var(--r3); background:var(--superficie);display:grid;place-items:center;color:var(--texto-fraco); position:relative;flex:none} .icobtn svg{width:17px;height:17px} /* barra de ações: o lugar padrão de botão no cabeçalho de cartão e de tela. Sempre à DIREITA, sempre com 10 de respiro, e a principal por último, que é onde o olho termina de ler. */ .acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .card{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r5); padding:var(--e5) var(--e6);box-shadow:var(--s1);min-width:0} .cab{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e4);margin-bottom:var(--e6)} .cab h2{font-size:var(--t-h2);font-weight:620;letter-spacing:-.016em} .cab p{font-size:13px;color:var(--texto-fraco);margin-top:3px;line-height:1.45} .grade{display:grid;gap:var(--gap-bloco);margin-bottom:var(--gap-bloco)} .grade>*{min-width:0} .g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:1fr 1fr} .g23{grid-template-columns:1.4fr 1fr} .rolagem{overflow-x:auto;min-width:0;-webkit-overflow-scrolling:touch} .rot-k{font-size:13px;color:var(--texto-fraco);font-weight:500} .val{font-size:var(--t-display);line-height:1.08;margin:var(--e3) 0 5px;font-variant-numeric:tabular-nums; letter-spacing:-.032em;font-weight:620} .obs{font-size:var(--t-peq);color:var(--texto-fraco);line-height:1.5} .ib{width:36px;height:36px;border-radius:var(--r3);display:grid;place-items:center;flex:none; background:var(--acento-suave);color:var(--acento)} .ib svg{width:17px;height:17px} /* A cor do ícone NÃO diz se o número está bom. Isso quem diz é a seta de variação, que sabe comparar. Ela muda só quando o indicador é, por natureza, um problema: "buracos na agenda" e "faltas" são ruins mesmo quando o número é baixo. Antes um dos quatro aparecia verde sem critério, e o verde parecia querer dizer algo que não dizia. */ .ib.a{background:var(--atencao-fundo);color:var(--atencao-texto)} .ib.p{background:var(--perigo-fundo);color:var(--perigo-texto)} .ib.p{background:var(--perigo-fundo);color:var(--perigo-texto)} .delta{display:inline-flex;align-items:center;gap:3px;font-size:var(--t-micro);font-weight:650; padding:2px 7px;border-radius:var(--r-cheio);background:var(--ok-fundo);color:var(--ok-texto);margin-left:7px} .delta svg{width:11px;height:11px} .delta.b{background:var(--perigo-fundo);color:var(--perigo-texto)} .faixa{background:linear-gradient(135deg,var(--acento-forte),oklch(0.330 0.095 272)); border-radius:var(--r6);padding:var(--e6) var(--e7);display:grid;grid-template-columns:repeat(3,1fr); gap:var(--e6);position:relative;overflow:hidden;color:#fff;margin-bottom:var(--e5)} .faixa::after{content:"";position:absolute;right:-80px;top:-100px;width:330px;height:330px;border-radius:50%; background:radial-gradient(circle,oklch(0.72 0.12 210/.26),transparent 68%);pointer-events:none} .faixa>div{position:relative;z-index:1;min-width:0} .faixa>div+div{border-left:1px solid rgba(255,255,255,.15);padding-left:var(--e6)} .faixa .rot-k{color:rgba(255,255,255,.80)} .faixa .obs{color:rgba(255,255,255,.72)} .selo{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700; color:#fff;background:rgba(255,255,255,.16);padding:3px 8px;border-radius:var(--r-cheio);margin-bottom:var(--e3)} .tag{font-size:11px;font-weight:650;padding:3px 9px;border-radius:var(--r-cheio);display:inline-block;white-space:nowrap} .t-ok{background:var(--ok-fundo);color:var(--ok-texto)} .t-at{background:var(--atencao-fundo);color:var(--atencao-texto)} .t-pe{background:var(--perigo-fundo);color:var(--perigo-texto)} .t-n{background:var(--n-100);color:var(--texto-2)} .t-ac{background:var(--acento-suave);color:var(--acento)} table{width:100%;border-collapse:collapse;font-size:var(--t-corpo)} th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-fraco); font-weight:650;padding:0 0 11px} td{padding:14px 0;border-top:1px solid var(--borda-suave)} tbody tr:first-child td{border-top:none} .dt{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11.5px;background:var(--n-100); padding:3px 7px;border-radius:var(--r1);color:var(--texto-2);font-weight:600} .somas{display:flex;gap:var(--e8);margin-top:var(--e5);padding-top:var(--e4); border-top:1px solid var(--borda);flex-wrap:wrap} .soma .r{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-fraco);font-weight:650} .soma .n{font-size:20px;margin-top:4px;font-variant-numeric:tabular-nums;font-weight:620;letter-spacing:-.025em} .aviso{padding:12px 15px;border-radius:var(--r3);font-size:13.5px;line-height:1.55; background:var(--atencao-fundo);color:var(--atencao-texto);border:1px solid oklch(0.880 0.070 78); display:flex;gap:10px;align-items:flex-start} .aviso svg{width:17px;height:17px;flex:none;margin-top:2px} .legenda{display:flex;flex-wrap:wrap;gap:var(--e4);margin-top:var(--e5);padding-top:var(--e4); border-top:1px solid var(--borda-suave);font-size:var(--t-peq);color:var(--texto-fraco)} .legenda span{display:flex;align-items:center;gap:7px} .sw{width:14px;height:14px;border-radius:var(--r1);border:1px solid var(--n-300);flex:none} .pontinho{width:9px;height:9px;border-radius:50%;flex:none} /* ===== Legenda do odontograma, em dois grupos ===== A amostra imita o desenho: face é um quadradinho, porque no dente a cor pinta um pedaço; dente inteiro é um contorno arredondado, porque lá a cor cerca tudo. Antes eram sete bolinhas iguais e ninguém sabia por que umas pintavam o meio e outras a volta. */ .legenda2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5) var(--e8); margin-top:var(--e5);padding-top:var(--e5);border-top:1px solid var(--borda-suave)} .legenda2 .lg > b{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase; color:var(--texto-fraco);font-weight:650;margin-bottom:var(--e3)} .legenda2 .lg-itens{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5)} .legenda2 span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--texto-2)} .legenda2 .lg > p{font-size:12px;color:var(--texto-fraco);margin-top:var(--e3);line-height:1.5} .sw-face{width:15px;height:15px;border-radius:2px;border:1px solid var(--n-300);flex:none} .sw-todo{width:19px;height:19px;border-radius:4px;border:2.4px solid;background:var(--superficie); flex:none;display:grid;place-items:center} .sw-todo svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;color:var(--texto-fraco)} @media(max-width:900px){.legenda2{grid-template-columns:1fr;gap:var(--e5)}} .topo-mob,.tabs-mob,.gaveta{display:none} /* ===== Folha de detalhe ===== No desktop ela aparece centrada; no celular sobe de baixo, que é o gesto que o dedo espera. Mesmo markup nos dois, porque o conteúdo é o mesmo. */ .folha{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:var(--e5)} .folha-fundo{position:absolute;inset:0;background:oklch(0.267 0.045 265/.45);backdrop-filter:blur(2px)} .folha-cartao{position:relative;background:var(--superficie);border-radius:var(--r6); width:min(420px,100%);box-shadow:0 18px 50px oklch(0.267 0.045 265/.22);overflow:hidden; animation:f-entra .18s cubic-bezier(.2,.8,.2,1)} .folha-cab{display:flex;align-items:flex-start;gap:var(--e4);padding:var(--e6) var(--e6) var(--e4)} .folha-cab .h{display:flex;align-items:baseline;gap:9px;font-size:20px;font-weight:680; letter-spacing:-.02em;font-variant-numeric:tabular-nums} .folha-cab .h i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--texto-fraco)} .folha-cab .n{font-size:var(--t-medio);font-weight:620;margin-top:7px;letter-spacing:-.012em} .folha-cab .p{font-size:13.5px;color:var(--texto-2);margin-top:2px} .folha-cab .icobtn{margin-left:auto;font-size:20px;line-height:1} .folha-corpo{padding:0 var(--e6) var(--e4)} .folha-corpo .fl{display:flex;align-items:center;gap:var(--e4);padding:9px 0; border-top:1px solid var(--borda-suave)} .folha-corpo .fl .r{font-size:12.5px;color:var(--texto-fraco);flex:none;width:118px} .folha-corpo .fl .v{font-size:13.5px;font-weight:570;display:flex;align-items:center;gap:7px} .folha-corpo .pt{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none} .folha-pe{display:flex;gap:9px;padding:var(--e4) var(--e6) var(--e6);border-top:1px solid var(--borda)} .folha-pe .btn{flex:1;justify-content:center} /* Sem borda, a ação secundária aqui lê como texto solto e não como botão: o rodapé da folha é branco e o `.sut` conta com fundo cinza para se destacar. */ .folha-pe .btn.sut{border:1px solid var(--borda-forte)} .remarcando{margin-top:var(--e4);padding:var(--e4);border-radius:var(--r4); background:var(--acento-suave);border:1px solid var(--acento-borda)} .remarcando b{display:block;font-size:13.5px;font-weight:650;color:var(--acento);margin-bottom:5px} .remarcando p{font-size:13px;line-height:1.55;color:var(--texto-2);margin-bottom:var(--e4)} @keyframes f-entra{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}} @media(max-width:900px){ .folha{align-items:flex-end;padding:0} .folha-cartao{width:100%;border-radius:var(--r6) var(--r6) 0 0; padding-bottom:env(safe-area-inset-bottom);animation:f-sobe .22s cubic-bezier(.2,.8,.2,1)} .folha-cab,.folha-corpo,.folha-pe{padding-inline:var(--e5)} .folha-pe{flex-wrap:wrap} .folha-pe .btn{flex:1 1 44%} .folha-pe .btn.pri{flex-basis:100%} } @keyframes f-sobe{from{transform:translateY(100%)}to{transform:none}} /* ============================ MOBILE ============================ */ @media (max-width:900px){ /* ===== No celular a tabela vira PILHA DE CARTÕES ===== Tabela de 6 colunas em 390px só existe rolando de lado, e aí o nome quebra em três linhas e ninguém compara nada. Cada linha vira um cartão, a primeira célula é o título, e as outras viram pares rótulo/valor. */ .tb-card{border:none;background:transparent;box-shadow:none;border-radius:0} :is(.tb-card,table.vira-cartao) thead{display:none} :is(.tb-card,table.vira-cartao) :is(table,tbody,tr,td),table.vira-cartao{display:block;width:auto} :is(.tb-card,table.vira-cartao) tbody tr{background:var(--superficie);border:1px solid var(--borda); border-radius:var(--r5);padding:var(--e4);margin-bottom:var(--e3);box-shadow:var(--s1)} :is(.tb-card,table.vira-cartao) tbody tr:hover{background:var(--superficie)} :is(.tb-card,table.vira-cartao) td{border:none;padding:0;text-align:left !important} :is(.tb-card,table.vira-cartao) td:first-child{order:-1;padding-bottom:var(--e3);margin-bottom:var(--e3); border-bottom:1px solid var(--borda-suave)} :is(.tb-card,table.vira-cartao) td:not(:first-child){display:flex;align-items:baseline;justify-content:space-between; gap:var(--e4);padding:5px 0;font-size:13.5px} :is(.tb-card,table.vira-cartao) td:not(:first-child)::before{content:attr(data-rot);font-size:11px; letter-spacing:.05em;text-transform:uppercase;color:var(--texto-fraco);font-weight:650;flex:none} /* Quem procura na lista procura PESSOA. Quando a linha tem uma, ela sobe para o topo do cartão mesmo que no desktop a primeira coluna seja o número. */ :is(.tb-card,table.vira-cartao) tbody tr{display:flex;flex-direction:column} :is(.tb-card,table.vira-cartao) td:has(.pessoa){order:-2;display:flex;align-items:center;gap:8px} :is(.tb-card,table.vira-cartao) td:has(.pessoa) .pessoa{flex:1;min-width:0} :is(.tb-card,table.vira-cartao) td:has(.pessoa)::before{content:none} /* célula vazia não vira linha de rótulo sozinha */ :is(.tb-card,table.vira-cartao) td:empty{display:none} .rod-tb{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r4); flex-direction:column;align-items:flex-start;gap:6px;padding:var(--e4)} .topo-lista{gap:var(--e3)} .busca{max-width:none;width:100%} .chips{overflow-x:auto;flex-wrap:nowrap;width:100%;scrollbar-width:none;padding-bottom:2px} .chips::-webkit-scrollbar{display:none} .pessoa .av2{width:38px;height:38px;font-size:13px} .pessoa b{font-size:15px} .side{display:none} /* O cabeçalho da página NÃO some no celular: junto com o título iam embora todos os botões de ação da tela (filtro, buscar, novo). Ele perde o grude no topo, vira coluna e as ações descem para a linha de baixo. */ .topo{position:static;background:transparent;backdrop-filter:none;border-bottom:none; flex-direction:column;align-items:stretch;gap:var(--e3); padding:var(--e5) var(--e4) 0} .topo h1{font-size:23px} .topo .sub{font-size:13.5px;margin-top:5px} .topo .sub2{font-size:12.5px} .topo .espaco{display:none} .topo > div:last-child{flex-wrap:wrap;padding-top:0 !important;gap:8px !important} .topo + .corpo,.topo ~ .corpo{padding-top:var(--e4)} .topo-mob{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:6; background:var(--superficie);border-bottom:1px solid var(--borda); padding:max(10px,env(safe-area-inset-top)) var(--e4) 10px} .topo-mob img{height:22px} /* O logo e o nome da clínica são o caminho de volta ao Dashboard: é o primeiro lugar onde a mão procura, e antes não levava a lugar nenhum. */ .marca-mob{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:inherit;min-height:40px} .marca-mob > div{min-width:0} /* ===== Gaveta de navegação ===== A barra de baixo cabe cinco destinos e o sistema tem doze. Sem a gaveta, Leads, Clientes, Orçamentos, Laboratório, Profissionais, Procedimentos e Configurações não tinham caminho nenhum pelo celular. */ .gaveta{display:block;position:fixed;inset:0;z-index:20} .gaveta-fundo{position:absolute;inset:0;background:oklch(0.267 0.045 265/.45); backdrop-filter:blur(2px);animation:g-aparece .18s ease} .gaveta-painel{position:absolute;inset:0 0 0 auto;width:min(86vw,330px); background:var(--superficie);box-shadow:-8px 0 30px oklch(0.267 0.045 265/.18); display:flex;flex-direction:column;overflow-y:auto;animation:g-entra .22s cubic-bezier(.2,.8,.2,1); padding-bottom:max(var(--e4),env(safe-area-inset-bottom))} .gaveta-cab{display:flex;align-items:center;gap:var(--e4); padding:max(var(--e4),env(safe-area-inset-top)) var(--e4) var(--e4); border-bottom:1px solid var(--borda);margin-bottom:var(--e3)} .gaveta-cab > div:first-child{flex:1;min-width:0} .gaveta-painel .grupo{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--n-400);font-weight:700;padding:var(--e4) var(--e5) 6px} .gaveta-painel a{display:flex;align-items:center;gap:12px;min-height:46px; padding:0 var(--e5);color:var(--texto-2);font-size:14.5px;font-weight:530} .gaveta-painel a svg{width:19px;height:19px;flex:none;color:var(--n-400)} .gaveta-painel a.on{background:var(--acento-suave);color:var(--acento);font-weight:620} .gaveta-painel a.on svg{color:var(--acento)} .gaveta-painel a .q{margin-left:auto;font-size:11px;font-weight:700;color:var(--n-0); background:var(--perigo);border-radius:var(--r-cheio);padding:1px 7px} .gaveta-painel .pe{display:flex;align-items:center;gap:11px;margin-top:auto; padding:var(--e4) var(--e5);border-top:1px solid var(--borda)} @keyframes g-aparece{from{opacity:0}to{opacity:1}} @keyframes g-entra{from{transform:translateX(100%)}to{transform:none}} .topo-mob .cli-m,.gaveta-cab .cli-m{font-size:13px;font-weight:620;letter-spacing:-.01em;line-height:1.2} .topo-mob .rot-m,.gaveta-cab .rot-m{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-fraco);font-weight:650} .corpo{padding:var(--e4) var(--e4) var(--e8)} .g4{grid-template-columns:1fr 1fr} .g3,.g2,.g23{grid-template-columns:1fr} .faixa{grid-template-columns:1fr;gap:var(--e4);border-radius:var(--r5)} .faixa>div+div{border-left:none;border-top:1px solid rgba(255,255,255,.15);padding-left:0;padding-top:var(--e4)} .val{font-size:26px} .card{padding:var(--e4);border-radius:var(--r4)} .rolagem{margin:0 calc(var(--e4)*-1);padding:0 var(--e4) var(--e2)} table{font-size:13.5px} .somas{gap:var(--e5)} /* o título do card e a ação dele não cabem lado a lado em 390 */ .card>.cab,.pac-cab{flex-wrap:wrap;gap:var(--e3)} .card>.cab>.pill,.card>.cab>.btn,.pac-cab>.pill{margin-left:0} /* ALVO DE TOQUE: no desktop o cursor acerta 29px, o polegar não. Tudo que se toca sobe para 40px de altura mínima no celular. */ .chip,.pill,.btn,.btn.sm,.aba,.tira-dia a,.cfg-menu a,.seg a{min-height:40px} .seg a{display:inline-flex;align-items:center;justify-content:center} .topo-mob .icobtn{min-height:40px} .chip,.pill{display:inline-flex;align-items:center;padding-block:0} .btn.ico,.icobtn{min-width:40px;min-height:40px} .tabs-mob{display:flex;flex-direction:row;position:fixed;inset:auto 0 0 0;z-index:9; background:var(--superficie);border-top:1px solid var(--borda); padding:6px 4px max(6px,env(safe-area-inset-bottom));box-shadow:0 -2px 12px oklch(0.267 0.045 265/.06)} .tabs-mob a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px; border-radius:var(--r3);color:var(--texto-fraco);font-size:11px;min-height:48px;justify-content:center} .tabs-mob a svg{width:21px;height:21px} .tabs-mob a.on{color:var(--acento);font-weight:620} main{padding-bottom:84px} } /* ---- aviso de prévia, para botão não enganar quem está vendo ---- */ .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:99; background:var(--n-900);color:var(--n-0);font-size:13.5px;padding:11px 18px;border-radius:var(--r-cheio); box-shadow:var(--s3);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:90vw; text-align:center;line-height:1.4} .toast.ver{opacity:1;transform:translate(-50%,0)} @media(max-width:900px){.toast{bottom:92px}} [hidden]{display:none !important} /* A busca das listas filtra o que já está na tela, então ela é um campo de verdade desde a prévia: é o primeiro controle que qualquer pessoa aperta, e um campo que não aceita texto é o jeito mais rápido de parecer maquete. */ .busca input,.busca-pill input{border:none;background:transparent;outline:none; font:inherit;color:var(--texto);width:100%;min-width:0;padding:0} .busca input::placeholder,.busca-pill input::placeholder{color:var(--texto-fraco)} .busca:focus-within,.busca-pill:focus-within{border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave)} .busca-pill{display:inline-flex;align-items:center;gap:8px;min-width:200px} /* linha que leva a algum lugar precisa avisar que leva */ /* Botão de ponta: apagado explica que acabou; morto parece defeito. */ .desligado{opacity:.4;pointer-events:none} tr[data-vai]{cursor:pointer} tr[data-vai]:hover{background:var(--n-50)} .sem-resultado{padding:var(--e7) var(--e5);text-align:center;color:var(--texto-fraco);font-size:14px} /* Menu da conversa. Só existe no desktop: no celular o mesmo botão abre a ficha da pessoa, porque lá ela não cabe ao lado. */ /* ===== Avisos do sino ===== */ .icobtn[data-sino]{position:relative} .avisos{position:absolute;top:calc(100% + 9px);right:0;z-index:14;width:min(380px,92vw); background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r5); box-shadow:0 14px 40px oklch(0.267 0.045 265/.18);overflow:hidden;text-align:left; font-weight:400;animation:f-entra .15s ease;cursor:default} .av-cab{display:flex;align-items:baseline;gap:9px;padding:var(--e4) var(--e5); border-bottom:1px solid var(--borda)} .av-cab b{font-size:14.5px;font-weight:650;letter-spacing:-.01em} .av-cab span{font-size:12px;color:var(--texto-fraco)} .av-i{display:flex;gap:11px;padding:var(--e4) var(--e5);border-bottom:1px solid var(--borda-suave); color:inherit;align-items:flex-start} .av-i:hover{background:var(--n-50)} .av-ic{width:30px;height:30px;border-radius:var(--r3);display:grid;place-items:center;flex:none} .av-ic svg{width:15px;height:15px} .av-ic.perigo{background:var(--perigo-fundo);color:var(--perigo-texto)} .av-ic.atencao{background:var(--atencao-fundo);color:var(--atencao-texto)} .av-ic.acento{background:var(--acento-suave);color:var(--acento)} .av-ic.ok{background:var(--ok-fundo);color:var(--ok-texto)} .av-tx{flex:1;min-width:0;display:block} .av-tx b{display:block;font-size:13.5px;font-weight:600;line-height:1.35;letter-spacing:-.008em} .av-tx span{display:block;font-size:12.5px;color:var(--texto-fraco);margin-top:2px;line-height:1.45} .av-q{font-size:11.5px;color:var(--texto-fraco);flex:none;white-space:nowrap;padding-top:2px} .av-pe{padding:11px var(--e5);font-size:12px;color:var(--texto-fraco);background:var(--n-50)} @media(max-width:900px){.avisos{position:fixed;left:var(--e4);right:var(--e4);width:auto; top:auto;bottom:calc(68px + env(safe-area-inset-bottom))}} /* ===== Caixa de leitura do gráfico ===== */ .lx-zona{cursor:crosshair} /* A caixa fica AO LADO da linha-guia, não em cima dela: centrada, ela cobria justamente o ponto que o dono está tentando ler. */ .lx-caixa{position:absolute;top:4px;z-index:6;transform:translateX(14px); background:var(--acento-forte);color:var(--n-0);border-radius:var(--r3); padding:8px 11px;font-size:12.5px;line-height:1.5;white-space:nowrap; box-shadow:0 8px 24px oklch(0.267 0.045 265/.22);pointer-events:none} .lx-caixa.direita{transform:translateX(calc(-100% - 14px))} .lx-caixa b{display:block;font-weight:650;margin-bottom:3px} .lx-caixa span{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.88)} .lx-caixa i{width:8px;height:8px;border-radius:50%;flex:none} /* ===== Dica: o número explica a si mesmo ao passar o mouse ===== Indicador que o dono não entende ele deixa de olhar. "18%" sozinho não diz contra o quê; "taxa de conversão" não diz de quantos. 🚨 Só existe onde HÁ mouse. Duas razões: em toque não há hover, então o tracejado prometeria algo que nunca acontece; e o pseudo-elemento, mesmo invisível, entrava na conta do transbordo e empurrava a página 158px para o lado no celular. `display:none` por padrão resolve os dois. */ @media (hover:hover) and (pointer:fine){ [data-dica]{position:relative;cursor:help; text-decoration:underline dotted var(--n-300);text-underline-offset:3px} [data-dica]::after{content:attr(data-dica);display:none;position:absolute; bottom:calc(100% + 9px);left:0;z-index:20;width:max-content;max-width:250px; background:var(--acento-forte);color:var(--n-0); font-size:12.5px;font-weight:450;line-height:1.45;letter-spacing:0;text-transform:none; padding:9px 12px;border-radius:var(--r3);box-shadow:0 8px 24px oklch(0.267 0.045 265/.22); pointer-events:none;text-decoration:none;white-space:normal} [data-dica]:hover::after,[data-dica]:focus-visible::after{display:block} .g4 > .card:last-child [data-dica]::after{left:auto;right:0} } /* ===== Migalha: de onde vim e como volto ===== */ .migalha{display:flex;align-items:center;gap:8px;margin-bottom:var(--e3);font-size:12.5px} .migalha a{display:inline-flex;align-items:center;gap:5px;color:var(--texto-fraco); font-weight:550;min-height:34px} .migalha a:hover{color:var(--acento)} .migalha a svg{width:14px;height:14px} .migalha i{color:var(--n-300);font-style:normal} .migalha b{color:var(--texto-2);font-weight:600} /* ⚠️ A regra de celular mora AQUI, colada no componente. Este bloco está depois da media query geral, e lá a declaração perde para esta por ordem — componente definido abaixo não recebe os overrides de cima. */ @media(max-width:900px){.migalha a{min-height:40px}} /* ===== Seletor de paciente da ficha ===== */ .pill[data-troca]{position:relative} .menu-pac{position:absolute;top:calc(100% + 7px);right:0;z-index:13;width:min(320px,88vw); background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r4); box-shadow:0 12px 34px oklch(0.267 0.045 265/.17);padding:5px;text-align:left; font-weight:400;animation:f-entra .14s ease;cursor:default} .menu-pac a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r3); color:inherit;min-height:48px} .menu-pac a:hover{background:var(--n-50)} .menu-pac a.on{background:var(--acento-suave)} .menu-pac .av2{flex:none} .menu-pac a > span:last-child{min-width:0;display:block} .menu-pac b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.008em} .menu-pac b + span{display:block;font-size:12px;color:var(--texto-fraco);margin-top:1px} .pe-menu{padding:9px 11px;font-size:11.5px;color:var(--texto-fraco); border-top:1px solid var(--borda-suave);margin-top:4px} .menu-periodo{position:absolute;top:calc(100% + 7px);left:0;z-index:12;min-width:172px; background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r4); box-shadow:0 10px 30px oklch(0.267 0.045 265/.16);padding:5px;text-align:left; font-weight:500;animation:f-entra .14s ease} .menu-periodo span{display:block;padding:9px 12px;border-radius:var(--r2); font-size:13.5px;color:var(--texto-2);white-space:nowrap;cursor:pointer} .menu-periodo span:hover{background:var(--n-100)} .menu-periodo span.on{background:var(--acento-suave);color:var(--acento);font-weight:620} .pill[data-periodo]{position:relative} .menu-conversa{position:absolute;top:calc(100% + 6px);right:0;z-index:12;min-width:212px; background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r4); box-shadow:0 10px 30px oklch(0.267 0.045 265/.16);padding:5px;text-align:left; animation:f-entra .14s ease} .menu-conversa span{display:block;padding:9px 12px;border-radius:var(--r2); font-size:13.5px;color:var(--texto-2);white-space:nowrap;cursor:pointer} .menu-conversa span:hover{background:var(--n-100)} .th-cab .icobtn[data-ficha]{position:relative} /* O nome e os dentistas da clínica são REAIS; paciente, conversa, orçamento e valor são inventados. Quem abre o link precisa saber disso sem precisar perguntar, então o selo fica junto da marca, nas duas barras, e não fecha. */ .selo-previa{font-size:11px;letter-spacing:.02em;color:var(--atencao-texto); background:var(--atencao-fundo);border:1px solid oklch(0.880 0.070 78); border-radius:var(--r-cheio);padding:1px 8px;margin-top:5px;display:inline-block; font-weight:600;white-space:nowrap} /* ===== O que é clicável PARECE clicável ===== Metade dos controles aqui é e
, porque a prévia não tem rota de verdade. O navegador só dá o cursor de mão em e