/* ===== Clínica Odonto 1.2: design "consultório claro" (Figtree, menta clínica, superfícies brancas) ===== Paleta e tema são escolhas de cada computador (Configurações > Aparência), guardadas no navegador. */ @font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("/static/fontes/figtree-400.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url("/static/fontes/figtree-500.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("/static/fontes/figtree-600.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("/static/fontes/figtree-700.woff2") format("woff2"); } :root { --fundo: #F2F6F7; --cartao: #FFFFFF; --cartao-2: #F7FAFA; --texto: #15232D; --suave: #5B6B77; --fraco: #8D9AA5; --borda: #E1E8EC; --borda-forte: #CBD6DD; --linha: #EDF1F3; --primaria: #0E8C7E; --primaria-escura: #0A6B61; --primaria-clara: #E2F4F1; --primaria-borda: #B5DFD8; --sobre-primaria: #FFFFFF; --destaque-a: #12A08F; --destaque-b: #0A6359; --perigo: #C9302C; --perigo-fundo: #FDECEB; --perigo-borda: #F3C4C1; --atencao: #9A5B00; --atencao-fundo: #FFF4DE; --atencao-borda: #F1D697; --ok: #187A3E; --ok-fundo: #E5F5EA; --ok-borda: #B7E0C4; --info: #2459B8; --info-fundo: #E7EFFD; --sombra: 0 1px 2px rgba(21,35,45,.04), 0 3px 10px rgba(21,35,45,.05); --sombra-alta: 0 14px 34px rgba(21,35,45,.16); --raio: 14px; --raio-p: 10px; --lateral: 244px; --link: var(--primaria); font-family: "Figtree", "Segoe UI", system-ui, sans-serif; color: var(--texto); font-feature-settings: "tnum" 1; color-scheme: light; } :root[data-cor="oceano"] { --primaria: #0884A6; --primaria-escura: #066A86; --primaria-clara: #E0F2F8; --primaria-borda: #AEDBEA; --destaque-a: #0A9AC2; --destaque-b: #075C78; } :root[data-cor="azul"] { --primaria: #2F62D9; --primaria-escura: #224CB0; --primaria-clara: #E8EFFD; --primaria-borda: #BCCDF6; --destaque-a: #3B70EA; --destaque-b: #1D3F96; } :root[data-cor="ameixa"] { --primaria: #8A3FA8; --primaria-escura: #6E3087; --primaria-clara: #F4E9F8; --primaria-borda: #DCC1E7; --destaque-a: #9B4DBB; --destaque-b: #5A2470; } :root[data-cor="grafite"]{ --primaria: #3B4A57; --primaria-escura: #2A3640; --primaria-clara: #E9EDF0; --primaria-borda: #C7D0D7; --destaque-a: #4B5D6C; --destaque-b: #222C35; } :root[data-tema="escuro"] { --fundo: #0F1619; --cartao: #162024; --cartao-2: #1A262B; --texto: #E4ECEF; --suave: #9AABB4; --fraco: #6E808A; --borda: #24343A; --borda-forte: #33474F; --linha: #1F2D32; --primaria: #2CC2AE; --primaria-escura: #5ED6C5; --primaria-clara: rgba(44,194,174,.13); --primaria-borda: rgba(44,194,174,.35); --sobre-primaria: #062521; --destaque-a: #128C7C; --destaque-b: #0A4E46; --perigo: #F47C76; --perigo-fundo: rgba(244,124,118,.12); --perigo-borda: rgba(244,124,118,.35); --atencao: #F2C25B; --atencao-fundo: rgba(242,194,91,.12); --atencao-borda: rgba(242,194,91,.35); --ok: #5FD38C; --ok-fundo: rgba(95,211,140,.12); --ok-borda: rgba(95,211,140,.35); --info: #86AEF7; --info-fundo: rgba(134,174,247,.13); --sombra: none; --sombra-alta: 0 14px 34px rgba(0,0,0,.5); color-scheme: dark; --link: var(--primaria-escura); } :root[data-tema="escuro"][data-cor="oceano"] { --primaria: #38BDE0; --primaria-escura: #7DD3EC; --primaria-clara: rgba(56,189,224,.13); --destaque-a: #0A7EA0; --destaque-b: #06455A; } :root[data-tema="escuro"][data-cor="azul"] { --primaria: #7EA4F6; --primaria-escura: #A9C2FA; --primaria-clara: rgba(126,164,246,.14); --destaque-a: #2F5FCC; --destaque-b: #1A3577; } :root[data-tema="escuro"][data-cor="ameixa"] { --primaria: #C98BE3; --primaria-escura: #DDB2EE; --primaria-clara: rgba(201,139,227,.14); --destaque-a: #7E3C9B; --destaque-b: #45205A; } :root[data-tema="escuro"][data-cor="grafite"]{ --primaria: #A9B8C4; --primaria-escura: #CBD5DD; --primaria-clara: rgba(169,184,196,.14); --sobre-primaria: #111A20; --destaque-a: #3C4C59; --destaque-b: #1C252D; } body { margin: 0; background: var(--fundo); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .25rem; } h2 { font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 .8rem; } :focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; } * { box-sizing: border-box; } a:hover { text-decoration: underline; } .sub { color: var(--suave); margin: 0 0 1.2rem; } .mini { color: var(--suave); font-size: .82rem; } .vazio { color: var(--suave); padding: .6rem 0; } .cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.1rem 1.2rem; margin-bottom: 1rem; } .cartao.sem-pad { padding: 0; overflow: hidden; } .cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .voltar { font-size: .85rem; } .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin-bottom: 1rem; } .ind { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: .9rem 1rem; display: flex; flex-direction: column; color: var(--suave); font-size: .85rem; } a.ind:hover { text-decoration: none; border-color: var(--primaria); } .ind .num { font-size: 1.45rem; font-weight: 600; color: var(--texto); } .ind.atencao { background: var(--atencao-fundo); } .ind.atencao .num { color: var(--atencao); } .ind.perigo { background: var(--perigo-fundo); } .ind.perigo .num { color: var(--perigo); } .ind.ok .num { color: var(--ok); } .tabela { width: 100%; border-collapse: collapse; } .tabela th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); font-weight: 600; padding: .6rem .8rem; border-bottom: 1px solid var(--borda); background: var(--cartao-2); } .tabela td { padding: .6rem .8rem; border-bottom: 1px solid var(--linha); vertical-align: top; } .tabela tr:last-child td { border-bottom: 0; } .tabela .dir, .tabela th.dir { text-align: right; white-space: nowrap; } .tabela .hora { font-weight: 600; width: 4rem; } .cartao:not(.sem-pad) .tabela td, .cartao:not(.sem-pad) .tabela th { padding-left: 0; } tr.clicavel { cursor: pointer; } tr.clicavel:hover td { background: var(--primaria-clara); } .selo { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .75rem; background: var(--linha); color: var(--suave); white-space: nowrap; } .selo.perigo { background: var(--perigo-fundo); color: var(--perigo); } .s-aprovado, .s-concluido, .s-confirmada, .s-atendida { background: var(--ok-fundo); color: var(--ok); } .s-apresentado, .s-agendada { background: var(--info-fundo); color: var(--info); } .s-parcial, .s-expirado { background: var(--atencao-fundo); color: var(--atencao); } .s-recusado, .s-faltou { background: var(--perigo-fundo); color: var(--perigo); } .alerta { border-radius: 8px; padding: .7rem 1rem; margin: 0 0 1rem; } .alerta.erro, .alerta.perigo { background: var(--perigo-fundo); color: var(--perigo); border: 1px solid var(--perigo-borda); } .alerta.atencao { background: var(--atencao-fundo); color: var(--atencao); border: 1px solid var(--atencao-borda); } .alerta ul { margin: .4rem 0; } label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--suave); } label.check { flex-direction: row; align-items: center; gap: .5rem; color: inherit; font-size: .95rem; } input, select, textarea { font: inherit; color: var(--texto); padding: .55rem .7rem; border: 1px solid var(--borda-forte); border-radius: 8px; background: var(--cartao); width: 100%; } input[type=checkbox], input[type=radio] { width: auto; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--primaria); outline-offset: -1px; border-color: transparent; } .busca { margin-bottom: 1rem; font-size: 1rem; padding: .75rem 1rem; } fieldset { border: 0; padding: 0; margin: 0 0 1.3rem; } legend { font-weight: 600; margin-bottom: .6rem; } .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem 1rem; } .grade .larga { grid-column: 1 / -1; } .acoes { display: flex; justify-content: flex-end; } button, .botao { font: inherit; cursor: pointer; border-radius: 8px; padding: .55rem 1.1rem; border: 1px solid var(--borda-forte); background: var(--cartao); color: var(--texto); display: inline-block; white-space: nowrap; } .botao:hover { text-decoration: none; background: var(--fundo); } .primario { background: var(--primaria); border-color: var(--primaria); color: #fff; } .primario:hover { background: var(--primaria-escura); } button.link { background: none; border: 0; padding: 0; color: var(--primaria); } button.link.perigo { color: var(--perigo); } .rodape-acoes { margin-top: 1rem; text-align: right; } .dados { display: grid; grid-template-columns: 8rem 1fr; gap: .45rem .8rem; margin: 0; } .dados dt { color: var(--suave); } .dados dd { margin: 0; } .quebra { white-space: pre-wrap; } .sozinho { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: linear-gradient(160deg, #e6f4f2, #f5f7f9); } .entrar { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: .9rem; padding: 2rem; text-align: center; } .entrar label { text-align: left; } .entrar h1 { margin: 0; } .entrar .sub { margin: 0; } .logo-grande { font-size: 2.6rem; } @media (max-width: 800px) { .duas, .grade { grid-template-columns: 1fr; } .m-ocultar { display: none; } .cabecalho { flex-wrap: wrap; } } /* ---------- etapa 2: orçamentos e preços ---------- */ .botoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .botoes form { margin: 0; } .filtros { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; } .filtros .busca { margin: 0; flex: 1; } .filtros select { width: auto; } .alerta.ok { background: var(--ok-fundo); color: var(--ok); border: 1px solid var(--ok-borda); } .txt-erro { color: var(--perigo); font-size: .85rem; } .txt-atencao { color: var(--atencao); } .rolagem { overflow-x: auto; } .dados-orc { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; } .dados-orc label { min-width: 150px; flex: 1; } .dados-orc .versoes { flex-basis: 100%; font-size: .9rem; color: var(--suave); } .adicionar { padding: .9rem 1.2rem; } .linha-add { display: flex; gap: .6rem; } .linha-add .dente { width: 140px; flex: none; } .sugestoes { margin-top: .5rem; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; } .sugestao { display: flex; gap: .8rem; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; padding: .55rem .8rem; background: var(--cartao); } .sugestao:hover, .sugestao:focus { background: var(--primaria-clara); } .sugestao .cod { color: var(--suave); width: 6rem; flex: none; } .sugestao .nome { flex: 1; } .sugestao .valores { color: var(--suave); white-space: nowrap; } .sugestao.livre { color: var(--primaria); } .tabela.itens td, .tabela.itens th { padding: .45rem .5rem; vertical-align: middle; } .tabela.itens input, .tabela.itens select, .tabela.precos input { padding: .3rem .45rem; font-size: .9rem; } .c-dente { width: 5.5rem; } .c-qtd { width: 3.6rem; text-align: right; } .c-valor { width: 6.5rem; text-align: right; } .c-desc { width: 5rem; text-align: right; } .c-anot { margin-top: .25rem; font-size: .8rem !important; border-style: dashed; } .tabela.itens select { width: 7.5rem; } .tabela .forte { font-weight: 600; } .centro { text-align: center; } .tabela tr.enviado td { background: var(--cartao-2); color: var(--suave); } .tabela tr.p-urgente td:first-child { box-shadow: inset 4px 0 0 #e5534b; } .tabela tr.p-necessario td:first-child { box-shadow: inset 4px 0 0 #e0a800; } .tabela tr.p-eletivo td:first-child { box-shadow: inset 4px 0 0 #3fa66b; } .ordem { white-space: nowrap; width: 3.5rem; } .mini-bt { padding: .1rem .4rem; font-size: .8rem; line-height: 1.2; } .mini-bt.perigo { color: var(--perigo); border-color: var(--perigo-borda); } .mini-bt:disabled { opacity: .3; cursor: default; } .linha-form { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .8rem; } .linha-form label { flex: 1; min-width: 140px; } .tabela.totais td, .tabela.totais th { padding: .35rem 0; } .tabela.totais tr.total td { font-weight: 700; font-size: 1.1rem; border-top: 2px solid var(--borda); } .aprovar { margin-top: 1rem; border: 1px solid var(--borda); border-radius: 8px; padding: .7rem 1rem; } .aprovar summary { cursor: pointer; font-weight: 600; color: var(--primaria-escura); } .grade-aprovar { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem 1rem; margin-top: .8rem; align-items: end; } .grade-aprovar button { grid-column: 1 / -1; } .perigo-suave { color: var(--perigo); border-color: var(--perigo-borda); } .historico { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; } .historico li { padding: .4rem 0; border-bottom: 1px solid var(--linha); font-size: .9rem; } details.cartao summary { cursor: pointer; } details.cartao[open] summary { margin-bottom: .8rem; } .tabela.precos tr.inativo td { opacity: .5; } .htmx-request.sugestao, form.htmx-request, .htmx-request { opacity: .75; transition: opacity .2s; } @media (max-width: 800px) { .filtros, .linha-add { flex-wrap: wrap; } .linha-add .dente { width: 100%; } .grade-aprovar { grid-template-columns: 1fr; } } /* ---------- etapa 4: abas da ficha, agenda, financeiro, prontuário ---------- */ .abas { display: flex; gap: .2rem; border-bottom: 1px solid var(--borda); margin: 0 0 1.2rem; overflow-x: auto; } .abas a { padding: .6rem 1rem; color: var(--suave); border-bottom: 2px solid transparent; white-space: nowrap; } .abas a:hover { color: var(--texto); text-decoration: none; } .abas a.ativa { color: var(--primaria-escura); border-bottom-color: var(--primaria); font-weight: 600; } .linha-form { display: flex; flex-wrap: wrap; gap: .6rem .8rem; align-items: flex-end; } .linha-form label { flex: 1; min-width: 130px; } .linha-form label.curto { flex: 0 0 110px; min-width: 0; } .linha-form button { flex: none; } .acoes-linha { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; } .acoes-linha form { margin: 0; } .pequeno { padding: .3rem .7rem; font-size: .85rem; } details.inline > summary { cursor: pointer; color: var(--primaria); list-style: none; } details.inline[open] { background: var(--fundo); border-radius: 8px; padding: .6rem; margin-top: .3rem; } .s-a_fazer { background: var(--linha); color: var(--suave); } .s-em_andamento, .s-confirmada { background: var(--info-fundo); color: var(--info); } .s-concluido, .s-atendida, .s-paga { background: var(--ok-fundo); color: var(--ok); } .s-cancelado, .s-desmarcou, .s-cancelada { background: var(--linha); color: var(--fraco); text-decoration: line-through; } .s-atrasada { background: var(--perigo-fundo); color: var(--perigo); } .s-a-vencer, .s-paga-em-parte { background: var(--atencao-fundo); color: var(--atencao); } .barra { height: 8px; background: var(--linha); border-radius: 99px; overflow: hidden; margin: .4rem 0 .2rem; } .barra > span { display: block; height: 100%; background: var(--primaria); } tr.apagada td { color: var(--fraco); text-decoration: line-through; } .odontograma { display: grid; gap: .35rem; margin-bottom: .8rem; } .arcada { display: flex; justify-content: center; gap: .25rem; flex-wrap: wrap; } .arcada .meio { width: 1rem; } .dente { width: 46px; padding: .35rem 0 .3rem; border-radius: 8px; border: 1px solid var(--borda-forte); background: var(--cartao); text-align: center; font-size: .82rem; line-height: 1.15; } .dente b { display: block; font-size: .95rem; } .dente small { display: block; font-size: .62rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dente.existente { background: #f8d9d6; border-color: #e7aaa4; } .dente.planejado { background: #fdeeb5; border-color: #ecd27a; } .dente.realizado { background: #cfeedd; border-color: #96d1b0; } .dente.ausente { background: #e3e7eb; color: var(--fraco); } .dente.sel { outline: 3px solid var(--primaria); } .legenda { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; font-size: .8rem; color: var(--suave); } .legenda i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: -2px; margin-right: .25rem; } .faces { display: flex; gap: .6rem; flex-wrap: wrap; } .anamnese { display: grid; gap: .1rem; } .anamnese .perg { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--linha); } .anamnese .perg.alerta-p .txt::after { content: " ⚠"; color: var(--perigo); } .anamnese .opcoes { display: flex; gap: .7rem; } .anamnese .opcoes label { flex-direction: row; align-items: center; gap: .25rem; color: var(--texto); } .evolucao { border-left: 3px solid var(--primaria-clara); padding: .3rem 0 .3rem .8rem; margin-bottom: .7rem; } .evolucao .quem-quando { color: var(--suave); font-size: .82rem; } .agenda-dia { width: 100%; border-collapse: collapse; table-layout: fixed; } .agenda-dia th, .agenda-dia td { border: 1px solid var(--linha); padding: .25rem .35rem; vertical-align: top; font-size: .88rem; } .agenda-dia th { background: var(--cartao-2); font-weight: 600; } .agenda-dia td.hora { width: 4.2rem; color: var(--suave); text-align: right; } .agenda-dia td.livre a { display: block; color: transparent; min-height: 1.4rem; } .agenda-dia td.livre:hover a { color: var(--primaria); } .consulta { display: block; border-radius: 6px; padding: .3rem .45rem; margin-bottom: .2rem; color: var(--texto); } .consulta:hover { text-decoration: none; filter: brightness(.97); } .consulta small { display: block; color: var(--suave); } .nav-data { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .nav-data input[type=date] { width: auto; } .resposta-ia { white-space: pre-wrap; background: var(--fundo); border-radius: 8px; padding: 1rem; margin-top: .8rem; } .grafico-barras { display: grid; gap: .35rem; } .grafico-barras .lin { display: grid; grid-template-columns: 8rem 1fr 4.5rem; gap: .6rem; align-items: center; font-size: .88rem; } .grafico-barras .lin .barra { margin: 0; height: 14px; } .config-grupo { margin-bottom: 1.4rem; } .submenu { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; } .submenu a { padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--borda); color: var(--texto); font-size: .9rem; } .submenu a.ativa { background: var(--primaria-clara); border-color: var(--primaria-borda); color: var(--primaria-escura); font-weight: 600; } @media (max-width: 800px) { .anamnese .perg { grid-template-columns: 1fr; gap: .3rem; } .dente { width: 38px; } } .semana { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: .6rem; overflow-x: auto; } .semana .cartao { padding: .7rem; margin: 0; min-height: 8rem; } .semana .cartao.hoje { border-color: var(--primaria); } .semana h2 { font-size: .95rem; } @media (max-width: 800px) { .semana { grid-template-columns: 1fr; } } .tabela tr.total td { font-weight: 700; border-top: 2px solid var(--borda); } @media (max-width: 800px) { .odontograma { overflow-x: auto; padding-bottom: .3rem; } .arcada { flex-wrap: nowrap; justify-content: flex-start; width: max-content; margin: 0 auto; } .dente { width: 36px; } } /* ---------- fluxo guiado: etapas, próximo passo ---------- */ .etapas { display: flex; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; flex-wrap: wrap; counter-reset: e; } .etapas li { display: flex; align-items: center; gap: .45rem; padding: .4rem .8rem .4rem .45rem; border-radius: 999px; background: var(--linha); color: var(--suave); font-size: .88rem; } .etapas li span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--cartao); font-weight: 700; font-size: .8rem; } .etapas li.feita { background: var(--ok-fundo); color: var(--ok); } .etapas li.feita span { background: var(--ok); color: #fff; } .etapas li.atual { background: var(--primaria); color: #fff; font-weight: 600; } .etapas li.atual span { color: var(--primaria); } .dica { background: var(--primaria-clara); border-radius: 8px; padding: .6rem .9rem; margin: 0 0 1rem; color: var(--primaria-escura); } .destaque { outline: 3px solid var(--primaria); outline-offset: 3px; border-radius: 8px; } .proximo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border: 2px solid var(--primaria); background: var(--cartao); } .proximo h2 { margin: 0 0 .2rem; font-size: 1.15rem; } .proximo p { margin: 0; color: var(--suave); } .proximo .botoes .primario { font-size: 1.02rem; padding: .7rem 1.3rem; } .rotulo-etapa { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--primaria); font-weight: 700; } .lista-acao { list-style: none; margin: 0; padding: 0; } .lista-acao li { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--linha); } .lista-acao li:last-child { border-bottom: 0; } .lista-acao .info { flex: 1; min-width: 0; } .lista-acao .info .mini { display: block; } .receber-rapido { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; } .receber-rapido input, .receber-rapido select { width: auto; flex: 1; min-width: 7rem; } /* ===== 1.2: estrutura (menu lateral, barra de ferramentas, assistente) ===== */ .app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; } .lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 20px 14px 16px; background: var(--cartao); border-right: 1px solid var(--borda); overflow-y: auto; } .marca { display: flex; align-items: center; gap: 11px; padding: 2px 8px 14px; border-bottom: 1px solid var(--linha); color: var(--texto); } .marca:hover { text-decoration: none; } .logo { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(150deg, var(--destaque-a), var(--destaque-b)); box-shadow: 0 4px 12px color-mix(in srgb, var(--primaria) 30%, transparent); } .logo svg { width: 21px; height: 21px; stroke: #fff !important; stroke-width: 1.9; } .marca .nome { display: grid; line-height: 1.2; min-width: 0; } .marca .nome b { font-size: 1rem; letter-spacing: -.015em; } .marca .nome small { font-size: .74rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu { display: flex; flex-direction: column; gap: 2px; } .menu a { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--suave); font-weight: 500; font-size: .93rem; } .menu a svg, .topo-app svg, .lateral-pe svg, .logo svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .menu a:hover { background: var(--cartao-2); color: var(--texto); text-decoration: none; } .menu a.ativo { background: var(--primaria-clara); color: var(--primaria-escura); font-weight: 650; } .menu a.ativo::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primaria); } .menu a.ativo svg { stroke: var(--primaria); } .menu .grupo { margin: 14px 12px 4px; font-size: .78rem; font-weight: 600; color: var(--fraco); } .menu a.secundario { font-size: .89rem; padding-top: 7px; padding-bottom: 7px; } .lateral-pe { margin-top: auto; display: grid; gap: 8px; } .lateral-pe .botao-tema { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font-size: .86rem; color: var(--suave); background: var(--cartao-2); border-color: var(--borda); } .lateral-pe .eu { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--linha); border-radius: 12px; background: var(--cartao-2); } .lateral-pe .eu .avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--primaria-clara); color: var(--primaria-escura); } .lateral-pe .eu .quem { display: grid; min-width: 0; line-height: 1.25; font-size: .85rem; } .lateral-pe .eu .quem a { color: var(--texto); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lateral-pe .eu .quem small { color: var(--suave); } .lateral-pe .eu form { margin: 0 0 0 auto; } .lateral-pe .eu button { padding: 6px; border: 0; background: none; color: var(--suave); } .lateral-pe .eu button:hover { color: var(--perigo); } .principal { position: relative; isolation: isolate; min-width: 0; } .principal::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 280px; z-index: -1; pointer-events: none; background: radial-gradient(900px 240px at 15% -60px, color-mix(in srgb, var(--primaria) 11%, transparent), transparent 70%), radial-gradient(700px 220px at 95% -80px, color-mix(in srgb, var(--info) 7%, transparent), transparent 70%); } .topo-app { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 32px 0; max-width: 1320px; } .topo-app .marca-m { display: none; } .busca-topo { flex: 0 1 340px; position: relative; margin: 0; } .busca-topo svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--fraco); } .busca-topo input { padding: 8px 12px 8px 36px; border-radius: 999px; background: var(--cartao); border: 1px solid var(--borda); box-shadow: var(--sombra); } .icone-bt { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--borda); background: var(--cartao); color: var(--suave); box-shadow: var(--sombra); padding: 0; cursor: pointer; list-style: none; } .icone-bt::-webkit-details-marker { display: none; } .icone-bt:hover { color: var(--texto); text-decoration: none; } .icone-bt .cont { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #E8890C; color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--fundo); } .sino { position: relative; } .sino[open] .icone-bt { color: var(--primaria); border-color: var(--primaria-borda); } .sino .pop { position: absolute; right: 0; top: 46px; z-index: 40; width: 340px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-alta); padding: 8px; } .sino .pop h3 { font-size: .95rem; margin: 6px 10px 6px; } .sino .pop a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--texto); } .sino .pop a:hover { background: var(--cartao-2); text-decoration: none; } .sino .pop a b { margin-left: auto; font-size: .82rem; padding: 1px 8px; border-radius: 999px; background: var(--atencao-fundo); color: var(--atencao); } .sino .pop a.perigo b { background: var(--perigo-fundo); color: var(--perigo); } .sino .pop .nada { padding: 10px; color: var(--suave); font-size: .9rem; margin: 0; } .aviso-conta { font-size: .82rem; padding: 6px 12px; border-radius: 999px; background: var(--atencao-fundo); color: var(--atencao) !important; font-weight: 600; } .conteudo { padding: 18px 32px 48px; max-width: 1320px; } .ia-fab { position: fixed; right: 22px; bottom: 22px; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--primaria); color: var(--sobre-primaria) !important; font-weight: 650; box-shadow: 0 8px 22px color-mix(in srgb, var(--primaria) 38%, transparent); } .ia-fab:hover { text-decoration: none; background: var(--primaria-escura); } .ia-fab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ===== 1.2: superfícies, campos e botões ===== */ .cartao, .ind, .semana .cartao { border-radius: var(--raio); box-shadow: var(--sombra); } .cartao { padding: 20px 22px; } .cartao > h2:first-child, .cartao .cabecalho h2 { font-size: 1.05rem; } input, select, textarea { border-color: var(--borda-forte); border-radius: var(--raio-p); background: var(--cartao); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--primaria); outline-offset: -1px; border-color: transparent; } button, .botao { border-radius: var(--raio-p); border-color: var(--borda-forte); background: var(--cartao); color: var(--texto); font-weight: 550; } .botao:hover, button:hover { background: var(--cartao-2); } .primario, button.primario, a.botao.primario { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); } .primario:hover, button.primario:hover, a.botao.primario:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); } :root[data-tema="escuro"] .primario:hover { background: var(--primaria-escura); color: var(--sobre-primaria); } button.link { background: none; color: var(--primaria); } .tabela th { text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--suave); background: var(--cartao-2); border-bottom-color: var(--borda); } .tabela td { border-bottom-color: var(--linha); } .selo { padding: .1rem .55rem; font-weight: 600; font-size: .74rem; background: var(--linha); } .abas a.ativa { color: var(--primaria-escura); } .sub { color: var(--suave); } /* indicadores: rótulo em cima, valor embaixo; o primeiro pode ser o destaque */ .indicadores { gap: 14px; margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .ind { padding: 16px 18px; gap: 4px; background: var(--cartao); border-color: var(--borda); font-size: .86rem; min-height: 104px; } .ind > span:not(.num), .ind > small { order: -1; color: var(--suave); font-weight: 500; } .ind .num { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; } .ind small { font-size: .78rem; order: 2 !important; } .ind.atencao, .ind.perigo { background: var(--cartao); } .ind.atencao { box-shadow: var(--sombra), inset 0 3px 0 var(--atencao); } .ind.perigo { box-shadow: var(--sombra), inset 0 3px 0 var(--perigo); } .ind.hi { background: linear-gradient(140deg, var(--destaque-a), var(--destaque-b)); border-color: transparent; color: rgba(255,255,255,.85); } .ind.hi .num, .ind.hi > span:not(.num), .ind.hi small { color: #fff; } a.ind.hi:hover { border-color: transparent; filter: brightness(1.05); } /* próximo passo: o elemento de destaque da tela */ .proximo { border: 0; color: #fff; background: linear-gradient(120deg, var(--destaque-a), var(--destaque-b)); box-shadow: 0 10px 26px color-mix(in srgb, var(--destaque-b) 28%, transparent); padding: 22px 24px; } .proximo h2 { color: #fff; font-size: 1.25rem; letter-spacing: -.015em; } .proximo p { color: rgba(255,255,255,.82); } .proximo .rotulo-etapa { color: rgba(255,255,255,.78); text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 600; } .proximo .botao, .proximo a.botao, .proximo button { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; } .proximo .botao:hover, .proximo button:hover { background: rgba(255,255,255,.24); } .proximo .primario, .proximo a.botao.primario, .proximo button.primario { background: #fff; border-color: #fff; color: var(--destaque-b); font-weight: 700; } .proximo .primario:hover { background: #fff; filter: brightness(.96); color: var(--destaque-b); } .rotulo-etapa { text-transform: none; letter-spacing: 0; font-size: .85rem; } .etapas li { background: var(--cartao); border: 1px solid var(--borda); } .etapas li span { background: var(--linha); } .etapas li.feita { background: var(--ok-fundo); border-color: var(--ok-borda); } .etapas li.atual { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); } .etapas li.atual span { background: var(--sobre-primaria); color: var(--primaria); } .dica { background: var(--primaria-clara); color: var(--primaria-escura); border: 1px solid var(--primaria-borda); } .sozinho { background: radial-gradient(900px 400px at 20% 0, var(--primaria-clara), transparent 70%), var(--fundo); } .entrar.cartao { box-shadow: var(--sombra-alta); } :root[data-tema="escuro"] .dente.existente { background: #4a2523; border-color: #7a3b37; } :root[data-tema="escuro"] .dente.planejado { background: #4a3f1a; border-color: #7a6a2c; } :root[data-tema="escuro"] .dente.realizado { background: #1d4430; border-color: #2e6b4b; } :root[data-tema="escuro"] .dente.ausente { background: #263238; } :root[data-tema="escuro"] .sozinho { background: var(--fundo); } /* aparência (Configurações) */ .paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .paleta { display: grid; gap: 8px; padding: 10px; text-align: left; border-radius: 12px; } .paleta i { display: block; height: 30px; border-radius: 8px; } .paleta[aria-pressed="true"] { border-color: var(--texto); box-shadow: 0 0 0 1px var(--texto); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .lateral { position: fixed; inset: auto 0 0 0; height: auto; z-index: 50; flex-direction: row; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--borda); overflow: visible; } .lateral .marca, .lateral-pe, .menu .grupo, .menu a.secundario { display: none; } .menu { flex-direction: row; justify-content: space-around; width: 100%; } .menu a { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: .68rem; flex: 1; text-align: center; } .menu a.ativo::before { display: none; } .topo-app { padding: 12px 14px 0; } .topo-app .marca-m { display: flex; align-items: center; gap: 8px; margin-right: auto; font-weight: 700; color: var(--texto); } .topo-app .marca-m .logo { width: 30px; height: 30px; border-radius: 9px; } .busca-topo { display: none; } .conteudo { padding: 14px 14px 96px; } .ia-fab { bottom: 76px; right: 14px; padding: 11px; } .ia-fab span { display: none; } .sino .pop { position: fixed; left: 12px; right: 12px; top: 60px; width: auto; } .duas, .grade { grid-template-columns: 1fr; } } .botao-tema span { align-items: center; gap: 9px; } .botao-tema .t-claro { display: inline-flex; } .botao-tema .t-escuro { display: none; } :root[data-tema="escuro"] .botao-tema .t-escuro { display: inline-flex; } :root[data-tema="escuro"] .botao-tema .t-claro { display: none; } .m-mostrar { display: none; } @media (max-width: 900px) { .menu .m-ocultar { display: none; } .menu .m-mostrar { display: inline; } } .so-celular { display: none; } @media (max-width: 900px) { .so-celular { display: block; } } @media (min-width: 901px) { .app { background: linear-gradient(to right, var(--cartao) calc(var(--lateral) - 1px), var(--borda) calc(var(--lateral) - 1px), var(--borda) var(--lateral), transparent var(--lateral)); } .conteudo { padding-bottom: 96px; } } .duas.larga-esq { grid-template-columns: 3fr 2fr; } .duas > * { min-width: 0; } @media (max-width: 900px) { .duas.larga-esq { grid-template-columns: 1fr; } .etapas li { font-size: .8rem; } } /* ===== 1.2.1: fundo decorativo em ondas (SVG como máscara, na cor escolhida) ===== */ .deco { position: fixed; pointer-events: none; z-index: 0; left: var(--lateral); right: 0; display: block; } .principal { z-index: 1; } .deco-topo { top: 0; height: 280px; opacity: .17; background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--primaria) 55%, transparent) 55%, var(--primaria) 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v120c-180 40-360 70-560 40S460 70 280 100 60 170 0 190z' fill='%23000' fill-opacity='.55'/%3E%3Cpath d='M0 0h1440v70c-220 60-420 90-640 60S380 60 200 90 40 130 0 140z' fill='%23000' fill-opacity='.8'/%3E%3Cpath d='M600 0h840v210c-120-40-260-60-420-30S760 150 600 120z' fill='%23000' fill-opacity='.35'/%3E%3C/svg%3E") center/100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v120c-180 40-360 70-560 40S460 70 280 100 60 170 0 190z' fill='%23000' fill-opacity='.55'/%3E%3Cpath d='M0 0h1440v70c-220 60-420 90-640 60S380 60 200 90 40 130 0 140z' fill='%23000' fill-opacity='.8'/%3E%3Cpath d='M600 0h840v210c-120-40-260-60-420-30S760 150 600 120z' fill='%23000' fill-opacity='.35'/%3E%3C/svg%3E") center/100% 100% no-repeat; } .deco-pe { bottom: 0; height: 250px; opacity: .09; background: linear-gradient(90deg, var(--primaria), color-mix(in srgb, var(--primaria) 40%, var(--info))); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cpath d='M0 140c200-50 420-60 640-20s460 60 800-10v130H0z' fill='%23000' fill-opacity='.6'/%3E%3Cpath d='M0 190c260-40 520-40 760-10s420 30 680-20v80H0z' fill='%23000'/%3E%3Cpath d='M0 90c300 40 560 50 820 20s420-50 620-40v170H0z' fill='%23000' fill-opacity='.3'/%3E%3C/svg%3E") center/100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cpath d='M0 140c200-50 420-60 640-20s460 60 800-10v130H0z' fill='%23000' fill-opacity='.6'/%3E%3Cpath d='M0 190c260-40 520-40 760-10s420 30 680-20v80H0z' fill='%23000'/%3E%3Cpath d='M0 90c300 40 560 50 820 20s420-50 620-40v170H0z' fill='%23000' fill-opacity='.3'/%3E%3C/svg%3E") center/100% 100% no-repeat; } :root[data-tema="escuro"] .deco-topo { opacity: .13; } :root[data-tema="escuro"] .deco-pe { opacity: .07; } :root[data-deco="nao"] .deco { display: none; } .principal::before { display: none; } @media (max-width: 900px) { .deco { left: 0; } .deco-topo { height: 190px; } .deco-pe { bottom: 60px; height: 160px; } } @media print { .deco { display: none; } } /* ===== 1.2.1: fundo em degradê ===== */ body { --degrade: linear-gradient(165deg, color-mix(in srgb, var(--primaria) 9%, var(--fundo)) 0%, var(--fundo) 42%, var(--fundo) 62%, color-mix(in srgb, var(--info) 7%, var(--fundo)) 100%); } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--degrade); } .lateral { background: linear-gradient(180deg, var(--cartao) 0%, var(--cartao) 55%, color-mix(in srgb, var(--primaria) 6%, var(--cartao)) 100%); } @media (min-width: 901px) { .app { background: linear-gradient(to right, transparent calc(var(--lateral) - 1px), var(--borda) calc(var(--lateral) - 1px), var(--borda) var(--lateral), transparent var(--lateral)); } .lateral { border-right: 0; } } :root[data-tema="escuro"] body { --degrade: linear-gradient(165deg, color-mix(in srgb, var(--primaria) 10%, var(--fundo)) 0%, var(--fundo) 45%, var(--fundo) 65%, color-mix(in srgb, var(--info) 6%, var(--fundo)) 100%); } /* ===== 1.2.2: listas de seleção (dente e procedimento TUSS) ===== */ .linha-add { align-items: flex-start; gap: 12px; } .combo { position: relative; display: grid; gap: 4px; } .combo-dente { flex: 0 0 190px; } .combo-proc { flex: 1; min-width: 0; } .combo .mini { font-size: .8rem; } .combo-campo { position: relative; } .combo-campo input { padding-right: 44px; } .combo-abrir { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: var(--suave); display: grid; place-items: center; } .combo-abrir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .lista-combo { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 45; max-height: min(420px, 60vh); overflow-y: auto; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-alta); padding: 6px; } .lista-combo:empty { display: none; } .lista-combo .sugestao { border-radius: 8px; border-bottom: 0; padding: 8px 10px; align-items: baseline; } .lista-combo .sugestao.ativo, .lista-combo .sugestao:hover { background: var(--primaria-clara); } .lista-combo .sugestao .cod { font-weight: 600; color: var(--primaria-escura); width: 6.5rem; } .lista-combo .sugestao .valores { font-size: .86rem; } .combo-grupo { position: sticky; top: -6px; z-index: 1; background: var(--cartao); padding: 8px 10px 4px; font-size: .78rem; font-weight: 650; color: var(--suave); } .combo-vazio { margin: 6px 10px; font-size: .82rem; color: var(--suave); } .lista-dente { width: 520px; right: auto; } .dentes-linha { display: flex; gap: 3px; padding: 0 6px 4px; } .dentes-linha .meio { width: 8px; } .dente-op { padding: 5px 0; width: 27px; font-size: .78rem; font-weight: 600; border-radius: 7px; } .regioes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 6px; } .regioes .dente-op { width: auto; padding: 5px 10px; font-weight: 500; } .dente-op:hover { background: var(--primaria-clara); border-color: var(--primaria-borda); } .dente-op.fora { opacity: .25; } @media (max-width: 900px) { .combo-dente { flex-basis: 100%; } .lista-dente { width: auto; right: 0; overflow-x: auto; } .lista-combo .sugestao { flex-wrap: wrap; } .lista-combo .sugestao .valores { width: 100%; } } /* ===== 1.3: odontograma ilustrado (desenho de cada dente, cor da coroa pela situação) ===== */ .odontograma-ilustrado { gap: 4px; padding: 8px 0 4px; } .odontograma-ilustrado .arcada { gap: 3px; align-items: flex-end; } .odontograma-ilustrado .arcada.inf { align-items: flex-start; } .odontograma-ilustrado .arcada .meio { width: 14px; align-self: stretch; border-left: 1px dashed var(--borda-forte); margin: 0 4px 0 10px; } .linha-oclusal { height: 0; border-top: 1px dashed var(--borda-forte); margin: 2px 6%; } .odontograma-ilustrado .dente { width: 54px; padding: 4px 0 3px; border-radius: 12px; border: 1px solid transparent; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--texto); transition: background .15s, border-color .15s; } .odontograma-ilustrado .dente.m { width: 64px; } .odontograma-ilustrado .dec .dente { width: 42px; } .odontograma-ilustrado .dec .dente.m { width: 48px; } .odontograma-ilustrado .dente:hover { background: var(--cartao-2); border-color: var(--borda); text-decoration: none; } .odontograma-ilustrado .dente b { font-size: .8rem; font-weight: 650; color: var(--suave); } .odontograma-ilustrado .dente small { font-size: .6rem; max-width: 100%; padding: 0 2px; } .dente-img { width: 40px; height: 72px; overflow: visible; } .dente.m .dente-img { width: 52px; } .dec .dente-img { width: 32px; height: 56px; } .dec .dente.m .dente-img { width: 42px; } .dente-img .raiz { fill: #EFE4CC; stroke: #B7A887; stroke-width: 1.1; } .dente-img .coroa { fill: #FFFDF7; stroke: #A99D83; stroke-width: 1.2; } .dente-img .brilho { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .9; } .dente-img .xis { fill: none; stroke: none; stroke-width: 2.4; stroke-linecap: round; } .odontograma-ilustrado .dente.existente { background: transparent; border-color: transparent; } .odontograma-ilustrado .dente.existente .coroa { fill: #F4B4AE; stroke: #C2463E; } .odontograma-ilustrado .dente.planejado { background: transparent; border-color: transparent; } .odontograma-ilustrado .dente.planejado .coroa { fill: #F7DE8C; stroke: #B58B12; } .odontograma-ilustrado .dente.realizado { background: transparent; border-color: transparent; } .odontograma-ilustrado .dente.realizado .coroa { fill: #9FDDBB; stroke: #2E8B57; } .odontograma-ilustrado .dente.ausente { background: transparent; } .odontograma-ilustrado .dente.ausente .dente-img g { opacity: .22; } .odontograma-ilustrado .dente.ausente .xis { stroke: #8D9AA5; } .odontograma-ilustrado .dente.existente small { color: var(--perigo); } .odontograma-ilustrado .dente.realizado small { color: var(--ok); } .odontograma-ilustrado .dente.planejado small { color: var(--atencao); } .odontograma-ilustrado .dente.sel { outline: 0; background: var(--primaria-clara); border-color: var(--primaria); box-shadow: 0 0 0 2px var(--primaria-borda); } .odontograma-ilustrado .dente.sel b { color: var(--primaria-escura); } .legenda i.lg-existente { background: #F4B4AE; } .legenda i.lg-planejado { background: #F7DE8C; } .legenda i.lg-realizado { background: #9FDDBB; } .legenda i.lg-ausente { background: #E3E7EB; } :root[data-tema="escuro"] .dente-img .raiz { fill: #5B5446; stroke: #7E745F; } :root[data-tema="escuro"] .dente-img .coroa { fill: #E9E4D6; stroke: #9C937D; } :root[data-tema="escuro"] .dente-img .brilho { opacity: .5; } @media (max-width: 900px) { .odontograma-ilustrado .dente { width: 40px; } .odontograma-ilustrado .dente.m { width: 46px; } .dente-img { width: 28px; height: 50px; } .dente.m .dente-img { width: 36px; } } .chips-sugestao { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 4px; } .chips-sugestao .mini { margin-right: 2px; } .chip { padding: 4px 11px; border-radius: 999px; font-size: .82rem; font-weight: 500; background: var(--primaria-clara); border-color: var(--primaria-borda); color: var(--primaria-escura); white-space: normal; text-align: left; } .chip:hover { background: var(--primaria-clara); filter: brightness(.97); } .chip.usado { background: var(--cartao); color: var(--suave); border-color: var(--borda); } .combo > .lista-combo, .combo > div > .lista-combo { min-width: min(580px, calc(100vw - 40px)); } label .lista-combo { color: var(--texto); font-size: .95rem; } /* ===================================================================================== 1.4 — SISTEMA DE MEDIDAS (vale sobre tudo acima) Letra: base 15px, escala ~1,2 → 12,5 · 13,5 · 15 · 17 · 20 · 24 Espaço: 4 · 8 · 12 · 16 · 24 · 32 | Controles: 40px (normal) e 32px (pequeno); 44px no celular Cantos: 8 nos controles, 14 nos cartões, pílula só em selos/chips Grade: cabeçalho fixo de 64px; conteúdo com as mesmas margens laterais (32px), largura até 1560px, tudo alinhado à esquerda; entre blocos sempre 16px. ===================================================================================== */ :root { --t-xs: .8333rem; --t-s: .9rem; --t-m: 1rem; --t-l: 1.1333rem; --t-xl: 1.3333rem; --t-2xl: 1.6rem; --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --alt: 40px; --alt-p: 32px; --raio-c: 8px; --largura: 1560px; --margem: 32px; --topo: 64px; } html { font-size: 15px; } body { font-size: var(--t-m); line-height: 1.5; } /* cabeçalho fixo, alinhado à mesma grade do conteúdo */ .topo-app { position: sticky; top: 0; z-index: 35; height: var(--topo); max-width: none; padding: 0 var(--margem); gap: var(--e3); justify-content: flex-start; background: color-mix(in srgb, var(--cartao) 82%, transparent); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid var(--borda); } .topo-app .espaco { flex: 1; } .busca-topo { flex: 0 1 420px; } .busca-topo input { height: var(--alt); border-radius: var(--raio-c); box-shadow: none; background: var(--cartao); } .icone-bt { width: var(--alt); height: var(--alt); border-radius: var(--raio-c); box-shadow: none; } .bt-ia { gap: var(--e2); color: var(--primaria-escura); border-color: var(--primaria-borda); background: var(--primaria-clara); } .bt-ia svg { width: 17px; height: 17px; } .ia-fab { display: none !important; } .sino .pop { top: calc(var(--alt) + var(--e2)); } .aviso-conta { order: 5; } .conteudo { max-width: var(--largura); padding: var(--e5) var(--margem) 48px; } @media (min-width: 901px) { .conteudo { padding-bottom: 48px; } } /* títulos e textos */ h1 { font-size: var(--t-2xl); line-height: 1.25; font-weight: 700; margin: 0; } h2 { font-size: var(--t-l); line-height: 1.3; font-weight: 650; margin: 0 0 var(--e3); } h3 { font-size: var(--t-m); font-weight: 650; margin: 0 0 var(--e2); } .sub { font-size: var(--t-s); margin: var(--e1) 0 0; } .cabecalho > div > .sub:last-child { margin-bottom: 0; } .mini { font-size: var(--t-s); } .voltar, a.voltar { font-size: var(--t-s); display: inline-block; margin-bottom: var(--e1); } .cabecalho { align-items: flex-end; gap: var(--e4); margin: 0 0 var(--e5); min-height: 0; } .cartao .cabecalho { align-items: center; margin-bottom: var(--e3); } .cartao .cabecalho h2 { margin: 0; } /* blocos: um espaçamento só */ .cartao { padding: 20px; margin: 0 0 var(--e4); border-radius: var(--raio); } .duas { gap: var(--e4); } .duas > section, .duas > div > section { margin-bottom: var(--e4); } .duas > * > .cartao:last-child { margin-bottom: 0; } .indicadores { gap: var(--e4); margin: 0 0 var(--e4); } .ind { min-height: 0; padding: var(--e4) 20px; gap: 2px; border-radius: var(--raio); } .ind > span:not(.num) { font-size: var(--t-s); } .ind .num { font-size: var(--t-2xl); line-height: 1.2; margin: 2px 0; } .ind small { font-size: var(--t-xs); } .alerta, .dica { padding: var(--e3) var(--e4); margin: 0 0 var(--e4); border-radius: var(--raio-c); font-size: var(--t-s); } /* controles: duas alturas */ button, .botao { height: var(--alt); padding: 0 var(--e4); display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); font-size: var(--t-s); font-weight: 600; line-height: 1; border-radius: var(--raio-c); } .pequeno, .mini-bt, button.pequeno { height: var(--alt-p); padding: 0 var(--e3); font-size: var(--t-s); } .mini-bt { width: var(--alt-p); padding: 0; } button.link { height: auto; padding: 0; display: inline; font-weight: 500; } .proximo .botoes .primario, .proximo .primario { font-size: var(--t-s); padding: 0 20px; height: var(--alt); } input, select { height: var(--alt); padding: 0 var(--e3); font-size: var(--t-m); border-radius: var(--raio-c); } textarea { padding: 10px var(--e3); font-size: var(--t-m); border-radius: var(--raio-c); } input[type=checkbox], input[type=radio] { height: auto; padding: 0; } .tabela.itens input, .tabela.itens select, .tabela.precos input { height: var(--alt-p); padding: 0 var(--e2); font-size: var(--t-s); } .busca { height: 44px; font-size: var(--t-m); } label { font-size: var(--t-s); gap: 6px; } label.check { font-size: var(--t-m); } .linha-form { gap: var(--e3); } .grade { gap: var(--e3) var(--e4); } .botoes { gap: var(--e2); } /* abas, etapas, submenus */ .abas { margin: var(--e4) 0 var(--e5); gap: var(--e1); } .abas a { padding: 10px var(--e4); font-size: var(--t-m); } .etapas { gap: var(--e2); margin: 0 0 var(--e4); } .etapas li { height: var(--alt-p); padding: 0 var(--e3) 0 var(--e1); font-size: var(--t-s); gap: var(--e2); } .etapas li span { width: 24px; height: 24px; font-size: var(--t-xs); } .submenu { gap: var(--e1); } .submenu a { height: var(--alt-p); display: inline-flex; align-items: center; padding: 0 var(--e3); font-size: var(--t-s); border-radius: var(--raio-c); } /* próximo passo: o único destaque forte */ .proximo { padding: 20px var(--e5); margin-bottom: var(--e4); gap: var(--e4); } .proximo h2 { font-size: var(--t-xl); margin: 2px 0 var(--e1); } .proximo p { font-size: var(--t-s); } .proximo .rotulo-etapa { font-size: var(--t-xs); } /* listas e tabelas */ .lista-acao li { padding: var(--e3) 0; gap: var(--e3); } .lista-acao .info b, .lista-acao .info a { font-size: var(--t-m); } .lista-acao .info .mini { font-size: var(--t-s); margin-top: 2px; } .tabela th { font-size: var(--t-xs); padding: 10px var(--e3); } .tabela td { font-size: var(--t-s); padding: 10px var(--e3); } .selo { font-size: var(--t-xs); padding: 2px 8px; } .dados { gap: var(--e2) var(--e3); font-size: var(--t-s); } /* menu lateral na mesma escala */ .lateral { padding: 0 var(--e3) var(--e4); gap: var(--e4); } .marca { height: var(--topo); padding: 0 var(--e2); border-bottom: 1px solid var(--borda); margin: 0 calc(-1 * var(--e3)); padding-left: 20px; } .menu a { height: var(--alt); padding: 0 var(--e3); font-size: var(--t-m); } .menu a.secundario { height: 36px; padding: 0 var(--e3); font-size: var(--t-s); } .menu a.ativo::before { left: calc(-1 * var(--e3)); } .menu .grupo { margin: var(--e4) var(--e3) var(--e1); font-size: var(--t-xs); } @media (max-width: 900px) { :root { --margem: 14px; --topo: 56px; --alt: 44px; } .topo-app { padding: 0 var(--margem); } .bt-ia span { display: none; } .bt-ia { width: var(--alt); padding: 0; } .conteudo { padding: var(--e4) var(--margem) 96px; } .cabecalho { flex-direction: column; align-items: stretch; margin-bottom: var(--e4); } .cabecalho .botoes { flex-wrap: wrap; } h1 { font-size: var(--t-xl); } .menu a { height: auto; padding: 6px 4px; font-size: .68rem; } .marca { height: auto; } } @media (max-width: 900px) { .cartao .cabecalho { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: var(--e3); } .cartao .cabecalho h2 { text-align: left; } } /* ===================================================================================== 1.6 — MODERNO (vale sobre tudo acima) Moldura: a aplicação inteira fica dentro de um painel arredondado; nada solto na tela. Letra base 14px, escala 12 · 13 · 14 · 16 · 20 · 24. Espaço entre blocos: 10px. Cantos: 22 moldura · 18 blocos · 12 itens internos · 10 campos · pílula em botões e chips. Cor de ação: tinta (preto no claro, quase branco no escuro). A cor da paleta só tinge destaques. ===================================================================================== */ html { font-size: 14px; } :root { --tela: #E4E7EA; --fundo: #F2F3F5; --cartao: #FFFFFF; --cartao-2: #F2F3F5; --texto: #15171B; --suave: #5E646C; --fraco: #969CA4; --borda: #E6E8EB; --borda-forte: #D6D9DE; --linha: #ECEEF0; --tinta: #15171B; --sobre-tinta: #FFFFFF; --link: var(--primaria-escura); --heroi: color-mix(in srgb, var(--primaria) 16%, #FFFFFF); --heroi-texto: color-mix(in srgb, var(--primaria-escura) 80%, #000); --folha: #E5F2D3; --folha-texto: #3D6611; --info-fundo: #E9E7FB; --info: #4B43AA; --raio: 18px; --raio-i: 12px; --raio-c: 10px; --alt: 38px; --alt-p: 30px; --t-xs: .8571rem; --t-s: .9286rem; --t-m: 1rem; --t-l: 1.1429rem; --t-xl: 1.4286rem; --t-2xl: 1.7143rem; --sombra: none; --sombra-alta: 0 16px 40px rgba(21,23,27,.16); } :root[data-tema="escuro"] { --tela: #060809; --fundo: #0E1114; --cartao: #161A1E; --cartao-2: #1D2227; --texto: #E9ECEF; --suave: #A2A9B1; --fraco: #6E767F; --borda: #252B31; --borda-forte: #333A41; --linha: #21272C; --tinta: #F1F3F5; --sobre-tinta: #121417; --heroi: color-mix(in srgb, var(--primaria) 20%, #161A1E); --heroi-texto: var(--primaria-escura); --folha: rgba(150,205,90,.14); --folha-texto: #AED784; --info-fundo: rgba(150,140,250,.15); --info: #B9B3FA; } body { background: var(--tela); font-size: var(--t-m); } body::before { display: none; } .deco { display: none !important; } ::selection { background: color-mix(in srgb, var(--primaria) 30%, transparent); } input[type=checkbox], input[type=radio] { accent-color: var(--tinta); width: 16px; height: 16px; } :focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; } /* --- moldura e menu --- */ .moldura { padding: 10px; min-height: 100vh; } .app { grid-template-columns: 236px minmax(0, 1fr); gap: 10px; background: var(--fundo) !important; border-radius: 22px; padding: 10px; min-height: calc(100vh - 20px); } .lateral { position: sticky; top: 20px; height: calc(100vh - 40px); background: var(--cartao) !important; border: 0 !important; border-radius: 16px; padding: 14px 12px 12px; gap: 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .lateral .marca { display: flex; align-items: center; gap: 9px; height: auto; border: 0; margin: 0; padding: 2px 6px 12px; font-size: var(--t-l); color: var(--texto); } .lateral .marca .logo { width: 28px; height: 28px; border-radius: 8px; background: var(--heroi); color: var(--heroi-texto) !important; display: grid; place-items: center; } .lateral .marca .logo svg { width: 17px; height: 17px; } .clinica-caixa { display: flex; align-items: center; gap: 9px; border: 1px solid var(--borda); border-radius: 12px; padding: 7px 9px; margin-bottom: 8px; color: var(--texto); } .clinica-caixa:hover { text-decoration: none; background: var(--cartao-2); } .clinica-caixa .ini { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--tinta); color: var(--sobre-tinta); display: grid; place-items: center; font-weight: 700; font-size: var(--t-xs); } .clinica-caixa .txt { display: grid; min-width: 0; line-height: 1.25; } .clinica-caixa b { font-size: var(--t-s); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .clinica-caixa small { font-size: var(--t-xs); color: var(--fraco); } .lateral .menu { gap: 1px; } .lateral .menu .grupo { display: block; margin: 10px 10px 4px; font-size: var(--t-xs); font-weight: 500; color: var(--fraco); } .lateral .menu a { height: 36px; padding: 0 10px; border-radius: 10px; gap: 10px; font-size: var(--t-s); font-weight: 500; color: var(--suave); transition: background .15s, color .15s; } .lateral .menu a svg { width: 17px; height: 17px; } .lateral .menu a:hover { background: var(--cartao-2); color: var(--texto); } .lateral .menu a.ativo { background: var(--cartao-2); color: var(--texto); font-weight: 600; view-transition-name: menu-ativo; } .lateral .menu a.ativo svg { stroke: var(--texto); } .lateral .menu a.ativo::before { display: none; } .lateral .menu a.secundario { height: 34px; padding: 0 10px; font-size: var(--t-s); } .lateral .menu .rot { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lateral .menu .qtd { font-size: var(--t-xs); font-weight: 600; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px; background: var(--cartao-2); color: var(--suave); display: grid; place-items: center; } .lateral .menu a.ativo .qtd { background: var(--cartao); } .dica-ia { margin: 12px 0 6px; background: var(--folha); color: var(--folha-texto); border-radius: 12px; padding: 11px 12px; font-size: var(--t-s); display: grid; gap: 4px; } .dica-ia b { display: flex; align-items: center; gap: 6px; color: var(--texto); } .dica-ia svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; } .dica-ia .botao { justify-self: start; margin-top: 4px; background: var(--cartao); border: 0; color: var(--texto); } .lateral-pe { margin-top: auto; display: grid; gap: 6px; padding-top: 6px; } .lateral-pe .eu { border: 0; border-top: 1px solid var(--linha); border-radius: 0; background: none; padding: 10px 4px 0; gap: 8px; } .lateral-pe .eu .avatar { width: 30px; height: 30px; background: var(--tinta); color: var(--sobre-tinta); } .lateral-pe .eu .quem { flex: 1; font-size: var(--t-s); } .lateral-pe .eu .quem small { font-size: var(--t-xs); color: var(--fraco); } .lateral-pe .eu form { margin: 0; } .lateral-pe .eu button, .lateral-pe .botao-tema { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--suave); display: grid; place-items: center; } .lateral-pe .eu button:hover, .lateral-pe .botao-tema:hover { background: var(--cartao-2); color: var(--texto); } .lateral-pe .botao-tema svg, .lateral-pe .eu button svg { width: 16px; height: 16px; } .lateral-pe .botao-tema .t-claro, .lateral-pe .botao-tema .t-escuro { display: none; } :root:not([data-tema="escuro"]) .lateral-pe .botao-tema .t-claro, :root[data-tema="escuro"] .lateral-pe .botao-tema .t-escuro { display: grid; } /* --- cabeçalho (dentro da moldura, fica preso ao rolar) --- */ .principal { min-width: 0; } .topo-app { position: sticky; top: 0; z-index: 35; height: 58px; padding: 0 2px; gap: 8px; background: var(--fundo); border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; view-transition-name: topo; } .topo-app .marca-m { display: none; } .busca-topo { flex: 0 1 280px; width: auto; position: relative; } .busca-topo input { height: 38px; border-radius: 99px; border: 1px solid transparent; background: var(--cartao); padding: 0 64px 0 36px; font-size: var(--t-s); box-shadow: none; } .busca-topo input:focus { outline: 0; border-color: var(--borda-forte); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primaria) 14%, transparent); } .busca-topo kbd { position: absolute; right: 8px; top: 50%; translate: 0 -50%; font: 600 11px/1 inherit; font-family: inherit; color: var(--suave); background: var(--cartao-2); border-radius: 6px; padding: 4px 6px; pointer-events: none; } .topo-app .icone-bt { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--cartao); color: var(--suave); box-shadow: none; } .topo-app .icone-bt:hover { color: var(--texto); } .topo-app .icone-bt svg { width: 17px; height: 17px; } .sino[open] .icone-bt { color: var(--texto); box-shadow: 0 0 0 1px var(--borda-forte); } .icone-bt .cont { top: -3px; right: -3px; background: #D8442F; border: 2px solid var(--fundo); } .sino .pop { top: 46px; border-radius: 16px; border: 1px solid var(--borda); box-shadow: var(--sombra-alta); } .conteudo { max-width: none; padding: 4px 2px 20px; view-transition-name: conteudo; } /* --- títulos --- */ h1 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.015em; } h2 { font-size: var(--t-l); font-weight: 600; letter-spacing: -.01em; } .cabecalho { align-items: flex-end; margin: 4px 0 12px; gap: 12px; } .migalha { margin: 3px 0 0; color: var(--fraco); font-size: var(--t-s); } .migalha a { color: var(--fraco); } .migalha b { color: var(--suave); font-weight: 500; } .sub { color: var(--suave); } .voltar, a.voltar { font-size: var(--t-s); color: var(--suave); } /* --- blocos --- */ .cartao, details.cartao { background: var(--cartao); border: 0; border-radius: var(--raio); padding: 16px 18px; margin: 0 0 10px; box-shadow: none; } :root[data-tema="escuro"] .cartao { border: 0; } .cartao h2, .cartao .cabecalho h2 { font-size: var(--t-l); font-weight: 600; } .cartao .cabecalho { margin: 0 0 10px; align-items: center; } .duas { gap: 10px; } .duas > * > .cartao:last-child { margin-bottom: 10px; } .indicadores { gap: 10px; margin-bottom: 10px; } /* blocos de número (início, ficha, agenda) */ .ind, .bloco-num { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 112px; padding: 14px 16px; border: 0; border-radius: var(--raio); background: var(--cartao); color: var(--suave); box-shadow: none; font-size: var(--t-s); transition: transform .15s ease, box-shadow .15s; } a.ind:hover, a.bloco-num:hover { text-decoration: none; box-shadow: 0 0 0 1px var(--borda-forte); } .ind .num, .bloco-num .v { margin-top: auto; font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; color: var(--texto); line-height: 1.2; } .ind small, .bloco-num .d { font-size: var(--t-xs); color: var(--fraco); } .bloco-num small { font-size: var(--t-s); } .ind .ic, .bloco-num .ic { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--borda); display: grid; place-items: center; color: var(--suave); } .ind .ic svg, .bloco-num .ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ind.folha, .bloco-num.folha { background: var(--folha); color: var(--folha-texto); } .ind.folha .num, .bloco-num.folha .v { color: var(--texto); } .ind.folha small, .bloco-num.folha .d { color: var(--folha-texto); } .ind.folha .ic, .bloco-num.folha .ic { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--folha-texto) 25%, transparent); color: var(--folha-texto); } .ind.escuro, .bloco-num.escuro { background: var(--tinta); color: color-mix(in srgb, var(--sobre-tinta) 65%, var(--tinta)); } .ind.escuro .num, .bloco-num.escuro .v { color: var(--sobre-tinta); } .ind.escuro small, .bloco-num.escuro .d { color: color-mix(in srgb, var(--sobre-tinta) 60%, var(--tinta)); } .ind.escuro .ic, .bloco-num.escuro .ic { box-shadow: none; background: color-mix(in srgb, var(--sobre-tinta) 12%, var(--tinta)); color: var(--sobre-tinta); } .ind.atencao, .ind.perigo { background: var(--cartao); } /* --- botões --- */ button, .botao { height: var(--alt); padding: 0 16px; border-radius: 99px; border: 1px solid var(--borda-forte); background: var(--cartao); color: var(--texto); font-size: var(--t-s); font-weight: 600; transition: background .15s, border-color .15s, color .15s, transform .1s ease; } .botao:hover, button:hover { background: var(--cartao-2); text-decoration: none; } button:active, .botao:active { transform: scale(.97); } .primario, .escuro, button.primario, a.botao.primario, button.escuro, a.botao.escuro { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-tinta); } .primario:hover, .escuro:hover { background: color-mix(in srgb, var(--tinta) 86%, var(--primaria)); border-color: transparent; color: var(--sobre-tinta); } .botao.suave, button.suave { background: var(--heroi); border-color: transparent; color: var(--heroi-texto); } .botao.claro { background: var(--sobre-tinta); color: var(--tinta); border: 0; } .pequeno, button.pequeno, .botao.pequeno { height: var(--alt-p); padding: 0 12px; font-size: var(--t-s); } .mini-bt { border-radius: 9px; } button.link { height: auto; padding: 0; border: 0; background: none; border-radius: 0; color: var(--link); } button.link:active { transform: none; } .perigo-suave { color: var(--perigo); } /* onda do clique */ button, .botao, .menu a, .seg a, .cal-mini a, .tira-semana a { position: relative; overflow: hidden; } .onda { position: absolute; border-radius: 50%; background: currentColor; opacity: .16; transform: scale(0); pointer-events: none; animation: onda .55s ease-out forwards; } @keyframes onda { to { transform: scale(1); opacity: 0; } } /* --- campos --- */ input, select, textarea { border-radius: var(--raio-c); border: 1px solid var(--borda-forte); background: var(--cartao); font-size: var(--t-m); transition: border-color .15s, box-shadow .15s; } input, select { height: var(--alt); } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--tinta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primaria) 14%, transparent); } label { color: var(--suave); font-size: var(--t-s); } .busca { height: 42px; border-radius: 99px; padding: 0 18px; } /* --- abas em pílula (segmentadas) --- */ .seg { position: relative; display: inline-flex; gap: 2px; padding: 3px; background: var(--cartao-2); border-radius: 99px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .cartao .seg { background: var(--cartao-2); } .cabecalho > .seg, .topo-ficha .seg { background: var(--cartao); } .seg a { position: relative; z-index: 1; height: 30px; padding: 0 14px; border-radius: 99px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: var(--t-s); font-weight: 600; color: var(--suave); transition: color .15s, background .15s; } .seg a:hover { color: var(--texto); text-decoration: none; } .seg a em { font-style: normal; font-weight: 500; color: var(--fraco); } .seg a.on { color: var(--texto); } .seg:not([data-abas]) a.on { background: var(--cartao-2); } .cabecalho > .seg a.on, .topo-ficha .seg a.on { background: var(--tinta); color: var(--sobre-tinta); } .topo-ficha .seg a.on { view-transition-name: aba-ficha; } .seg .pilula { position: absolute; z-index: 0; top: 3px; left: 3px; height: 30px; border-radius: 99px; background: var(--cartao); box-shadow: 0 1px 2px rgba(0,0,0,.07); transition: transform .28s cubic-bezier(.3,.8,.3,1), width .28s cubic-bezier(.3,.8,.3,1); } [data-abas] a.on { background: none; } .abas { display: none; } .submenu a { border-radius: 99px; } /* --- listas e tabelas --- */ .lista-acao { display: block; } .lista-acao li { padding: 10px 8px; margin: 0 -8px; border-bottom: 1px solid var(--linha); border-radius: 10px; background: none; gap: 10px; transition: background .15s; } .lista-acao li:hover { background: var(--cartao-2); } .lista-acao li:last-child { border-bottom: 0; } .lista-acao .info b, .lista-acao .info a { font-size: var(--t-m); font-weight: 600; } .lista-acao .info .mini { font-size: var(--t-s); color: var(--fraco); } .tabela th { background: none; font-size: var(--t-xs); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--fraco); border-bottom: 1px solid var(--linha); } .tabela td { border-bottom: 1px solid var(--linha); font-size: var(--t-s); } .tabela tbody tr { transition: background .15s; } .tabela tbody tr:hover td { background: var(--cartao-2); } .selo { font-size: var(--t-xs); font-weight: 600; padding: 2px 9px; border-radius: 99px; } .s-aprovado, .s-concluido, .s-confirmada, .s-atendida, .s-paga { background: var(--folha); color: var(--folha-texto); } .s-apresentado, .s-agendada, .s-em_andamento { background: var(--info-fundo); color: var(--info); } .barra { height: 6px; background: var(--cartao-2); border-radius: 99px; } .barra > span { background: var(--tinta); border-radius: 99px; } .barra.fina { margin: 0 0 6px; } .alerta, .dica { border-radius: var(--raio-i); border: 0; } @media (prefers-reduced-motion: no-preference) { .alerta.ok { animation: chega .35s ease-out both; } .htmx-added { animation: chega .3s ease-out both; } @keyframes chega { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } } /* --- próximo passo (consulta, plano) e etapas --- */ .proximo { background: var(--heroi); color: var(--texto); box-shadow: none; border: 0; border-radius: var(--raio); padding: 16px 18px; } .proximo h2 { color: var(--texto); font-size: var(--t-l); } .proximo p { color: var(--heroi-texto); } .proximo .rotulo-etapa { color: var(--heroi-texto); font-size: var(--t-xs); font-weight: 600; } .proximo .botao, .proximo button { background: var(--cartao); border-color: transparent; color: var(--texto); } .proximo .primario, .proximo .botao.primario, .proximo button.primario { background: var(--tinta); color: var(--sobre-tinta); } .etapas li { background: var(--cartao); border: 0; height: 30px; font-weight: 500; } .etapas li span { background: var(--cartao-2); color: var(--suave); } .etapas li.feita { background: var(--heroi); color: var(--heroi-texto); } .etapas li.feita span { background: var(--heroi-texto); color: var(--cartao); } .etapas li.atual { background: var(--tinta); color: var(--sobre-tinta); } .etapas li.atual span { background: var(--sobre-tinta); color: var(--tinta); } /* --- ficha do paciente --- */ .topo-ficha { align-items: center; } .faixa-paciente { display: flex; align-items: center; gap: 12px; background: var(--cartao); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 10px; } .faixa-paciente .chips-info { flex: 1; margin: 0; } .avatar-paciente { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-weight: 700; background: var(--heroi); color: var(--heroi-texto); } .chips-info { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; } .chips-info li { font-size: var(--t-xs); font-weight: 500; padding: 3px 10px; border-radius: 99px; background: var(--cartao-2); color: var(--suave); } .chips-info li.saude { background: var(--perigo-fundo); color: var(--perigo); font-weight: 600; } .bento-ficha { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 10px; } .heroi-paciente { grid-row: span 2; display: flex; gap: 16px; background: var(--heroi); border-radius: var(--raio); padding: 14px; min-width: 0; } .heroi-paciente .foto { width: 124px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em; color: var(--heroi-texto); background: linear-gradient(160deg, color-mix(in srgb, var(--cartao) 85%, transparent), color-mix(in srgb, var(--primaria) 22%, var(--cartao))); } .dados-heroi { display: flex; flex-direction: column; min-width: 0; padding: 2px 0; } .dados-heroi .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .tag { font-size: var(--t-xs); font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--tinta); color: var(--sobre-tinta); } .tag.clara { background: color-mix(in srgb, var(--cartao) 75%, transparent); color: var(--texto); } .tag.aviso { background: var(--atencao-fundo); color: var(--atencao); } .dados-heroi .nome { font-size: 1.9rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.08; margin: 0; } .dados-heroi .meta { margin: 6px 0 8px; color: var(--heroi-texto); font-size: var(--t-s); } .dados-heroi .chips-info li.saude { background: color-mix(in srgb, var(--cartao) 70%, transparent); } .acoes-heroi { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .acoes-heroi form { margin: 0 0 0 4px; } .circ { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--cartao) 78%, transparent); color: var(--texto); transition: background .15s, transform .1s; } .circ:hover { background: var(--cartao); text-decoration: none; } .circ:active { transform: scale(.94); } .circ svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .jornada .cabecalho { align-items: flex-start; } .jornada .cabecalho .mini { margin: 2px 0 0; } .jornada .rotulo-prox { color: var(--suave); } .linha-tempo { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .linha-tempo li { position: relative; display: flex; flex-direction: column; gap: 1px; padding-right: 10px; } .linha-tempo li::before { content: ""; position: absolute; left: 30px; right: 0; top: 13px; height: 2px; background: var(--linha); } .linha-tempo li:last-child::before { display: none; } .linha-tempo li.feita::before { background: var(--heroi-texto); } .linha-tempo .bol { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-xs); font-weight: 700; background: var(--cartao-2); color: var(--fraco); margin-bottom: 6px; } .linha-tempo li.feita .bol { background: var(--heroi); color: var(--heroi-texto); } .linha-tempo li.atual .bol { background: var(--tinta); color: var(--sobre-tinta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tinta) 12%, transparent); } .linha-tempo .bol svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; } .linha-tempo b { font-size: var(--t-s); font-weight: 600; } .linha-tempo span:not(.bol) { font-size: var(--t-xs); color: var(--fraco); } .linha-tempo li.atual span:not(.bol) { color: var(--heroi-texto); font-weight: 600; } .linha-tempo li:not(.feita):not(.atual) b { color: var(--suave); } @media (prefers-reduced-motion: no-preference) { .linha-tempo li.atual .bol { animation: pulso 2.4s ease-in-out 1; } @keyframes pulso { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--tinta) 6%, transparent); } } } .odonto-mini .arcadas { display: grid; gap: 4px; } .odonto-mini .arcadas:hover { text-decoration: none; } .arcada { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; } .arcada i { height: 22px; border-radius: 6px 6px 9px 9px; background: var(--cartao-2); box-shadow: inset 0 0 0 1px var(--borda); } .arcada.inf i { border-radius: 9px 9px 6px 6px; } .arcada i.existente { background: #FBD9D5; box-shadow: inset 0 0 0 1px #F0B0A7; } .arcada i.planejado { background: #FFF0C7; box-shadow: inset 0 0 0 1px #EDD08A; } .arcada i.realizado { background: var(--folha); box-shadow: inset 0 0 0 1px #BEDC98; } .arcada i.ausente { background: none; box-shadow: inset 0 0 0 1px var(--borda); opacity: .5; } .legenda-mini { display: flex; gap: 12px; margin-top: 8px; font-size: var(--t-xs); color: var(--suave); } .legenda-mini span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 5px; } .legenda-mini .lg-existente::before { background: #F0B0A7; } .legenda-mini .lg-planejado::before { background: #EDD08A; } .legenda-mini .lg-realizado::before { background: #BEDC98; } /* --- início --- */ .tira-semana { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding: 8px; margin-bottom: 10px; } .tira-semana a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; color: var(--suave); transition: background .15s; } .tira-semana a:hover { background: var(--cartao-2); text-decoration: none; } .tira-semana .dsem { font-size: var(--t-xs); font-weight: 500; color: var(--fraco); } .tira-semana .dnum { font-size: var(--t-l); font-weight: 600; color: var(--texto); } .tira-semana .dqtd { min-height: 16px; font-size: 11px; font-weight: 700; color: var(--heroi-texto); } .tira-semana .dqtd:not(:empty) { background: var(--heroi); border-radius: 99px; padding: 0 7px; } .tira-semana a.passado .dnum { color: var(--fraco); } .tira-semana a.hoje { grid-column: span 2; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 8px 14px; background: var(--tinta); color: var(--sobre-tinta); } .tira-semana a.hoje .dsem, .tira-semana a.hoje .dnum { color: var(--sobre-tinta); } .tira-semana a.hoje .dsem { writing-mode: vertical-rl; rotate: 180deg; opacity: .7; } .tira-semana a.hoje .dnum { font-size: var(--t-xl); } .tira-semana .dinfo { display: grid; text-align: left; font-size: var(--t-xs); line-height: 1.35; color: color-mix(in srgb, var(--sobre-tinta) 65%, var(--tinta)); } .tira-semana .dinfo b { color: var(--sobre-tinta); font-size: var(--t-s); } .cartao h3.mini { margin: 12px 0 2px; font-size: var(--t-xs); color: var(--fraco); font-weight: 500; } .cartao h2 + h3.mini { margin-top: 0; } /* --- agenda --- */ .barra-agenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; } .barra-agenda > .seg { background: var(--cartao); } .barra-agenda > .seg a.on { background: var(--tinta); color: var(--sobre-tinta); } .barra-agenda input[type=date] { width: auto; height: 36px; border-radius: 99px; border: 0; background: var(--cartao); padding: 0 14px; font-size: var(--t-s); } .barra-agenda .espaco { flex: 1; } .nav-data { display: inline-flex; align-items: center; gap: 4px; } .nav-data .icone-bt { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--cartao); color: var(--texto); font-size: 18px; line-height: 1; display: grid; place-items: center; } .nav-data .icone-bt:hover { background: var(--cartao-2); text-decoration: none; } .cartao .nav-data .icone-bt { background: var(--cartao-2); } .chips-dentista { display: flex; flex-wrap: wrap; gap: 4px; } .chips-dentista a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 6px; border-radius: 99px; background: var(--cartao); color: var(--suave); font-size: var(--t-s); font-weight: 500; } .chips-dentista a:first-child { padding-left: 12px; } .chips-dentista a i { width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 700; display: grid; place-items: center; background: var(--info-fundo); color: var(--info); } .chips-dentista a:hover { text-decoration: none; color: var(--texto); } .chips-dentista a.on { background: var(--tinta); color: var(--sobre-tinta); } .agenda-layout { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 10px; align-items: start; } .agenda-layout > * > .cartao:last-child { margin-bottom: 0; } .painel-agenda { display: grid; gap: 10px; position: sticky; top: 64px; } .painel-agenda .cartao { margin: 0; } .agenda-dia { border-collapse: separate; border-spacing: 0; } .agenda-dia th { background: none; border: 0; border-bottom: 1px solid var(--linha); padding: 12px 10px; text-align: left; font-size: var(--t-s); font-weight: 600; color: var(--texto); } .agenda-dia td { border: 0; border-top: 1px solid var(--linha); padding: 4px 8px; height: 46px; } .agenda-dia tr.meia td { border-top: 1px dashed var(--linha); } .agenda-dia tbody tr:first-child td { border-top: 0; } .agenda-dia td.hora { width: 64px; text-align: right; padding: 0 12px 0 8px; vertical-align: top; font-size: var(--t-xs); font-weight: 600; color: var(--suave); position: relative; top: -8px; border-top-color: transparent !important; } .agenda-dia td.hora span { color: var(--fraco); font-weight: 500; } .agenda-dia tr.agora td { box-shadow: inset 0 2px 0 #D8442F; } .agenda-dia tr.agora td.hora { color: #D8442F; box-shadow: none; } .agenda-dia tr.agora td.hora::after { content: ""; position: absolute; right: -4px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #D8442F; } .agenda-dia td.livre a { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 10px; color: transparent; font-size: var(--t-s); font-weight: 600; transition: background .15s, color .15s; } .agenda-dia td.livre:hover a { color: var(--suave); background: var(--cartao-2); box-shadow: inset 0 0 0 1px var(--borda-forte); text-decoration: none; } .consulta { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; margin: 2px 0; border-radius: 10px; background: var(--cartao-2); color: var(--texto); position: relative; transition: transform .12s, box-shadow .15s; } .consulta::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--fraco); } .consulta:hover { text-decoration: none; filter: none; box-shadow: 0 0 0 1px var(--borda-forte); } .consulta:active { transform: scale(.99); } .consulta .c-hora { font-size: var(--t-xs); font-weight: 700; color: var(--suave); width: 38px; flex: none; } .consulta .c-txt { flex: 1; min-width: 0; display: grid; line-height: 1.3; } .consulta .c-txt b { font-size: var(--t-s); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .consulta small { color: var(--suave); font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .consulta.st-agendada { background: var(--info-fundo); } .consulta.st-agendada::before { background: var(--info); } .consulta.st-confirmada { background: var(--folha); } .consulta.st-confirmada::before { background: var(--folha-texto); } .consulta.st-atendida { background: var(--cartao-2); } .consulta.st-atendida::before { background: var(--fraco); } .consulta.st-atendida .c-txt b { color: var(--suave); } .consulta.st-faltou { background: var(--perigo-fundo); } .consulta.st-faltou::before { background: var(--perigo); } .consulta.st-desmarcou { opacity: .6; } .consulta.st-desmarcou .c-txt b { text-decoration: line-through; } .cal-mini .cabecalho { margin-bottom: 6px; } .cal-mini h2 { font-size: var(--t-m); } .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .cal-grade .cab { font-size: 11px; color: var(--fraco); font-weight: 600; padding: 4px 0; } .cal-grade a { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-size: var(--t-s); color: var(--texto); font-weight: 500; transition: background .15s; } .cal-grade a:hover { background: var(--cartao-2); text-decoration: none; } .cal-grade a.fora { color: var(--fraco); opacity: .5; } .cal-grade a i { position: absolute; bottom: 4px; left: 50%; translate: -50% 0; width: 4px; height: 4px; border-radius: 50%; background: var(--primaria); } .cal-grade a.hoje { box-shadow: inset 0 0 0 1.5px var(--tinta); font-weight: 700; } .cal-grade a.sel { background: var(--tinta); color: var(--sobre-tinta); font-weight: 700; } .cal-grade a.sel i { background: var(--sobre-tinta); } .resumo-dia h2 { font-size: var(--t-m); margin-bottom: 10px; } .resumo-dia dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; } .resumo-dia dl div { background: var(--cartao-2); border-radius: 12px; padding: 9px 12px; } .resumo-dia dt { font-size: var(--t-xs); color: var(--suave); } .resumo-dia dd { margin: 0; font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; } .resumo-dia .ok { background: var(--folha); } .resumo-dia .ok dt { color: var(--folha-texto); } .resumo-dia .at { background: var(--info-fundo); } .resumo-dia .at dt { color: var(--info); } .proximo-paciente { min-height: 0; gap: 3px; } .proximo-paciente .v { font-size: var(--t-l); margin-top: 6px; } .proximo-paciente .botao { align-self: flex-start; margin-top: 10px; } .semana { grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 8px; } .semana .cartao { padding: 10px; margin: 0; } .semana .cartao.hoje { box-shadow: inset 0 0 0 1.5px var(--tinta); } .semana h2 { font-size: var(--t-s); margin-bottom: 6px; } .semana .consulta { flex-wrap: wrap; gap: 2px 8px; } .semana .consulta .selo { display: none; } /* --- transição entre telas (o menu e o cabeçalho ficam, o conteúdo troca) --- */ @view-transition { navigation: auto; } .lateral { view-transition-name: lateral; } ::view-transition-old(lateral), ::view-transition-old(topo) { display: none; } ::view-transition-new(lateral), ::view-transition-new(topo) { animation: none; } ::view-transition-group(menu-ativo), ::view-transition-group(aba-ficha) { animation-duration: .28s; animation-timing-function: cubic-bezier(.3,.8,.3,1); } ::view-transition-old(conteudo) { animation: vt-sai .14s ease-in both; } ::view-transition-new(conteudo) { animation: vt-entra .26s cubic-bezier(.2,.8,.2,1) both; } @keyframes vt-sai { to { opacity: 0; } } @keyframes vt-entra { from { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } .seg .pilula, button, .botao { transition: none; } } /* --- telas médias: painel da agenda embaixo, bento em duas colunas --- */ @media (max-width: 1200px) { .agenda-layout { grid-template-columns: 1fr; } .painel-agenda { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .bento-ficha { grid-template-columns: 1fr 1fr; } .heroi-paciente { grid-column: 1 / -1; grid-row: auto; } } /* --- celular --- */ @media (max-width: 900px) { :root { --alt: 44px; --alt-p: 36px; } .moldura { padding: 0; } .app { display: block; border-radius: 0; padding: 0 12px 84px; min-height: 100vh; } .lateral { position: fixed; inset: auto 0 0 0; top: auto; height: auto; z-index: 50; flex-direction: row; overflow: visible; border-radius: 18px 18px 0 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(0,0,0,.08); } .lateral .marca, .clinica-caixa, .lateral .menu .grupo, .lateral .menu a.secundario, .dica-ia, .lateral-pe { display: none; } .lateral .menu { flex-direction: row; justify-content: space-around; width: 100%; } .lateral .menu a { flex: 1; height: 54px; flex-direction: column; justify-content: center; gap: 3px; padding: 0 2px; font-size: 11px; } .lateral .menu a .rot { flex: none; } .lateral .menu .qtd { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; background: var(--tinta); color: var(--sobre-tinta); font-size: 10px; } .topo-app { height: 56px; } .topo-app .marca-m { display: flex; align-items: center; gap: 8px; margin-right: auto; font-weight: 700; color: var(--texto); } .topo-app .marca-m .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--heroi); color: var(--heroi-texto) !important; display: grid; place-items: center; } .topo-app .espaco { display: none; } .busca-topo { display: none; } .bt-agendar { width: 38px; padding: 0; font-size: 20px; } .bt-agendar span { display: none; } .cabecalho { flex-direction: column; align-items: stretch; } .topo-ficha .seg { align-self: stretch; } .bento-ficha { grid-template-columns: 1fr 1fr; } .heroi-paciente { flex-direction: column; } .heroi-paciente .foto { width: 64px; height: 64px; font-size: 1.4rem; } .dados-heroi .nome { font-size: 1.5rem; } .bloco-num { min-height: 96px; } .linha-tempo { grid-template-columns: repeat(5, minmax(96px, 1fr)); overflow-x: auto; padding-bottom: 6px; } .jornada .cabecalho .botoes { justify-content: flex-start; } .faixa-paciente { flex-wrap: wrap; } .tira-semana { grid-template-columns: repeat(7, minmax(0, 1fr)); } .tira-semana a.hoje { grid-column: auto; flex-direction: column; gap: 1px; padding: 8px 4px; } .tira-semana a.hoje .dsem { writing-mode: horizontal-tb; rotate: none; } .tira-semana a.hoje .dinfo { display: none; } .tira-semana a.hoje .dnum { font-size: var(--t-l); } .indicadores { grid-template-columns: 1fr 1fr; } .indicadores .ind:last-child { grid-column: 1 / -1; } .chips-dentista { width: 100%; overflow-x: auto; flex-wrap: nowrap; } .barra-agenda .espaco { display: none; } .semana { grid-template-columns: 1fr; } } @media (max-width: 600px) { .lista-acao li { flex-wrap: wrap; } .lista-acao li .info { flex-basis: 100%; } } @media print { .lateral, .topo-app { display: none !important; } .app, .moldura { display: block; padding: 0; background: none !important; } } /* 1.6 ajustes */ .lateral .marca .logo, .topo-app .marca-m .logo { box-shadow: none !important; } .lateral .marca .logo svg, .topo-app .marca-m .logo svg { stroke: var(--heroi-texto) !important; } .seg a { flex: none; } .conteudo > .cabecalho:first-child, .conteudo > .voltar:first-child { margin-top: 0; } .topo-app { height: 54px; } @media (max-width: 900px) { .linha-tempo { grid-template-columns: 1fr; gap: 8px; overflow: visible; } .linha-tempo li { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; align-items: center; padding: 0; } .linha-tempo li .bol { grid-row: span 2; margin: 0; } .linha-tempo li::before { left: 12px; right: auto; top: 28px; bottom: -10px; width: 2px; height: auto; } } .ind.hi { background: var(--tinta); color: color-mix(in srgb, var(--sobre-tinta) 65%, var(--tinta)); } .ind.hi .num, .ind.hi > span:not(.num) { color: var(--sobre-tinta); } .ind.hi small { color: color-mix(in srgb, var(--sobre-tinta) 60%, var(--tinta)); } .odontograma-ilustrado .arcada { flex-wrap: nowrap; display: flex; justify-content: center; } .odontograma-ilustrado .dente { width: auto; flex: 1 1 0; min-width: 0; max-width: 54px; } .odontograma-ilustrado .dente.m { max-width: 64px; flex-grow: 1.2; } .odontograma-ilustrado .dente svg { max-width: 100%; height: auto; } .agenda-layout:has(.semana) { grid-template-columns: 1fr; } .agenda-layout:has(.semana) .painel-agenda { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .cal-grade a { aspect-ratio: auto; height: 34px; } /* ===================================================================================== 1.7 — VISUAL DO FIGMA DO RILMO ("Plataforma de Gestão Odontológica") Inter · fundo #F7F9FC · cartões brancos com borda #E7ECF2 e canto 12px Ação principal: azul-marinho #15364B · destaque: verde-água #12A89D Menu lateral branco fixo (recolhível) · cabeçalho branco de 76px com trilha + título ===================================================================================== */ @font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/static/fontes/inter-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/static/fontes/inter-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/static/fontes/inter-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/static/fontes/inter-latin-700-normal.woff2") format("woff2"); } html { font-size: 13px; } :root { font-family: "Inter", "Segoe UI", system-ui, sans-serif; font-feature-settings: "tnum" 1, "cv11" 1; --tela: #F7F9FC; --fundo: #F7F9FC; --cartao: #FFFFFF; --cartao-2: #F7F9FC; --texto: #202B3C; --suave: #68768A; --fraco: #8491A5; --borda: #E7ECF2; --borda-forte: #DFE5EB; --linha: #EFF2F5; --primaria: #12A89D; --primaria-escura: #0B8F86; --primaria-clara: #EAF8F6; --primaria-borda: #BFE7E2; --navy: #15364B; --tinta: #15364B; --sobre-tinta: #FFFFFF; --link: #0B8F86; --heroi: #EAF8F6; --heroi-texto: #087E77; --folha: #E5F5EF; --folha-texto: #23836D; --info-fundo: #E9EFF8; --info: #4F6E9B; --ok: #23836D; --ok-fundo: #E5F5EF; --atencao: #A47530; --atencao-fundo: #FBF0DE; --perigo: #BC625D; --perigo-fundo: #FAE9E7; --raio: 12px; --raio-i: 10px; --raio-c: 9px; --alt: 38px; --alt-p: 32px; --lateral: 248px; --t-xs: 11px; --t-s: 12px; --t-m: 13px; --t-l: 15px; --t-xl: 22px; --t-2xl: 26px; --sombra-cartao: 0 2px 5px rgba(36,51,66,.025); --sombra-alta: 0 18px 50px rgba(24,42,58,.14); } :root[data-cor="oceano"] { --primaria: #0884A6; --primaria-escura: #066A86; --primaria-clara: #E0F2F8; --heroi: #E0F2F8; --heroi-texto: #066A86; } :root[data-cor="azul"] { --primaria: #2F62D9; --primaria-escura: #224CB0; --primaria-clara: #E8EFFD; --heroi: #E8EFFD; --heroi-texto: #224CB0; } :root[data-cor="ameixa"] { --primaria: #8A3FA8; --primaria-escura: #6E3087; --primaria-clara: #F4E9F8; --heroi: #F4E9F8; --heroi-texto: #6E3087; } :root[data-cor="grafite"]{ --primaria: #3B4A57; --primaria-escura: #2A3640; --primaria-clara: #E9EDF0; --heroi: #E9EDF0; --heroi-texto: #2A3640; } :root[data-tema="escuro"] { --tela: #0E151B; --fundo: #0E151B; --cartao: #151E26; --cartao-2: #1A252E; --texto: #E6EDF3; --suave: #A0AEBB; --fraco: #73828F; --borda: #23303B; --borda-forte: #2E3D49; --linha: #1F2A33; --tinta: #E6EDF3; --sobre-tinta: #0E151B; --navy: #2B5673; --link: #4FD1C5; --heroi: rgba(18,168,157,.14); --heroi-texto: #4FD1C5; --primaria-clara: rgba(18,168,157,.14); --folha: rgba(35,131,109,.2); --folha-texto: #6FD3B4; --info-fundo: rgba(79,110,155,.22); --info: #9DB8DE; --atencao-fundo: rgba(164,117,48,.2); --atencao: #E8B56A; --perigo-fundo: rgba(188,98,93,.2); --perigo: #F09A94; --sombra-cartao: none; } body { background: var(--fundo); color: var(--texto); font-size: var(--t-m); } h1 { font-size: 22px; font-weight: 500; letter-spacing: -.5px; color: var(--texto); } h2 { font-size: 15px; font-weight: 500; letter-spacing: -.2px; } :focus-visible { outline: 3px solid rgba(18,168,157,.22); outline-offset: 1px; } input[type=checkbox], input[type=radio] { accent-color: var(--primaria); } /* --- estrutura: menu fixo à esquerda, conteúdo à direita --- */ .moldura { padding: 0; max-width: none; } .app { display: block; padding: 0; border-radius: 0; background: var(--fundo) !important; min-height: 100vh; } .lateral { position: fixed; inset: 0 auto 0 0; top: 0; z-index: 50; width: var(--lateral); height: 100vh; display: flex; flex-direction: column; gap: 0; padding: 0; border-radius: 0; background: var(--cartao) !important; border: 0 !important; border-right: 1px solid var(--borda) !important; overflow: visible; transition: width .25s ease; } .lateral-topo { position: relative; height: 76px; flex: none; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--linha); } .lateral .marca { display: flex; align-items: center; gap: 11px; padding: 0; margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--texto); } .lateral .marca:hover { text-decoration: none; } .lateral .marca .logo, .topo-app .marca-m .logo { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--navy); color: #fff !important; box-shadow: 0 6px 15px rgba(21,54,75,.18) !important; } .lateral .marca .logo svg, .topo-app .marca-m .logo svg { width: 21px; height: 21px; stroke: #fff !important; fill: none; stroke-width: 1.7; } .marca-txt { display: grid; min-width: 0; } .marca-txt b { font-size: 16px; font-weight: 600; letter-spacing: -.4px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; } .marca-txt small { margin-top: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: .75px; text-transform: uppercase; color: var(--fraco); } .recolher { position: absolute; right: -11px; top: 27px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--borda); background: var(--cartao); color: var(--suave); display: grid; place-items: center; box-shadow: 0 3px 8px rgba(28,41,55,.08); z-index: 2; } .recolher svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .25s; } .recolher:hover { background: var(--cartao); color: var(--texto); } .lateral .menu { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 18px 12px; overflow-y: auto; scrollbar-width: thin; } .lateral .menu a, .lateral .menu a.secundario { position: relative; height: 43px; flex: none; display: flex; align-items: center; gap: 13px; padding: 0 13px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--suave); white-space: nowrap; transition: background .18s, color .18s; } .lateral .menu a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; } .lateral .menu a:hover { background: var(--cartao-2); color: var(--texto); text-decoration: none; } .lateral .menu a.ativo { background: var(--heroi); color: var(--heroi-texto); font-weight: 600; } .lateral .menu a.ativo svg { stroke: var(--heroi-texto); } .lateral .menu a.ativo::before { content: ""; display: block; position: absolute; left: 0; top: 11px; width: 3px; height: 21px; border-radius: 0 3px 3px 0; background: var(--primaria); } .lateral .menu .qtd { margin-left: auto; min-width: 20px; height: 19px; padding: 0 6px; border-radius: 10px; background: var(--heroi); color: var(--heroi-texto); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; } .lateral .menu a.ativo .qtd { background: color-mix(in srgb, var(--primaria) 18%, var(--cartao)); } .lateral .eu { margin: 0 12px 14px; padding: 11px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--linha); border-radius: 11px; background: var(--cartao-2); overflow: hidden; } .lateral .eu .avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--heroi); color: var(--heroi-texto); } .lateral .eu .quem { flex: 1; min-width: 0; display: grid; line-height: 1.3; } .lateral .eu .quem a { font-size: 12.5px; font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lateral .eu .quem small { font-size: 11px; color: var(--fraco); } .lateral .eu form { margin: 0; } .lateral .eu button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--fraco); display: grid; place-items: center; } .lateral .eu button:hover { background: var(--cartao); color: var(--texto); } .lateral .eu button svg { width: 17px; height: 17px; } .lateral .eu .botao-tema .t-claro, .lateral .eu .botao-tema .t-escuro { display: none; } :root:not([data-tema="escuro"]) .lateral .eu .botao-tema .t-claro, :root[data-tema="escuro"] .lateral .eu .botao-tema .t-escuro { display: grid; } .dica-ia, .clinica-caixa, .lateral-pe { display: none; } .principal { margin-left: var(--lateral); min-width: 0; transition: margin .25s ease; } /* menu recolhido */ :root[data-menu="recolhido"] { --lateral: 76px; } :root[data-menu="recolhido"] .marca-txt, :root[data-menu="recolhido"] .lateral .menu .rot, :root[data-menu="recolhido"] .lateral .menu .qtd, :root[data-menu="recolhido"] .lateral .eu .quem, :root[data-menu="recolhido"] .lateral .eu form, :root[data-menu="recolhido"] .lateral .eu .botao-tema { display: none; } :root[data-menu="recolhido"] .lateral .menu a { justify-content: center; padding: 0; } :root[data-menu="recolhido"] .lateral .eu { border: 0; background: none; padding: 6px; justify-content: center; margin: 0 10px 14px; } :root[data-menu="recolhido"] .recolher svg { transform: rotate(180deg); } /* --- cabeçalho --- */ .topo-app { position: sticky; top: 0; z-index: 30; height: 76px; padding: 0 30px; display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--cartao) 94%, transparent); border-bottom: 1px solid var(--borda); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .topo-app .marca-m { display: none; } .topo-titulo { flex: 1; min-width: 0; display: grid; gap: 3px; } .topo-titulo .trilha { font-size: 11px; color: var(--fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topo-titulo .trilha i { font-style: normal; margin: 0 6px; color: var(--borda-forte); } .topo-titulo strong { font-size: 17px; font-weight: 500; letter-spacing: -.2px; color: var(--texto); } .busca-topo { flex: 0 1 300px; width: auto; position: relative; display: flex; align-items: center; } .busca-topo > svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--fraco); pointer-events: none; z-index: 1; } .busca-topo input { width: 100%; height: 38px; margin: 0; padding: 0 58px 0 34px; border-radius: 9px; border: 1px solid var(--borda); background: var(--cartao-2); font-size: 12px; box-shadow: none; } .busca-topo input:focus { border-color: var(--primaria-borda); background: var(--cartao); box-shadow: 0 0 0 3px rgba(18,168,157,.15); } .busca-topo kbd { position: absolute; right: 9px; top: 50%; translate: 0 -50%; padding: 3px 6px; border: 1px solid var(--borda); border-radius: 5px; background: var(--cartao); color: var(--fraco); font: 500 10px/1 Inter, sans-serif; pointer-events: none; } .topo-app .icone-bt { position: relative; width: 38px; height: 38px; padding: 0; border-radius: 9px; border: 1px solid var(--borda); background: var(--cartao); color: var(--suave); display: grid; place-items: center; box-shadow: none; } .topo-app .icone-bt:hover { background: var(--cartao-2); color: var(--texto); } .topo-app .icone-bt svg { width: 18px; height: 18px; } .icone-bt .ponto { position: absolute; right: 8px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #EF6B64; box-shadow: 0 0 0 2px var(--cartao); } .sino { position: relative; } .sino summary { list-style: none; cursor: pointer; } .sino summary::-webkit-details-marker { display: none; } .sino .pop { position: absolute; right: 0; top: 47px; width: 300px; padding: 0; overflow: hidden; background: var(--cartao); border: 1px solid var(--borda); border-radius: 13px; box-shadow: var(--sombra-alta); animation: pop-entra .16s ease; z-index: 40; } @keyframes pop-entra { from { opacity: 0; transform: translateY(-5px); } } .sino .pop h3 { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--borda); font-size: 13px; font-weight: 600; } .sino .pop h3 span { min-width: 20px; padding: 2px 7px; border-radius: 10px; background: #F9EAE4; color: #C56D52; font-size: 11px; text-align: center; } .sino .pop a { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--linha); color: var(--texto); font-size: 12.5px; } .sino .pop a:last-child { border-bottom: 0; } .sino .pop a:hover { background: var(--cartao-2); text-decoration: none; } .sino .pop a b { margin-left: auto; font-size: 11px; color: var(--suave); } .sino .pop a svg { width: 17px; height: 17px; color: var(--suave); } .sino .pop .nada { padding: 14px 16px; margin: 0; color: var(--fraco); font-size: 12px; } .acao-rapida summary.botao { height: 38px; padding: 0 15px; gap: 7px; display: inline-flex; align-items: center; } .acao-rapida summary svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; } .acao-rapida .pop { width: 240px; padding: 6px; } .acao-rapida .pop a { border: 0; border-radius: 8px; padding: 10px; } .conteudo { max-width: 1620px; margin: 0 auto; padding: 27px 30px 40px; } .conteudo:has(> .cabecalho:first-child) { padding-top: 27px; } /* --- título da página: igual ao "Bom dia" do Figma --- */ .cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 22px; flex-wrap: wrap; } .conteudo > .cabecalho:first-child { min-height: 0; padding-right: 0; margin: 0 0 22px; } .cabecalho h1 { margin: 0; } .migalha, .cabecalho .sub { margin: 6px 0 0; font-size: 12px; color: var(--fraco); } .migalha b { color: var(--suave); font-weight: 500; } .cabecalho .botoes { display: flex; gap: 8px; flex-wrap: wrap; } /* --- cartões --- */ .cartao, details.cartao { background: var(--cartao); border: 1px solid var(--borda) !important; border-radius: var(--raio); padding: 18px; margin: 0 0 15px; box-shadow: var(--sombra-cartao); } .cartao h2, .cartao .cabecalho h2 { font-size: 14px; font-weight: 500; letter-spacing: -.2px; margin: 0 0 4px; } .cartao .cabecalho { margin: 0 0 12px; gap: 10px; } .cartao .mini, .cartao .cabecalho .mini { font-size: 11px; color: var(--fraco); } .duas, .indicadores { gap: 15px; } .indicadores { margin-bottom: 15px; } .duas > * > .cartao:last-child { margin-bottom: 15px; } /* --- números (KPI do Figma): ícone em quadrado colorido no canto --- */ .ind, .bloco-num { position: relative; min-height: 120px; padding: 17px; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cartao); color: var(--suave); box-shadow: var(--sombra-cartao); font-size: 12px; font-weight: 500; transition: transform .18s ease, box-shadow .18s, border-color .18s; } a.ind:hover, a.bloco-num:hover { text-decoration: none; border-color: var(--borda-forte); box-shadow: 0 8px 22px rgba(24,42,58,.07); transform: translateY(-1px); } .ind > span:first-of-type:not(.ic), .bloco-num > span:first-of-type:not(.ic) { padding-right: 44px; } .ind .num, .bloco-num .v { margin-top: 16px; font-size: 24px; font-weight: 600; letter-spacing: -.7px; line-height: 1.05; color: var(--texto); } .ind small, .bloco-num .d { margin-top: 12px; font-size: 11px; color: var(--fraco); font-weight: 500; } .ind .ic, .bloco-num .ic { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; border-radius: 9px; box-shadow: none; display: grid; place-items: center; background: #E5F6F4; color: #108B83; } .ind .ic svg, .bloco-num .ic svg { width: 18px; height: 18px; } .ind:nth-child(6n+2) .ic, .bloco-num:nth-child(4n+2) .ic { background: #EAF0F4; color: #3F6580; } .ind:nth-child(6n+3) .ic, .bloco-num:nth-child(4n+3) .ic { background: #EFEBF8; color: #7764A5; } .ind:nth-child(6n+4) .ic, .bloco-num:nth-child(4n+4) .ic { background: #E8F4EC; color: #3F8B69; } .ind:nth-child(6n+5) .ic { background: #FBF0DF; color: #B67C34; } .ind:nth-child(6n+6) .ic { background: #E6F3F7; color: #317E9B; } .ind.folha, .bloco-num.folha, .ind.escuro, .bloco-num.escuro, .ind.hi { background: var(--cartao); color: var(--suave); } .ind.folha .num, .bloco-num.folha .v, .ind.escuro .num, .bloco-num.escuro .v, .ind.hi .num { color: var(--texto); } .ind.escuro small, .bloco-num.escuro .d, .ind.folha small, .bloco-num.folha .d, .ind.hi small { color: var(--fraco); } .ind.hi > span:not(.num) { color: var(--suave); } .ind .sobe { color: #229473; font-weight: 600; } .ind .desce { color: #D16C61; font-weight: 600; } .ind small b { font-weight: 600; } .ind.atencao .ic { background: #FBF0DF; color: #B67C34; } .ind.perigo .ic { background: #FAE9E7; color: #BC625D; } :root[data-tema="escuro"] .ind .ic, :root[data-tema="escuro"] .bloco-num .ic { background: var(--heroi) !important; color: var(--heroi-texto) !important; } /* --- botões (Figma: canto 8px, marinho no principal) --- */ button, .botao { height: var(--alt); padding: 0 14px; border-radius: 8px; border: 1px solid var(--borda-forte); background: var(--cartao); color: #526176; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; } .botao:hover, button:hover { background: var(--cartao-2); border-color: #C9D3DC; color: var(--texto); text-decoration: none; } .primario, .escuro, button.primario, a.botao.primario, button.escuro, a.botao.escuro, summary.botao.primario { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 4px 10px rgba(21,54,75,.12); } .primario:hover, .escuro:hover, button.primario:hover, a.botao.primario:hover, summary.botao.primario:hover { background: #0E293B; border-color: #0E293B; color: #fff; transform: translateY(-1px); } :root[data-tema="escuro"] .primario, :root[data-tema="escuro"] .escuro { background: var(--primaria); border-color: var(--primaria); color: #04201D; } .botao.suave, button.suave { background: var(--heroi); border-color: transparent; color: var(--heroi-texto); } .pequeno, button.pequeno, .botao.pequeno { height: var(--alt-p); padding: 0 11px; font-size: 11.5px; } button:active, .botao:active { transform: scale(.98); } button.link { height: auto; padding: 0; border: 0; background: none; color: var(--link); } a { color: var(--link); } a.mini { color: var(--primaria-escura); font-size: 11.5px; font-weight: 600; } /* --- campos --- */ input, select, textarea { border-radius: var(--raio-c); border: 1px solid var(--borda); background: var(--cartao); font-size: 13px; color: var(--texto); } input:focus, select:focus, textarea:focus { border-color: var(--primaria-borda); box-shadow: 0 0 0 3px rgba(18,168,157,.15); } label { color: var(--suave); font-size: 12px; font-weight: 500; } .busca { height: 38px; border-radius: 9px; padding: 0 14px; background: var(--cartao-2); border: 1px solid var(--borda); } /* --- abas: botões "filtro" do Figma --- */ .seg { background: none !important; padding: 0; gap: 4px; border-radius: 0; } .seg a { height: 32px; padding: 0 12px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--suave); } .seg a:hover { background: var(--cartao-2); } .seg a.on, .cabecalho > .seg a.on, .topo-ficha .seg a.on, .barra-agenda > .seg a.on { background: var(--heroi) !important; color: var(--heroi-texto) !important; font-weight: 600; } .seg .pilula { display: none; } .barra-agenda > .seg, .seg.alternar { padding: 3px !important; border: 1px solid var(--borda); border-radius: 8px !important; background: var(--cartao) !important; } .barra-agenda > .seg a { height: 28px; font-size: 11.5px; } .barra-agenda > .seg a.on { background: #EDF2F5 !important; color: var(--navy) !important; } :root[data-tema="escuro"] .barra-agenda > .seg a.on { background: var(--cartao-2) !important; color: var(--texto) !important; } /* --- tabelas e listas --- */ .tabela th { height: 40px; background: var(--cartao-2); color: #909BAA; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--borda); } .tabela td { border-bottom: 1px solid var(--linha); font-size: 12.5px; color: #5E6D80; padding-top: 12px; padding-bottom: 12px; } :root[data-tema="escuro"] .tabela td { color: var(--suave); } .tabela td a, .tabela td b { color: var(--texto); font-weight: 600; } .tabela tbody tr:hover td { background: #FAFBFC; } :root[data-tema="escuro"] .tabela tbody tr:hover td { background: var(--cartao-2); } .lista-acao li { padding: 12px 8px; margin: 0 -8px; border-bottom: 1px solid var(--linha); border-radius: 8px; } .lista-acao li:hover { background: var(--cartao-2); } .lista-acao .info b, .lista-acao .info a { font-size: 13px; font-weight: 600; color: var(--texto); } .lista-acao .info .mini { font-size: 11.5px; color: var(--fraco); } .selo { display: inline-flex; padding: 4px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; background: #EDF0F3; color: #788393; } .s-aprovado, .s-concluido, .s-confirmada, .s-atendida, .s-paga, .s-ativo { background: #E5F5EF; color: #23836D; } .s-apresentado, .s-agendada, .s-pendente, .s-aberta { background: #FBF0DE; color: #A47530; } .s-em_andamento, .s-parcial { background: #E9EFF8; color: #4F6E9B; } .s-recusado, .s-faltou, .s-atrasada, .s-expirado { background: #FAE9E7; color: #BC625D; } :root[data-tema="escuro"] .selo { background: var(--cartao-2); color: var(--suave); } :root[data-tema="escuro"] .s-aprovado, :root[data-tema="escuro"] .s-confirmada, :root[data-tema="escuro"] .s-atendida, :root[data-tema="escuro"] .s-paga { background: var(--folha); color: var(--folha-texto); } .alerta { border-radius: 10px; border: 1px solid transparent; font-size: 12.5px; } .vazio { color: var(--fraco); font-size: 12.5px; } .barra > span { background: var(--primaria); } /* --- próximo passo --- */ .proximo { background: var(--cartao); border: 1px solid var(--borda); border-left: 3px solid var(--primaria); border-radius: var(--raio); box-shadow: var(--sombra-cartao); } .proximo h2 { font-size: 15px; font-weight: 600; } .proximo p, .proximo .rotulo-etapa { color: var(--suave); } .proximo .botao, .proximo button { background: var(--cartao); border-color: var(--borda-forte); color: #526176; } .proximo .primario, .proximo .botao.primario, .proximo button.primario { background: var(--navy); border-color: var(--navy); color: #fff; } .etapas li { background: var(--cartao); border: 1px solid var(--borda); } .etapas li.feita { background: var(--heroi); color: var(--heroi-texto); border-color: transparent; } .etapas li.atual { background: var(--navy); color: #fff; border-color: var(--navy); } .linha-tempo li.atual .bol { background: var(--primaria); color: #fff; box-shadow: 0 0 0 4px var(--heroi); } .linha-tempo li.feita::before { background: var(--primaria); } /* --- ficha --- */ .heroi-paciente { background: var(--cartao); border: 1px solid var(--borda); } .heroi-paciente .foto { background: var(--heroi); color: var(--heroi-texto); } .dados-heroi .nome { font-size: 24px; font-weight: 600; letter-spacing: -.6px; } .dados-heroi .meta { color: var(--suave); } .tag { background: var(--heroi); color: var(--heroi-texto); border-radius: 12px; font-size: 11px; } .tag.clara { background: var(--cartao-2); color: var(--suave); border: 1px solid var(--borda); } .circ { background: var(--cartao); border: 1px solid var(--borda); color: var(--suave); width: 36px; height: 36px; } .circ:hover { background: var(--cartao-2); color: var(--texto); } .faixa-paciente { background: var(--cartao); border: 1px solid var(--borda); } .avatar-paciente { border-radius: 50%; background: var(--heroi); color: var(--heroi-texto); } .chips-info li { background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 12px; } .chips-info li.saude { border-color: transparent; } .arcada i.realizado { background: #E5F5EF; box-shadow: inset 0 0 0 1px #A9DCCB; } /* --- agenda: eventos coloridos com barra à esquerda (Figma) --- */ .barra-agenda { min-height: 62px; padding: 10px 16px; margin-bottom: 15px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); gap: 10px; } .barra-agenda input[type=date] { height: 34px; border-radius: 8px; border: 1px solid var(--borda); background: var(--cartao); } .nav-data .icone-bt { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--borda); background: var(--cartao); color: var(--suave); } .nav-data .icone-bt:hover { background: var(--cartao-2); } .nav-data .botao { height: 34px; } .chips-dentista a { height: 34px; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); } .chips-dentista a.on { background: var(--heroi); border-color: transparent; color: var(--heroi-texto); font-weight: 600; } .chips-dentista a i { background: var(--heroi); color: var(--heroi-texto); } .agenda-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 15px; } .painel-agenda { gap: 15px; top: 96px; } .agenda-dia th { background: var(--cartao-2); font-size: 12px; font-weight: 600; padding: 14px; } .agenda-dia td.hora { color: #8D98A7; font-weight: 500; } .agenda-dia tr.agora td { box-shadow: inset 0 2px 0 var(--primaria); } .agenda-dia tr.agora td.hora { color: var(--primaria-escura); } .agenda-dia tr.agora td.hora::after { background: var(--primaria); } .consulta { border-radius: 6px; padding: 8px 10px 8px 13px; background: #E7F5F3; color: #1F746E; } .consulta::before { top: 0; bottom: 0; width: 3px; border-radius: 6px 0 0 6px; } .consulta .c-hora { color: inherit; opacity: .75; } .consulta .c-txt b { color: inherit; } .consulta small { color: inherit; opacity: .75; } .consulta.st-agendada { background: #FAF1E3; color: #8E672D; } .consulta.st-agendada::before { background: #DDA148; } .consulta.st-confirmada { background: #E7F5F3; color: #1F746E; } .consulta.st-confirmada::before { background: #26A99F; } .consulta.st-atendida { background: #EAF1F7; color: #456D91; } .consulta.st-atendida::before { background: #6491B7; } .consulta.st-atendida .c-txt b { color: inherit; } .consulta.st-faltou { background: #F9EAEC; color: #94606A; } .consulta.st-faltou::before { background: #CF818C; } :root[data-tema="escuro"] .consulta { background: var(--cartao-2) !important; color: var(--texto) !important; } .cal-grade a.sel { background: var(--navy); color: #fff; } .cal-grade a.hoje { box-shadow: inset 0 0 0 1.5px var(--primaria); } .cal-grade a i { background: var(--primaria); } .resumo-dia dl div { background: var(--cartao-2); border: 1px solid var(--linha); border-radius: 10px; } .resumo-dia .ok { background: #E5F5EF; } .resumo-dia .at { background: #FBF0DE; } .resumo-dia .at dt { color: #A47530; } .semana .cartao.hoje { box-shadow: inset 0 0 0 1.5px var(--primaria); } .tira-semana a.hoje { background: var(--navy); } /* --- início (dashboard) --- */ .kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; } .kpis .ind { min-height: 132px; margin: 0; } .painel-inicio { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr); gap: 15px; align-items: start; } .painel-inicio > .cartao { margin: 0; min-width: 0; } .painel-inicio .financeiro-graf { grid-column: span 2; } .painel-inicio .agenda-hoje { grid-row: span 2; } .painel-inicio .resolver { grid-column: span 2; } .cab-cartao { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .cab-cartao h2 { margin: 0; } .cab-cartao p { margin: 5px 0 0; font-size: 11px; color: var(--fraco); } .cab-cartao .mais-link { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--primaria-escura); white-space: nowrap; } .cab-cartao .mais-link svg { width: 13px; height: 13px; } .resumo-graf { display: flex; align-items: flex-end; gap: 10px; margin: 18px 0 6px 44px; } .resumo-graf span { display: block; margin-bottom: 4px; font-size: 11px; color: var(--fraco); } .resumo-graf strong { font-size: 19px; font-weight: 600; letter-spacing: -.4px; } .pilula-var { display: inline-flex; align-items: center; gap: 3px; padding: 4px 7px; border-radius: 12px; background: #E9F6F1; color: #229473; font-size: 11px; font-weight: 600; } .pilula-var.desce { background: #FAE9E7; color: #D16C61; } .graf-linha { position: relative; margin: 6px 4px 0 44px; } .graf-linha svg { display: block; width: 100%; height: 190px; overflow: visible; } .graf-linha .eixo-y { position: absolute; right: calc(100% + 10px); top: -5px; height: 190px; display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: #A1AAB7; text-align: right; } .graf-linha .eixo-x { display: flex; justify-content: space-between; padding-top: 8px; font-size: 10px; color: #939EAC; } .graf-linha .linha-v { fill: none; stroke: var(--primaria); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .graf-linha .area { fill: url(#grad-area); } .graf-linha .grade { stroke: var(--linha); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; } .graf-linha .pontos { position: absolute; inset: 0 0 auto 0; height: 190px; pointer-events: none; } .graf-linha .pontos i { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--cartao); border: 2px solid var(--primaria); } @media (prefers-reduced-motion: no-preference) { .graf-linha .linha-v { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: desenha 1.2s ease-out .1s forwards; } .graf-linha .area, .graf-linha .pontos { opacity: 0; animation: aparece .6s ease-out .7s forwards; } .barras-dia .b { transform-origin: bottom; animation: cresce .6s cubic-bezier(.2,.8,.2,1) both; } .kpis .ind, .painel-inicio > .cartao { animation: chega .4s ease-out both; } .kpis .ind:nth-child(2) { animation-delay: .03s } .kpis .ind:nth-child(3) { animation-delay: .06s } .kpis .ind:nth-child(4) { animation-delay: .09s } .kpis .ind:nth-child(5) { animation-delay: .12s } .kpis .ind:nth-child(6) { animation-delay: .15s } @keyframes desenha { to { stroke-dashoffset: 0; } } @keyframes aparece { to { opacity: 1; } } @keyframes cresce { from { transform: scaleY(0); } } } .num-grande { display: flex; align-items: center; gap: 9px; margin: 18px 0 8px; } .num-grande strong { font-size: 22px; font-weight: 600; letter-spacing: -.5px; } .barras-dia { height: 140px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .barras-dia a { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; color: #939EAC; font-size: 10.5px; } .barras-dia a:hover { text-decoration: none; color: var(--texto); } .barras-dia .b { width: 62%; max-width: 22px; min-height: 3px; border-radius: 4px 4px 2px 2px; background: #C9EBE7; transition: background .15s; } .barras-dia a:hover .b { background: color-mix(in srgb, var(--primaria) 55%, #C9EBE7); } .barras-dia a.hoje .b { background: var(--primaria); } .barras-dia a.hoje { color: var(--texto); font-weight: 600; } .barras-dia .q { font-size: 10px; color: var(--suave); font-weight: 600; } .rosca-linha { display: flex; align-items: center; justify-content: space-around; gap: 18px; margin-top: 20px; } .rosca { width: 116px; height: 116px; flex: none; display: grid; place-items: center; border-radius: 50%; } .rosca::before { content: ""; grid-area: 1/1; width: 78px; height: 78px; border-radius: 50%; background: var(--cartao); } .rosca div { grid-area: 1/1; z-index: 1; text-align: center; } .rosca strong { display: block; font-size: 18px; font-weight: 600; } .rosca span { font-size: 10px; color: var(--fraco); } .legenda { min-width: 130px; flex: 1; max-width: 190px; } .legenda div { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; margin: 10px 0; font-size: 11.5px; color: #6E7B8E; } .legenda div b { color: var(--texto); font-weight: 600; } .legenda i { width: 7px; height: 7px; border-radius: 50%; } .linha-agenda { margin-top: 12px; } .linha-agenda > a, .linha-agenda > div { position: relative; min-height: 68px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--linha); color: var(--texto); } .linha-agenda > a:hover { text-decoration: none; background: linear-gradient(90deg, transparent, var(--cartao-2) 30%, var(--cartao-2) 80%, transparent); } .linha-agenda > :last-child { border-bottom: 0; } .linha-agenda .h { width: 44px; flex: none; text-align: right; } .linha-agenda .h strong { display: block; font-size: 12.5px; font-weight: 600; } .linha-agenda .h span { font-size: 10px; font-weight: 600; color: var(--primaria); } .linha-agenda .trilho { position: relative; align-self: stretch; width: 1px; margin: 0 6px; background: var(--borda); } .linha-agenda .trilho::after { content: ""; position: absolute; top: 50%; left: -4px; width: 9px; height: 9px; margin-top: -4.5px; box-sizing: border-box; border: 2px solid #CCD5DE; border-radius: 50%; background: var(--cartao); } .linha-agenda .agora .trilho::after { border-color: var(--primaria); background: var(--primaria); box-shadow: 0 0 0 3px var(--heroi); } .linha-agenda .feita { opacity: .6; } .linha-agenda .av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; } .linha-agenda .txt { flex: 1; min-width: 0; } .linha-agenda .txt b, .linha-agenda .txt span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .linha-agenda .txt b { font-size: 12.5px; font-weight: 600; } .linha-agenda .txt span { margin-top: 3px; font-size: 11px; color: var(--fraco); } .av-0 { background: #DFF3EF; color: #147D75; } .av-1 { background: #E3EDF8; color: #38689D; } .av-2 { background: #EDE9F8; color: #7163A4; } .av-3 { background: #F7EDDA; color: #A27129; } .av-4 { background: #F8E7E9; color: #AA626D; } .av-5 { background: #EDF0F3; color: #687588; } :root[data-tema="escuro"] [class*="av-"] { background: var(--heroi); color: var(--heroi-texto); } .item-alerta { min-height: 60px; display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--linha); } .item-alerta:last-child { border-bottom: 0; } .item-alerta .ic-a { width: 34px; height: 34px; flex: none; border-radius: 8px; display: grid; place-items: center; } .item-alerta .ic-a svg { width: 17px; height: 17px; } .ic-a.aviso { background: #FBF0DC; color: #A97731; } .ic-a.perigo { background: #FAE9E7; color: #BC625D; } .ic-a.info { background: #E8F0F7; color: #527AA0; } .ic-a.ok { background: #E5F5EF; color: #25846C; } .item-alerta .txt { flex: 1; min-width: 0; } .item-alerta .txt b, .item-alerta .txt a.nome { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item-alerta .txt span { display: block; margin-top: 3px; font-size: 11px; color: var(--fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item-alerta form { margin: 0; } .cont-alerta { min-width: 22px; padding: 3px 7px; border-radius: 10px; background: #F9EAE4; color: #C56D52; font-size: 11px; font-weight: 600; text-align: center; } .grupo-alerta { margin: 14px 0 2px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #909BAA; } /* --- telas médias e celular --- */ @media (max-width: 1360px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1200px) { .painel-inicio { grid-template-columns: 1fr 1fr; } .painel-inicio .financeiro-graf, .painel-inicio .resolver { grid-column: 1 / -1; } .painel-inicio .agenda-hoje { grid-row: auto; } .busca-topo { flex-basis: 220px; } } @media (max-width: 900px) { :root { --lateral: 0px; --alt: 42px; --alt-p: 36px; } .principal { margin-left: 0; padding-bottom: 76px; } .lateral { inset: auto 0 0 0; top: auto; width: 100%; height: auto; flex-direction: row; border-right: 0 !important; border-top: 1px solid var(--borda) !important; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(0,0,0,.06); } .lateral-topo, .lateral .eu, .lateral .menu a.secundario { display: none !important; } .lateral .menu { flex-direction: row; padding: 0; gap: 0; overflow: visible; } .lateral .menu a { flex: 1; height: 56px; flex-direction: column; justify-content: center; gap: 3px; padding: 0 2px; font-size: 10.5px; } .lateral .menu a.ativo::before { left: 50%; top: 0; width: 24px; height: 3px; margin-left: -12px; border-radius: 0 0 3px 3px; } .lateral .menu .qtd { position: absolute; top: 4px; right: calc(50% - 22px); margin: 0; min-width: 17px; height: 17px; padding: 0 4px; font-size: 9.5px; background: var(--primaria); color: #fff; } .topo-app { height: 60px; padding: 0 14px; } .topo-app .marca-m { display: flex; } .topo-app .marca-m .logo { width: 34px; height: 34px; border-radius: 10px; } .topo-titulo .trilha { display: none; } .busca-topo { display: none; } .acao-rapida summary span { display: none; } .acao-rapida summary.botao { width: 38px; padding: 0; } .conteudo { padding: 18px 14px 30px; } .kpis { grid-template-columns: 1fr 1fr; } .painel-inicio { grid-template-columns: 1fr; } .painel-inicio > .cartao { grid-column: auto !important; } .barra-agenda { padding: 10px; } .agenda-layout { grid-template-columns: 1fr; } .rosca-linha { justify-content: flex-start; } } @media print { .principal { margin: 0; } } .botao svg, button svg, summary.botao svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .mais-link svg, .ic-a svg, .ind .ic svg, .sino .pop a svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* 1.7 ajustes */ .lateral .menu a, .lateral .menu a.secundario { gap: 12px; padding: 0 11px; font-size: 13px; } .lateral .menu .rot { overflow: visible; } .ind > span:first-of-type:not(.ic) { white-space: normal; line-height: 1.35; } .ind.atencao .num, .ind.perigo .num { color: var(--texto); } .painel-inicio .resolver { grid-column: 1 / -1; } .legenda div { white-space: nowrap; } .rosca-linha { justify-content: center; gap: 28px; } /* lista de pacientes (Figma) */ .resumo-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 15px; } .resumo-lista .cartao { margin: 0; padding: 17px 18px; display: grid; gap: 0; color: var(--fraco); transition: border-color .18s, box-shadow .18s, transform .18s; } .resumo-lista .cartao:hover { text-decoration: none; border-color: var(--borda-forte) !important; box-shadow: 0 8px 22px rgba(24,42,58,.07); transform: translateY(-1px); } .resumo-lista span { font-size: 12px; } .resumo-lista strong { margin: 10px 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.5px; color: var(--texto); } .resumo-lista small { font-size: 11px; color: var(--fraco); } .sobe { color: #229473 !important; } .aviso-txt { color: #B77B31 !important; } .tabela-cartao { overflow: hidden; padding: 0 !important; } .barra-tabela { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 15px 17px; border-bottom: 1px solid var(--borda); margin: 0; } .busca-tabela { position: relative; display: flex; align-items: center; width: 280px; margin: 0; } .busca-tabela svg { position: absolute; left: 11px; width: 16px; height: 16px; fill: none; stroke: var(--fraco); stroke-width: 1.8; } .busca-tabela input { height: 38px; width: 100%; margin: 0; padding: 0 12px 0 34px; border-radius: 9px; background: var(--cartao-2); font-size: 12.5px; } .seg.filtros a em { font-size: 11px; } .rola-x { overflow-x: auto; } .tabela-cartao .tabela { margin: 0; } .tabela-cartao .tabela th:first-child, .tabela-cartao .tabela td:first-child { padding-left: 17px; } .celula-paciente { display: flex; align-items: center; gap: 11px; } .celula-paciente .av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; } .celula-paciente a { font-size: 13px; } .celula-paciente small { display: block; margin-top: 3px; font-size: 11px; color: #97A2AF; } .tabela .fraco { color: #A1AAB5; } .pe-tabela { min-height: 50px; padding: 0 17px; display: flex; align-items: center; border-top: 1px solid var(--borda); color: #8995A4; font-size: 12px; } @media (max-width: 900px) { .resumo-lista { grid-template-columns: 1fr 1fr; } .busca-tabela { width: 100%; } } .proximo-atend h2 { font-size: 12px; color: var(--suave); font-weight: 500; margin-bottom: 12px; } .proximo-atend .pessoa { display: flex; align-items: center; gap: 10px; } .proximo-atend .av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; } .proximo-atend b { display: block; font-size: 13px; } .proximo-atend small { display: block; margin-top: 3px; font-size: 11px; color: var(--fraco); } .botao.cheio { width: 100%; margin-top: 14px; } .resumo-dia h2 { font-size: 14px; font-weight: 500; } .busca-tabela { display: flex !important; flex-direction: row; } .busca-tabela svg { top: 50%; translate: 0 -50%; } .ind > span:nth-of-type(2) { padding-right: 44px; white-space: normal; line-height: 1.35; } .ind > span:first-child:not(.ic) { padding-right: 44px; } :root[data-tema="escuro"] button, :root[data-tema="escuro"] .botao { color: var(--texto); border-color: var(--borda-forte); } :root[data-tema="escuro"] .ic-a { background: var(--cartao-2) !important; color: var(--heroi-texto) !important; } :root[data-tema="escuro"] .barras-dia .b { background: color-mix(in srgb, var(--primaria) 30%, var(--cartao)); } :root[data-tema="escuro"] .barras-dia a.hoje .b { background: var(--primaria); } :root[data-tema="escuro"] .pilula-var { background: var(--folha); color: var(--folha-texto); } :root[data-tema="escuro"] .pilula-var.desce, :root[data-tema="escuro"] .cont-alerta { background: var(--perigo-fundo); color: var(--perigo); } :root[data-tema="escuro"] .tabela th { background: var(--cartao-2); } :root[data-tema="escuro"] .resumo-dia .ok, :root[data-tema="escuro"] .resumo-dia .at { background: var(--cartao-2); }