nas telas; mesmo sem o wrapper, a tabela continua legível. */ .tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabela-rolavel table { min-width: 520px; } } /* ---- Celular (até 480px) ---- */ @media (max-width: 480px) { .pagina { padding: 12px; } /* a barra do topo encolhe o nome do usuário para caber */ .topo { min-height: 54px; padding: 8px 12px; } .topo .usuario .nome-usuario { display: none; } /* esconde o nome; mantém o botão sair */ /* linhas lado-a-lado passam a empilhar no celular */ .linha { flex-direction: column; align-items: stretch; gap: 8px; } .linha.entre { align-items: stretch; } /* exceção: linhas marcadas como .linha-fixa continuam horizontais (ex.: ícone + texto curto que não deve quebrar) */ .linha.linha-fixa { flex-direction: row; align-items: center; } /* área de toque maior em botões e campos (conforto no dedo) */ .btn { padding: 11px 16px; font-size: 15px; } input, select, textarea { padding: 12px; font-size: 16px; } /* 16px evita zoom automático no iOS */ /* botões em sequência ocupam a largura toda e ficam fáceis de tocar */ .acoes-linha .btn { flex: 1; min-width: 0; } /* células de tabela mais compactas */ th, td { padding: 9px 8px; font-size: 13px; } /* cartões coladinhos nas bordas aproveitam melhor a tela estreita */ .cartao { border-radius: 8px; } } /* ---- modais (telas: documentos, estoque, gestão, crm, orçamentos, agenda pública) ---- as telas mostram o modal trocando o display inline para flex; aqui vem o posicionamento centralizado e o visual do cartão (tema claro/escuro). */ .modal-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(20, 30, 30, .45); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 24px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 14px 48px rgba(0, 0, 0, .28); } .modal h3 { margin: 0 0 16px; font-size: 18px; } .modal .campo { margin-bottom: 12px; } @media (max-width: 480px) { .modal-fundo { padding: 10px; align-items: flex-start; } .modal { padding: 18px; border-radius: 12px; } } /* =================================================================== Odontograma (componente js/odontograma.js) — usado no prontuário e na ficha do paciente. Tokens de cor por estado (par claro/escuro) + layout. Antes ficava inline em cada tela; centralizado aqui. =================================================================== */ :root { --odo-tratado:#a7dcc8; --odo-extraido:#d6d3d6; --odo-extraido-traco:#707070; --odo-extraido-texto:#5f5e5a; --odo-extraido-suave:#f0eef0; --odo-protese:#cdc8f5; --odo-protese-traco:#534ab7; --odo-protese-texto:#3c3489; --odo-protese-suave:#eeedfe; } [data-tema="escuro"] { --odo-tratado:#1f4a3c; --odo-extraido:#39403f; --odo-extraido-traco:#828c8a; --odo-extraido-texto:#b2bcba; --odo-extraido-suave:#272d2c; --odo-protese:#332f55; --odo-protese-traco:#8f86e0; --odo-protese-texto:#bcb4f0; --odo-protese-suave:#2a2745; } .odo-topo { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:10px; } .odo-toggle { display:inline-flex; background:var(--fundo); border:1px solid var(--borda); border-radius:999px; padding:4px; gap:2px; } .odo-toggle button { border:0; background:transparent; padding:7px 16px; border-radius:999px; font-size:13px; font-weight:600; color:var(--texto-suave); cursor:pointer; transition:.25s; } .odo-toggle button.on { background:var(--acento); color:#fff; } .odo-arcada { display:flex; flex-direction:column; gap:4px; margin:6px 0; overflow-x:auto; } .odo-fileira { display:flex; justify-content:center; gap:3px; align-items:flex-end; } .odo-meia { display:flex; gap:3px; } .odo-divisor { width:1px; background:var(--borda); margin:0 9px; align-self:stretch; } .odo-rotulos { display:flex; justify-content:center; gap:3px; } .odo-numdiv { width:1px; margin:0 9px; } .odo-numcel { width:34px; text-align:center; font-size:10.5px; color:var(--texto-suave); font-variant-numeric:tabular-nums; font-weight:600; transition:.2s; } .odo-numcel.odo-numsel { color:#fff; background:var(--acento); border-radius:5px; } .odo-dente { position:relative; width:34px; cursor:pointer; animation:odoSurge .4s backwards; } .odo-svgwrap { transition:transform .2s; } .odo-dente:hover .odo-svgwrap { transform:translateY(-3px) scale(1.05); } .odo-dente.odo-sel .odo-svgwrap { transform:translateY(-3px) scale(1.08); } .odo-dente.odo-sel .odo-corpo { stroke:var(--acento) !important; stroke-width:2 !important; } .odo-dente svg { display:block; } .odo-corpo { transition:fill .35s, stroke .35s; } .odo-x { font-size:18px; font-weight:700; fill:var(--texto-suave); opacity:0; transition:opacity .3s; } .odo-dente.odo-extracao .odo-x { opacity:1; } .odo-dente.odo-extracao .odo-svgwrap { opacity:.5; } /* dente orçado (negrito): aro dourado + número em negrito forte */ .odo-dente.odo-orcado .odo-corpo { stroke:var(--dourado,#C8A560) !important; stroke-width:2.4 !important; } .odo-numcel.odo-numorc { font-weight:800; color:var(--dourado-texto,#8a6d2f); } .odo-leg-orc { display:inline-block; width:11px; height:11px; border-radius:3px; border:2.4px solid var(--dourado,#C8A560); background:#fff; vertical-align:-1px; } @keyframes odoSurge { from { opacity:0; transform:translateY(8px); } to { opacity:1; } } .odo-legenda { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:12px 0 4px; font-size:11px; color:var(--texto-suave); } .odo-legenda i { display:inline-block; width:11px; height:11px; border-radius:3px; border:1.5px solid; vertical-align:-1px; } /* =================================================================== Menu lateral (sidebar) — Fase 1 do novo layout. Renderizado pelo js/nav.js no placeholder #appTopo; o recebe .com-sidebar (empurra o conteúdo). Telas sem nav.js (login, ajuda, agendar) não têm .com-sidebar e seguem com layout próprio. =================================================================== */ body.com-sidebar { padding-left: var(--sbw); /* fundo de consultório desfocado (v2 ~9px), só o desfoque. Fixo = não rola com o conteúdo. A transparência vem dos cards translúcidos (.cartao / .pac-card via --vidro). */ background: var(--fundo) url("../img/fundo-consultorio-v2-9.jpg") center / cover no-repeat fixed; } .com-sidebar .pagina { max-width: none; } /* tela cheia */ /* cards translúcidos (efeito vidro) sobre o fundo de consultório — só nas telas internas */ .com-sidebar .cartao, .com-sidebar .dados-card, .com-sidebar .kpi-chip, .com-sidebar .cfg-card, .com-sidebar .cartao-num, .com-sidebar .bloco-rel, .com-sidebar .chip-resumo { background: var(--vidro); /* fallback: desfoque normal (navegadores sem filtro SVG no backdrop) */ -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); /* liquid glass: distorção via filtro SVG (#liquidGlass, injetado pelo nav.js) onde suportado */ -webkit-backdrop-filter: url(#liquidGlass) saturate(1.7); backdrop-filter: url(#liquidGlass) saturate(1.7); border: 1px solid var(--vidro-borda); box-shadow: 0 8px 30px rgba(8,22,34,.12), inset 0 1px 0 rgba(255,255,255,.35); } .sidebar { position: fixed; top:0; left:0; bottom:0; width: var(--sbw); background: var(--sidebar); display:flex; flex-direction:column; gap:2px; padding:16px 12px; overflow-y:auto; z-index:30; } .sidebar .sb-marca { display:flex; align-items:center; gap:10px; padding:4px 8px 14px; color:#fff; font-family:var(--fonte-titulo); font-size:20px; font-weight:600; letter-spacing:-.01em; } .sidebar .sb-marca img { width:30px; height:30px; } .sidebar .sb-marca span { color: var(--acento); font-weight:700; } .sidebar .sb-nav { display:flex; flex-direction:column; gap:2px; } .sidebar .sb-grupo { font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--sidebar-titulo); font-weight:700; margin:14px 10px 4px; } .sidebar .sb-link { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:8px; color:var(--sidebar-texto); text-decoration:none; font-size:14.5px; font-weight:500; transition: background .15s, color .15s; cursor:pointer; } .sidebar .sb-ic { width:18px; text-align:center; font-size:15px; opacity:.9; flex-shrink:0; } .sidebar .sb-link:hover { background:var(--sidebar-suave); color:#fff; } .sidebar .sb-link.ativo { background:var(--acento); color:#fff; } .sidebar .sb-rodape { margin-top:auto; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:2px; } .sidebar .sb-quem { color:#fff; font-size:13px; padding:8px 12px 2px; opacity:.85; } .sidebar .sb-quem:empty { display:none; } .sidebar .sb-sair { display:flex; align-items:center; gap:11px; padding:9px 12px; border:0; background:transparent; color:var(--sidebar-texto); font:inherit; font-size:14.5px; font-weight:500; border-radius:8px; cursor:pointer; text-align:left; width:100%; } .sidebar .sb-sair:hover { background:var(--sidebar-suave); color:#fff; } .sb-toggle { display:none; } .sb-backdrop { display:none; } @media (max-width: 768px) { body.com-sidebar { padding-left: 0; } .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.4); } .sidebar.aberta { transform: translateX(0); } .sb-toggle { display:flex; align-items:center; justify-content:center; position:fixed; top:10px; left:10px; z-index:40; width:42px; height:42px; border-radius:10px; border:1px solid var(--borda); background:var(--superficie); color:var(--texto); font-size:20px; line-height:1; cursor:pointer; box-shadow:var(--sombra); } .sb-backdrop.on { display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:25; } .com-sidebar .pagina { padding-top: 62px; } /* espaço pro ☰ */ }