/* =========================================================================== * AUTOCOMPLETE (app.ac) — visual das sugestoes * --------------------------------------------------------------------------- * Herda o vidro da consulta SIGTAP (css/aurora-p-sigtap.css), mas sem prefixo * de view: o painel e filho do , entao serve qualquer tela. * Todo valor sai de token com fallback — telas antigas nao carregam a mesma * folha de tokens, e sem fallback o painel apareceria transparente nelas. * =========================================================================== */ .ac-pop { position: fixed; z-index: 9999; /* acima de modal (o painel e irmao do modal) */ overflow-y: auto; scrollbar-width: thin; background: var(--glass, rgba(255, 255, 255, .94)); border: 1px solid var(--glass-brd, var(--border, #d6dacf)); border-radius: 14px; box-shadow: var(--shadow, 0 22px 55px -20px rgba(0, 0, 0, .45)); padding: 6px; display: flex; flex-direction: column; gap: 2px; animation: ac-entra .13s ease-out; } .ac-pop.hidden { display: none } @keyframes ac-entra { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } } @media (prefers-reduced-motion: reduce) { .ac-pop { animation: none } } /* ── item ──────────────────────────────────────────────────────────────── */ .ac-pop .ac-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font-family: inherit; font-size: 13px; line-height: 1.35; color: var(--ink, #1d2215); background: transparent; border: none; border-radius: 10px; padding: 9px 11px; cursor: pointer; transition: background .14s; /* 44px de alvo no toque: campo de recepcao e usado em tablet */ min-height: var(--tap-sm, 40px); } .ac-pop .ac-item:hover, .ac-pop .ac-item.is-on { background: var(--sg-tint, rgba(57, 72, 32, .09)); } .ac-pop .ac-item:focus-visible { outline: 2px solid var(--brand2, var(--brand, #394820)); outline-offset: -2px; } /* pilula do codigo — tabular para os digitos nao dancarem entre linhas */ .ac-pop .ac-cod { flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; font-variant-numeric: tabular-nums; color: var(--brand, #394820); background: var(--sg-tint-2, rgba(57, 72, 32, .10)); border: 1px solid var(--sg-tint-brd, rgba(57, 72, 32, .18)); border-radius: 7px; padding: 3px 7px; white-space: nowrap; } .ac-pop .ac-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ac-pop .ac-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-pop .ac-extra { font-size: 11px; opacity: .68; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* trecho digitado — peso, nao cor de fundo forte: a lista fica poluida */ .ac-pop .ac-hit { background: transparent; color: var(--brand, #394820); font-weight: 700; } /* ── avisos (carregando / vazio / erro) ────────────────────────────────── */ .ac-pop .ac-aviso { display: flex; align-items: center; gap: 8px; padding: 11px 12px; font-size: 12.5px; color: var(--ink, #1d2215); opacity: .8; } .ac-pop .ac-erro { color: var(--danger, #c0392b); opacity: 1 } .ac-pop .ac-spin { width: 13px; height: 13px; flex: none; border: 2px solid var(--brand, #394820); border-right-color: transparent; border-radius: 50%; animation: ac-gira .6s linear infinite; } @keyframes ac-gira { to { transform: rotate(360deg) } } @media (prefers-reduced-motion: reduce) { .ac-pop .ac-spin { animation-duration: 2s } } .ac-pop .ac-rodape { padding: 7px 11px 4px; font-size: 11px; opacity: .6; border-top: 1px solid var(--glass-brd, var(--border, #d6dacf)); margin-top: 2px; } /* ── tema escuro ───────────────────────────────────────────────────────── */ body.theme-dark .ac-pop { background: var(--glass, rgba(30, 34, 26, .95)); border-color: var(--glass-brd, #2d2d2d); } body.theme-dark .ac-pop .ac-item { color: var(--ink, var(--ink)) } body.theme-dark .ac-pop .ac-cod, body.theme-dark .ac-pop .ac-hit { color: var(--olive-light, var(--brand, var(--brand))) } /* ── alto contraste: vidro vira solido, senao o texto some ─────────────── */ body.theme-contrast .ac-pop, body.hc .ac-pop { background: var(--bg-panel, #000); border-width: 2px; } /* ── telas estreitas: o painel encosta nas bordas ──────────────────────── */ @media (max-width: 480px) { .ac-pop { border-radius: 12px } .ac-pop .ac-item { font-size: 14px; min-height: 44px } }