/* ============================================================ VISUAL NOVO v6 "ACABAMENTO PRO" (teste opcional) - Sistema PAB - 17/09/2026 ------------------------------------------------------------ Camada SEPARADA do tema da Pamella e dos remendos do bundle. So vale com (sistemapab.com/?visual=novo liga; ?visual=padrao desliga). Desligado, nao muda um pixel. Regra do Weverton: NADA muda de lugar, NENHUMA cor nova. Esta camada aplica so o checklist de acabamento da skill ui-ux-pro-max (pro-rules.md + quick-reference §1-§6), corrigindo o que a auditoria de 17/09 achou: - 40/70 clicaveis abaixo de 36px -> area de toque minima 36px (hit-area) - 51 elementos sem transicao -> transicoes 160-220ms em estados - 182 textos abaixo de 12px -> piso de 11.5px; etiquetas 11px legiveis - entrelinha "normal" em quase tudo -> 1.5 no texto corrido, 1.25 em titulos - 8 raios de canto diferentes -> escala unica: 6 / 10 / 14 / 999 - foco de teclado pouco visivel -> anel de foco 3px (cor do tema) - sombras aleatorias -> escala unica de elevacao Emojis usados como icone (55 na tela) nao dao para trocar por CSS: fica a recomendacao para o fonte (icones SVG de uma familia so). ============================================================ */ /* ---------- tipografia: entrelinha e piso de tamanho ---------- */ html[data-visual="novo"] body { line-height: 1.5; } html[data-visual="novo"] h1, html[data-visual="novo"] h2, html[data-visual="novo"] h3, html[data-visual="novo"] h4 { line-height: 1.25; } html[data-visual="novo"] p, html[data-visual="novo"] li, html[data-visual="novo"] td, html[data-visual="novo"] .muted, html[data-visual="novo"] .p-sub { line-height: 1.5; } /* etiquetas e metadados vinham em 10px: sobem para o piso legivel sem mudar de lugar */ html[data-visual="novo"] [style*="font-size: 10px"], html[data-visual="novo"] [style*="font-size:10px"], html[data-visual="novo"] [style*="font-size: 10.5px"], html[data-visual="novo"] [style*="font-size:10.5px"] { font-size: 11px !important; } html[data-visual="novo"] .nav-sep, html[data-visual="novo"] .selo .selo-cap { font-size: 11px; } html[data-visual="novo"] th { font-size: 12px; letter-spacing: .06em; } html[data-visual="novo"] .pill, html[data-visual="novo"] .badge { font-size: 12px; line-height: 1.3; } /* ---------- area de toque: minimo 36px sem mudar o desenho ---------- */ html[data-visual="novo"] .btn, html[data-visual="novo"] .btn-sm { min-height: 36px; } html[data-visual="novo"] .btn-sm { padding-top: 7px; padding-bottom: 7px; } html[data-visual="novo"] .sel-lux, html[data-visual="novo"] .ctrl-inp, html[data-visual="novo"] .field input, html[data-visual="novo"] .field select { min-height: 38px; } html[data-visual="novo"] .sidebar-toggle, html[data-visual="novo"] .su-out { min-width: 34px; min-height: 34px; } /* botoes-icone pequenos (renomear, excluir coluna, "x"): a area de toque cresce por fora, o icone fica igual */ html[data-visual="novo"] button[title="Renomear coluna"], html[data-visual="novo"] button[title="Excluir coluna"], html[data-visual="novo"] button[title="Renomear pipeline"], html[data-visual="novo"] button[title="Limpar"], html[data-visual="novo"] button[title="Emoji"], html[data-visual="novo"] button[title="Figurinhas"] { position: relative; min-width: 28px; min-height: 28px; display: inline-grid; place-items: center; } html[data-visual="novo"] button[title="Renomear coluna"]::after, html[data-visual="novo"] button[title="Excluir coluna"]::after, html[data-visual="novo"] button[title="Renomear pipeline"]::after, html[data-visual="novo"] button[title="Limpar"]::after { content: ""; position: absolute; inset: -6px; /* hit-area 40px, invisivel */ } html[data-visual="novo"] .nav-item { min-height: 40px; } html[data-visual="novo"] .c-dots button { min-width: 24px; min-height: 24px; } html[data-visual="novo"] button, html[data-visual="novo"] a[href], html[data-visual="novo"] [role="button"] { touch-action: manipulation; } /* ---------- estados: hover / pressed / foco ---------- */ html[data-visual="novo"] .btn, html[data-visual="novo"] .nav-item, html[data-visual="novo"] .mod-card, html[data-visual="novo"] .panel, html[data-visual="novo"] .sel-lux, html[data-visual="novo"] .ctrl-inp, html[data-visual="novo"] input, html[data-visual="novo"] select, html[data-visual="novo"] .pill, html[data-visual="novo"] .su-out, html[data-visual="novo"] .sidebar-toggle, html[data-visual="novo"] .ac-item, html[data-visual="novo"] [draggable="true"], html[data-visual="novo"] .pab-ap-btn, html[data-visual="novo"] .pab-tema-btn { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease, opacity .18s ease; } html[data-visual="novo"] .btn:active, html[data-visual="novo"] .nav-item:active, html[data-visual="novo"] .su-out:active, html[data-visual="novo"] .sidebar-toggle:active { transform: translateY(1px); } html[data-visual="novo"] .mod-card:active { transform: translateY(-1px); } html[data-visual="novo"] .btn:disabled, html[data-visual="novo"] button:disabled { opacity: .5; cursor: not-allowed; transform: none; } html[data-visual="novo"] [draggable="true"]:hover { box-shadow: var(--shadow-lg); } html[data-visual="novo"] tr:hover td { background: rgba(127, 127, 127, .06); } /* anel de foco unico, na cor de marcacao do tema */ html[data-visual="novo"] :focus-visible { outline: 3px solid var(--gold) !important; outline-offset: 2px !important; box-shadow: none !important; } html[data-visual="novo"] input:focus-visible, html[data-visual="novo"] textarea:focus-visible, html[data-visual="novo"] select:focus-visible, html[data-visual="novo"] .ctrl-inp:focus-visible { outline-offset: 0 !important; } /* ---------- escala unica de raios: 6 / 10 / 14 / 999 ---------- */ html[data-visual="novo"] .btn, html[data-visual="novo"] .btn-sm, html[data-visual="novo"] .sel-lux, html[data-visual="novo"] .ctrl-inp, html[data-visual="novo"] .field input, html[data-visual="novo"] .field select, html[data-visual="novo"] .field textarea, html[data-visual="novo"] .nav-item, html[data-visual="novo"] .su-out, html[data-visual="novo"] .sidebar-toggle, html[data-visual="novo"] .alert, html[data-visual="novo"] .ac-list { border-radius: 10px !important; } html[data-visual="novo"] .panel, html[data-visual="novo"] .card, html[data-visual="novo"] .mod-card, html[data-visual="novo"] div[style*="flex: 0 0 250px"] { border-radius: 14px !important; } html[data-visual="novo"] [draggable="true"] { border-radius: 10px !important; } html[data-visual="novo"] .pill, html[data-visual="novo"] .badge, html[data-visual="novo"] .c-badge, html[data-visual="novo"] [draggable="true"] span[style*="border-radius: 6px"], html[data-visual="novo"] [draggable="true"] span[style*="border-radius: 7px"] { border-radius: 999px !important; } html[data-visual="novo"] .mod-card .m-ico, html[data-visual="novo"] .side-user .su-av { border-radius: 10px !important; } /* ---------- escala unica de elevacao ---------- */ html[data-visual="novo"] .panel, html[data-visual="novo"] .mod-card, html[data-visual="novo"] [draggable="true"] { box-shadow: var(--shadow); } html[data-visual="novo"] .mod-card:hover { box-shadow: var(--shadow-lg); } html[data-visual="novo"] .ac-list { box-shadow: var(--shadow-lg); } /* ---------- ritmo de 8px onde da para ajustar sem mover blocos ---------- */ html[data-visual="novo"] .mod-card { gap: 8px; } html[data-visual="novo"] .grid { gap: 16px; } html[data-visual="novo"] .panel .p-sub { margin-bottom: 16px; } html[data-visual="novo"] .field { margin-bottom: 16px; } html[data-visual="novo"] .field label { margin-bottom: 6px; font-weight: 500; font-size: 12px; } /* ---------- selo do teste (herda as cores do tema) ---------- */ html[data-visual="novo"] #pab-visual-novo-selo { position: fixed; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 9998; font: 700 11px/1 inherit; letter-spacing: .04em; padding: 8px 12px; border-radius: 999px; background: var(--surface-solid); color: var(--gold-2); border: 1px solid var(--border); box-shadow: var(--shadow-lg); cursor: pointer; opacity: .9; } html[data-visual="novo"] #pab-visual-novo-selo:hover { opacity: 1; } html:not([data-visual="novo"]) #pab-visual-novo-selo { display: none !important; } @media (prefers-reduced-motion: reduce) { html[data-visual="novo"] * { transition: none !important; } html[data-visual="novo"] .btn:active, html[data-visual="novo"] .mod-card:active, html[data-visual="novo"] .nav-item:active { transform: none; } }