body { background: #f4f6f9; } .tips { padding-left: 1.2rem; color: #444; } .tips li + li { margin-top: .35rem; } .editor-wrap { background: #111; border-radius: .5rem; overflow: hidden; } #editor { display: block; width: 100%; touch-action: none; outline: none; } .tag-box { color: #0891b2; font-weight: 600; } .tag-pupil { color: #db2777; font-weight: 600; } .results-table th, .results-table td { text-align: center; } .results-table tbody th { text-align: left; font-weight: 500; } .results-table td { font-size: 1.15rem; font-weight: 600; } .results-table .small td { font-size: .8rem; font-weight: 400; } details > summary { cursor: pointer; } .report { position: fixed; inset: 0; z-index: 1050; background: #111; color: #fff; display: flex; flex-direction: column; } .report.d-none { display: none !important; } .report-bar, .report-actions { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; } .report-bar { justify-content: space-between; } .report-body { flex: 1; overflow: auto; padding: 0 1rem; } .report-body img { display: block; max-width: 100%; margin: 0 auto; border-radius: .25rem; } /* no iPhone, tocar e segurar durante a marcação selecionava texto e abria o menu de cópia. Desligado no site todo; os campos continuam editáveis e a imagem do resultado continua com o "tocar e segurar" pra salvar. */ body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } input, textarea { -webkit-user-select: text; user-select: text; } .report-body img { -webkit-touch-callout: default; } /* modos: o é definido em app.js */ body[data-mode="optica"] .only-selfie, body[data-mode="selfie"] .only-optica { display: none !important; } .tag-card { color: #ea580c; font-weight: 600; } .illus { display: block; width: 100%; max-width: 240px; margin: 0 auto; } /* câmera dentro da página (modo Selfie) */ .cam { position: fixed; inset: 0; z-index: 1060; background: #000; } .cam.d-none { display: none !important; } .cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); /* prévia espelhada, como um espelho; a foto salva não é espelhada */ } .cam-guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .cam-tip { position: absolute; top: calc(env(safe-area-inset-top) + 12px); left: 0; right: 0; padding: 0 16px; text-align: center; color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); } .cam-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30vw; font-weight: 700; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); pointer-events: none; } .cam-count.d-none { display: none !important; } .cam-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 24px 16px calc(env(safe-area-inset-bottom) + 20px); background: linear-gradient(transparent, rgba(0, 0, 0, .6)); } .cam-bar .btn { min-width: 110px; } .cam-shutter { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: rgba(255, 255, 255, .3); } .cam-shutter:active { background: #fff; }