/* ===================================================================================================================== Contrô — camada visual v1.4 («Botões e efeitos») — PRÉVIA, 24/10/2026, base 1.5.170, sobre a v1.3. Pedido do Alan: sem mexer na logo (CONTRÔ branco e azul); SEM opções de paleta; faixa lateral fixa; o usuário muda SÓ cores dos botões, estilo do botão (vidrificado, sólido, contorno, chapado, transparente), transparência, ícones; mais sombreamento e efeitos. Tudo por variáveis/atributos que o visual-v14.js põe em : --v14-cor, --v14-cor-2, --v14-fg, --v14-op, --v14-raio data-v14-estilo (solido|degrade|vidro|transparente|contorno|chapado) · data-v14-efeito (nenhum|suave|elevado|brilho) data-v14-traco (fino|normal|grosso) · data-v14-tam (p|m|g) · data-v14-icone (simples|chip|circulo) · data-v14-iconecor (texto|destaque|botao) Desktop E celular (25/10/2026: «a versão mobile não segue o mesmo modelo do desktop»): o bloco principal vale em qualquer largura; as exceções do celular ficam no FIM do arquivo (@media (max-width: 760px)). Nada de display:none / visibility / pointer-events (travado por verificar_camada_so_visual_v14.py). ===================================================================================================================== */ @media (min-width: 0px) { :root { --v14-cor: #245AC7; --v14-cor-2: #4A86F0; --v14-fg: #FFFFFF; --v14-op: 1; --v14-raio: 9px; --v14-cor-texto: color-mix(in srgb, var(--v14-cor) 62%, #000); } :root[data-tema="escuro"], :root[data-tema="noturno"] { --v14-cor-texto: color-mix(in srgb, var(--v14-cor) 50%, #fff); } /* ------------------------------------------------------------------ 1. Sombreamento e profundidade (valem para todos, sem opção) */ :root { --v14-sombra-card: 0 1px 1px color-mix(in srgb, var(--text) 5%, transparent), 0 3px 8px color-mix(in srgb, var(--text) 7%, transparent), 0 14px 28px -10px color-mix(in srgb, var(--text) 14%, transparent); --v14-sombra-card-hover: 0 2px 2px color-mix(in srgb, var(--text) 6%, transparent), 0 8px 18px color-mix(in srgb, var(--text) 10%, transparent), 0 22px 40px -12px color-mix(in srgb, var(--text) 20%, transparent); --v14-brilho-topo: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent); } :root[data-tema="escuro"], :root[data-tema="noturno"] { --v14-brilho-topo: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent); } .main { background: radial-gradient(900px 520px at 88% -12%, color-mix(in srgb, var(--marca-eletrico) 13%, transparent), transparent 70%), radial-gradient(760px 460px at -8% 112%, color-mix(in srgb, var(--marca-acao) 9%, transparent), transparent 70%), var(--bg); } body:not(.recepcao) .card, .card, .cfg-atalho, .cfg-categorias { box-shadow: var(--v14-sombra-card), var(--v14-brilho-topo); } .card, .cfg-atalho { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .card:hover { box-shadow: var(--v14-sombra-card-hover), var(--v14-brilho-topo); } .cfg-atalho:hover, .cfg-atalho:focus-visible { box-shadow: var(--v14-sombra-card-hover), var(--v14-brilho-topo); transform: translateY(-2px); border-color: color-mix(in srgb, var(--marca-eletrico) 45%, var(--border)); } .topbar-status, #auth-usuario-logado { box-shadow: var(--v14-sombra-card), var(--v14-brilho-topo); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cropper-box, .fase1c-real-caixa, .cfg-gaveta-painel, .rc-gaveta-painel { box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 18px 40px rgba(0,0,0,.22), 0 40px 90px -20px rgba(0,0,0,.35), var(--v14-brilho-topo); } .sym-box.cam, .videos-cartao, .video-card { box-shadow: var(--v14-sombra-card); } input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea { box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent); } .cfg-categoria.ativa { box-shadow: 0 4px 12px color-mix(in srgb, var(--text) 22%, transparent), inset 0 -2px 0 var(--marca-eletrico); } /* ------------------------------------------------------------------ 2. Botões — escopo: ação principal + ações do topo (o menu lateral NÃO é afetado) */ html[data-v14-estilo][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa) { border-radius: var(--v14-raio); border: 1px solid transparent; transition: background .14s ease, box-shadow .14s ease, transform .08s ease, border-color .14s ease, color .14s ease; } /* sólido */ html[data-v14-estilo="solido"][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa) { background: color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 100%), transparent); color: var(--v14-fg); border-color: color-mix(in srgb, var(--v14-cor) 70%, #000); } html[data-v14-estilo="solido"][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa):hover { background: color-mix(in srgb, var(--v14-cor) 86%, #000); } /* degradê */ html[data-v14-estilo="degrade"][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa) { background: linear-gradient(180deg, color-mix(in srgb, var(--v14-cor-2) calc(var(--v14-op) * 100%), transparent), color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 100%), transparent)); color: var(--v14-fg); border-color: color-mix(in srgb, var(--v14-cor) 65%, #000); } html[data-v14-estilo="degrade"][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa):hover { filter: brightness(1.08) saturate(1.05); } /* vidrificado: vidro fosco com borda de luz — fica melhor sobre o fundo com brilho */ html[data-v14-estilo="vidro"][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa) { background: linear-gradient(135deg, color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 58%), transparent), color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 30%), transparent)); backdrop-filter: blur(12px) saturate(1.6); -webkit-backdrop-filter: blur(12px) saturate(1.6); color: var(--v14-cor-texto); border-color: color-mix(in srgb, var(--v14-cor) 55%, #fff); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--v14-cor) 25%, transparent); } html[data-v14-estilo="vidro"][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa):hover { background: linear-gradient(135deg, color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 72%), transparent), color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 42%), transparent)); } /* transparente: sem fundo, só texto e ícone na cor */ html[data-v14-estilo="transparente"][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa) { background: transparent; color: color-mix(in srgb, var(--v14-cor-texto) calc(var(--v14-op) * 100%), transparent); box-shadow: none; } html[data-v14-estilo="transparente"][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa):hover { background: color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 14%), transparent); } /* contorno */ html[data-v14-estilo="contorno"][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa) { background: transparent; color: color-mix(in srgb, var(--v14-cor-texto) calc(var(--v14-op) * 100%), transparent); border: 1.5px solid color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 100%), transparent); box-shadow: none; } html[data-v14-estilo="contorno"][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa):hover { background: color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 12%), transparent); } /* chapado: bloco de cor suave, sem borda e sem sombra */ html[data-v14-estilo="chapado"][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa) { background: color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 32%), transparent); color: var(--v14-cor-texto); border-color: transparent; box-shadow: none; } html[data-v14-estilo="chapado"][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa):hover { background: color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 46%), transparent); } /* nos estilos cheios (sólido/degradê) só a ação principal e «Ativos» ficam cheios; Avisos, Aparência e Liberar viram «chapado», para o topo não virar uma fila de blocos de cor */ html[data-v14-estilo="solido"][data-v14-estilo] body :is(.btn-avisos-topo, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa):not(#v14), html[data-v14-estilo="degrade"][data-v14-estilo] body :is(.btn-avisos-topo, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa):not(#v14) { background: color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 16%), var(--card-bg)); color: var(--v14-cor-texto); border-color: color-mix(in srgb, var(--v14-cor) 28%, transparent); } /* efeito (sombra / brilho) — vale para os estilos que têm corpo; contorno/transparente/chapado só ganham no modo «brilho» */ html[data-v14-efeito="suave"][data-v14-estilo][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa) { box-shadow: 0 1px 2px color-mix(in srgb, var(--v14-cor) 40%, transparent), 0 3px 8px color-mix(in srgb, var(--v14-cor) 22%, transparent); } html[data-v14-efeito="elevado"][data-v14-estilo][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa) { box-shadow: 0 2px 3px color-mix(in srgb, var(--v14-cor) 35%, transparent), 0 10px 22px -4px color-mix(in srgb, var(--v14-cor) 48%, transparent), 0 20px 36px -12px color-mix(in srgb, var(--v14-cor) 32%, transparent); } html[data-v14-efeito="elevado"][data-v14-estilo][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa):hover { transform: translateY(-2px); } html[data-v14-efeito="brilho"][data-v14-estilo][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--v14-cor) 55%, transparent), 0 0 14px color-mix(in srgb, var(--v14-cor) 60%, transparent), 0 0 34px color-mix(in srgb, var(--v14-cor) 34%, transparent); } html[data-v14-estilo][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa):active { transform: translateY(1px); } html[data-v14-estilo][data-v14-estilo] body :is(button.primary, .btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual, .cfg-categoria.ativa):focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--v14-cor) 38%, transparent); } .aparencia-rapida-gatilho .paleta-ponto { background: var(--v14-cor); box-shadow: 0 0 8px color-mix(in srgb, var(--v14-cor) 80%, transparent); } /* ------------------------------------------------------------------ 3. Ícones (menu lateral, botões, atalhos de Configurações) */ html[data-v14-traco="fino"] :is(.nav-icon, button, .cfg-atalho-icone, .config-painel-icone, .cfg-categoria) svg { stroke-width: 1.35; } html[data-v14-traco="normal"] :is(.nav-icon, button, .cfg-atalho-icone, .config-painel-icone, .cfg-categoria) svg { stroke-width: 1.9; } html[data-v14-traco="grosso"] :is(.nav-icon, button, .cfg-atalho-icone, .config-painel-icone, .cfg-categoria) svg { stroke-width: 2.6; } html[data-v14-tam="p"] .sidebar .nav-icon svg { width: 16px; height: 16px; } html[data-v14-tam="m"] .sidebar .nav-icon svg { width: 19px; height: 19px; } html[data-v14-tam="g"] .sidebar .nav-icon svg { width: 23px; height: 23px; } html[data-v14-tam="p"] body :is(button, .cfg-categoria) svg { width: 13px; height: 13px; } html[data-v14-tam="g"] body :is(button, .cfg-categoria) svg { width: 18px; height: 18px; } html[data-v14-tam="p"] .cfg-atalho-icone svg { width: 15px; height: 15px; } html[data-v14-tam="g"] .cfg-atalho-icone svg { width: 24px; height: 24px; } /* (24/10) Com o padrao «Grande» os botoes da barra de topo ficariam com icone de 18 px, a barra quebrava em 2 linhas (50 -> 100 px) e a camera da Recepcao caia de 303 para 253 px a 1280x720. O topo mantem o icone em 15 px. */ @media (min-width: 761px) { html[data-v14-tam="g"] .topbar button svg { width: 15px; height: 15px; } } /* forma do ícone: simples (sem fundo) · chip (quadrado arredondado) · círculo */ html[data-v14-icone="simples"] .sidebar .nav-icon { background: transparent; box-shadow: none; } html[data-v14-icone="chip"] .sidebar .nav-icon, html[data-v14-icone="circulo"] .sidebar .nav-icon { padding: 5px; background: color-mix(in srgb, #fff 9%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); } html[data-v14-icone="chip"] .sidebar .nav-icon { border-radius: 8px; } html[data-v14-icone="circulo"] .sidebar .nav-icon { border-radius: 50%; } html[data-v14-icone="simples"] .cfg-atalho-icone { background: transparent; box-shadow: none; border-color: transparent; } html[data-v14-icone="chip"] .cfg-atalho-icone { border-radius: 10px; } html[data-v14-icone="circulo"] .cfg-atalho-icone { border-radius: 50%; } /* cor do ícone */ html[data-v14-iconecor="destaque"] :is(.sidebar .nav-icon, .cfg-atalho-icone, .config-painel-icone, .cfg-categoria) svg { color: var(--marca-eletrico); } html[data-v14-iconecor="botao"] :is(.sidebar .nav-icon, .cfg-atalho-icone, .config-painel-icone, .cfg-categoria) svg { color: var(--v14-cor); } html[data-v14-iconecor="botao"] .sidebar .nav-item:not(.active) .nav-icon svg { color: color-mix(in srgb, var(--v14-cor) 55%, #fff); } /* ------------------------------------------------------------------ 4. Painel «Aparência» (substitui as paletas) */ .aparencia-rapida-painel.v14 { width: min(380px, 92vw); max-height: min(78vh, 720px); overflow-y: auto; padding: 16px 16px 14px; border-radius: 16px; } .v14-sec { margin: 14px 0 0; } .v14-sec:first-of-type { margin-top: 10px; } .v14-rot { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 7px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .v14-rot small { font-size: 11.5px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--text-3); } .v14-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; border-radius: 11px; background: var(--surface-2); } .v14-seg.v14-seg-2l { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; } .v14-seg button { min-height: 32px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 12.5px; font-weight: 600; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .v14-seg button[aria-pressed="true"] { background: var(--card-bg); color: var(--text); box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--v14-cor) 55%, transparent); } .v14-cores { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; } .v14-cor { aspect-ratio: 1; min-height: 0; width: 100%; padding: 0; border-radius: 50%; border: 2px solid var(--card-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent), 0 2px 5px color-mix(in srgb, var(--text) 20%, transparent); cursor: pointer; } .v14-cor[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text), 0 3px 8px color-mix(in srgb, var(--text) 30%, transparent); transform: scale(1.1); } .v14-cor-livre { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 12.5px; color: var(--text-muted); } .v14-cor-livre input[type=color] { width: 44px; height: 30px; min-height: 30px; padding: 2px; border-radius: 8px; cursor: pointer; } .v14-cor-livre code { font-size: 12px; color: var(--text); } .v14-op { display: flex; align-items: center; gap: 10px; } .v14-op input[type=range] { flex: 1; min-height: 0; padding: 0; accent-color: var(--v14-cor); box-shadow: none; } .v14-op output { min-width: 40px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .v14-previa { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--marca-eletrico) 22%, var(--surface-2)), color-mix(in srgb, var(--marca-acao) 16%, var(--surface-2))); border: 1px solid var(--border); } .v14-previa > span { flex-basis: 100%; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .v14-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; } .v14-rodape p { margin: 0; font-size: 11.5px; color: var(--text-3); line-height: 1.35; } /* botões de amostra do painel seguem o MESMO estilo escolhido (e não ficam presos ao escopo acima) */ html[data-v14-estilo][data-v14-estilo] body .v14-previa button { min-height: 36px; padding: 0 14px; font-weight: 600; } /* aba Configurações → Aparência: o bloco novo entra no lugar das 6 cores */ .v14-cfg { width: 100%; max-width: none; } .cfg-row:has(.v14-cfg) { flex-direction: column; align-items: stretch; gap: 12px; } .cfg-row:has(.v14-cfg) .paleta-cores-row { width: 100%; } /* ------------------------------------------------------------------ 5. Ajustes pedidos pelo Alan (24/10/2026, depois de ver a v1.4) */ /* 5a. Mais sombreamento nas caixas da tela (4 camadas: contato, corpo, queda longa, halo); no escuro soma um filete de luz no topo */ :root { --v14-sombra-card: 0 1px 2px color-mix(in srgb, #0b1220 12%, transparent), 0 6px 14px color-mix(in srgb, #0b1220 12%, transparent), 0 18px 34px -8px color-mix(in srgb, #0b1220 24%, transparent), 0 36px 60px -26px color-mix(in srgb, #0b1220 26%, transparent); --v14-sombra-card-hover: 0 2px 3px color-mix(in srgb, #0b1220 14%, transparent), 0 10px 22px color-mix(in srgb, #0b1220 16%, transparent), 0 26px 46px -10px color-mix(in srgb, #0b1220 30%, transparent), 0 44px 70px -26px color-mix(in srgb, #0b1220 30%, transparent); } .card, .cfg-atalho, .cfg-categorias, .sym-box.cam, .sym-box.sim, .cad-layout-right .card, .log-lateral { box-shadow: var(--v14-sombra-card), var(--v14-brilho-topo); } .sym-box.sim { box-shadow: var(--v14-sombra-card); } /* 5a'. Barra de topo mais enxuta: «Aparência» é mais larga que «Paleta»; sem isto, em 1280 px o usuário caía para uma 2ª linha e a câmera da Recepção encolhia 50 px */ .topbar { gap: 8px; } .topbar :is(.btn-avisos-topo, #rc-btn-ativos, .aparencia-rapida-gatilho, .btn-liberacao-manual) { padding-left: 11px; padding-right: 11px; } .topbar-status { padding-left: 10px; font-size: 12px; } #auth-usuario-logado { padding-left: 10px; font-size: 12px; } /* 5b. Log de acessos: nada é cortado — texto longo quebra em outra linha e o selo «Negado» desce em vez de encostar na borda */ .log-scroll { overflow-x: hidden; padding-right: 6px; } .log-scroll .nome, .log-scroll .meta { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: normal; } .log-lateral { padding: var(--v13-e4) var(--v13-e4) var(--v13-e3); } /* (25/10) 5c e os avisos do formulario so no desktop: no celular o Salvar fica no lugar de sempre (largura toda) */ @media (min-width: 761px) { /* 5c. Salvar: sai o «tique», entra o botão «Salvar» (com ícone de salvar) na linha da Observação, à direita */ body.fase1b-extras #fase1b-linha-camera { justify-content: flex-end; align-items: center; flex-wrap: nowrap; gap: 10px; } body.fase1b-extras #btn-salvar { width: auto; min-width: 0; height: 30px; min-height: 30px; padding: 0 14px; flex: none; gap: 7px; font-size: 13px; white-space: nowrap; border-radius: var(--v14-raio); position: relative; top: 0; left: 0; margin: 0; align-self: center; } body.fase1b-extras #btn-salvar::before, body.fase1b-extras #btn-salvar::after { content: none; } body.fase1b-extras #btn-salvar > svg { display: inline-block; width: 15px; height: 15px; } body.fase1b-extras #btn-salvar #btn-salvar-texto { font-size: 13px; line-height: 1; } /* Avisos do formulário: o PRODUTO já os mostra como popups — recusa de campo = balão encostado no próprio campo (AvisoDeCampo); «Editando…», «ativo em outros destinos», «Salvando…» = bandeja flutuante (#fase1b-tray). Mas o texto da recusa de campo também ficava escrito dentro do formulário (a cópia de «Informe o nome.» abaixo de Destino), duplicando o balão e empurrando o layout. Aqui essa cópia fica SÓ para leitor de tela (técnica «sr-only»: continua no DOM e é lida em voz alta; não é display:none) e a célula dela sai do fluxo (altura zero). */ body.fase1b-extras .left-stack { position: relative; } body.fase1b-extras .left-stack > div:has(#status-salvar) { position: absolute; left: 0; top: 100%; width: 0; height: 0; min-width: 0; margin: 0; padding: 0; flex: none; overflow: visible; } body.fase1b-extras #status-salvar[data-campo] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } body.fase1b-extras #status-salvar:empty { margin: 0; padding: 0; border: 0; } } /* 5d. Ícone de informação da unidade (era o emoji «ℹ️»): botão redondo fino que acende e gira ao passar o mouse */ .unidade-info-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; min-height: 0; padding: 0; margin-left: 6px; border-radius: 50%; font-size: 0; opacity: 1; vertical-align: middle; color: var(--v14-cor-texto); background: color-mix(in srgb, var(--v14-cor) 12%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--v14-cor) 38%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, #0b1220 14%, transparent); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .15s ease, color .15s ease, box-shadow .2s ease; } .unidade-info-btn svg { width: 13px; height: 13px; stroke-width: 2.4; } .unidade-info-btn:hover { transform: scale(1.18) rotate(-10deg); background: linear-gradient(145deg, var(--v14-cor-2), var(--v14-cor)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px color-mix(in srgb, var(--v14-cor) 55%, transparent); } /* 5e. Chave ligar/desligar (ativar/desativar): trilho com relevo, botão que estica ao tocar e brilho quando ligada */ .switch { width: 46px; height: 26px; min-height: 26px; padding: 0; border: 0; border-radius: 26px; flex-shrink: 0; background: color-mix(in srgb, var(--text) 18%, var(--surface-2)); box-shadow: inset 0 2px 5px color-mix(in srgb, #0b1220 32%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); transition: background .2s ease, box-shadow .25s ease; } .switch::after { top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 12px; background: linear-gradient(180deg, #ffffff, #e4e9f1); box-shadow: 0 2px 5px color-mix(in srgb, #0b1220 38%, transparent), 0 0 0 1px color-mix(in srgb, #0b1220 6%, transparent); transition: left .24s cubic-bezier(.34, 1.56, .64, 1), width .16s ease; } .switch:hover::after { width: 25px; } .switch:active::after { width: 28px; } .switch.on { background: linear-gradient(180deg, var(--v14-cor-2), var(--v14-cor)); box-shadow: inset 0 2px 4px color-mix(in srgb, #0b1220 28%, transparent), 0 0 14px color-mix(in srgb, var(--v14-cor) 55%, transparent); } .switch.on::after { left: 23px; } .switch.on:hover::after { left: 18px; } .switch.on:active::after { left: 15px; } .switch:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--v14-cor) 38%, transparent); } /* 5f. Novo modelo de ícone: bloco de cor com brilho, que levanta, gira e «pisca» um reflexo ao passar o mouse (pelo ícone ou pelo cartão) */ .cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone { position: relative; overflow: hidden; color: var(--v14-ic-fg, #fff); border: 1px solid transparent; border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--v14-cor-2) calc(var(--v14-op) * 100%), transparent), color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 100%), transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent), inset 0 -3px 6px color-mix(in srgb, #000 18%, transparent), 0 8px 16px -4px color-mix(in srgb, var(--v14-cor) 60%, transparent); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease; } .cfg-atalho-icone::before, .cfg-gaveta-icone::before, .cfg-categoria-icone::before, .config-painel-icone::before, body.painel-visual .pv-icone::before, .ajv-vazio-icone::before { content: ""; position: absolute; inset: 0; transform: translateX(-130%); background: linear-gradient(115deg, transparent 32%, color-mix(in srgb, #fff 60%, transparent) 50%, transparent 68%); transition: transform .7s ease; } :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) svg { position: relative; color: var(--v14-ic-fg, #fff); filter: drop-shadow(0 1px 1px color-mix(in srgb, #000 30%, transparent)); } html[data-v14-icone][data-v14-iconecor] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) svg { color: var(--v14-ic-fg, #fff); } :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone):hover, :is(.cfg-atalho, .card, .cfg-categoria):hover > :is(.cfg-atalho-icone, .config-painel-icone, .pv-icone), .cfg-atalho:hover .cfg-atalho-icone, .card:hover .pv-icone { transform: translateY(-3px) rotate(-7deg) scale(1.1); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), inset 0 -3px 6px color-mix(in srgb, #000 18%, transparent), 0 14px 24px -4px color-mix(in srgb, var(--v14-cor) 70%, transparent); } :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone):hover::before, .cfg-atalho:hover .cfg-atalho-icone::before, .card:hover .pv-icone::before { transform: translateX(130%); } :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone):hover svg, .cfg-atalho:hover .cfg-atalho-icone svg, .card:hover .pv-icone svg { animation: v14-pop .5s ease both; } @keyframes v14-pop { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.3) rotate(10deg); } 65% { transform: scale(.94) rotate(-6deg); } 100% { transform: scale(1.1) rotate(0); } } /* opção «Simples» do painel Aparência: sem bloco de cor, só o traço */ html[data-v14-icone="simples"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) { background: transparent; box-shadow: none; } html[data-v14-icone="simples"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) svg { color: var(--v14-cor-texto); filter: none; } html[data-v14-icone="circulo"] :is(.cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) { border-radius: 50%; } /* ícones de botões e do menu: mesmo «pulinho» ao passar o mouse */ :is(button, .nav-item, .cfg-categoria):hover > svg, .nav-item:hover .nav-icon svg { animation: v14-pop .45s ease both; } .nav-item .nav-icon { transition: transform .2s ease; } .nav-item:hover .nav-icon { transform: translateX(2px); } /* 5g. Lista de operadores (Configurações → Operadores): botões compactos que quebram para baixo do nome em vez de empurrar o texto para fora da gaveta */ .operador-item > div:first-child { flex-wrap: wrap; row-gap: 8px; } .operador-item > div:first-child > div:last-child { flex-wrap: wrap; flex-shrink: 1 !important; } .operador-item button { min-height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; } .operador-item button.operador-toggle-ativo { background: color-mix(in srgb, var(--v14-cor) 10%, var(--card-bg)); color: var(--v14-cor-texto); border: 1px solid color-mix(in srgb, var(--v14-cor) 32%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, #0b1220 12%, transparent); } .operador-item button.operador-toggle-ativo:hover { background: linear-gradient(145deg, var(--v14-cor-2), var(--v14-cor)); color: #fff; border-color: transparent; transform: translateY(-1px); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--v14-cor) 60%, transparent); } /* 5h. Correções da 3ª rodada (prints do Alan) */ /* ícone de informação duplicado e descentrado: o CSS antigo (acabamento-visual.css) desenhava um «i» serifado por cima do meu ícone — some o antigo, o meu fica centrado */ .interface-visual .unidade-info-btn::before, .unidade-info-btn::before { content: none; } .interface-visual .unidade-info-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0 0 0 6px; line-height: 0; } .unidade-info-wrap { display: inline-flex; align-items: center; vertical-align: middle; } /* log de acessos: o CSS da Recepção força uma linha só com reticências em nome/ID/unidade; aqui quebra em outra linha (nada fica cortado) */ body.recepcao .rc-linha :is(.nome, .meta, .rc-forte), body.recepcao .rc-unidade .meta { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } body.recepcao .rc-linha { padding-right: 10px; } /* «Liberar acesso» com a setinha (modo «liberar todos» e mais de um facial): a setinha vira um segmento colado ao botão, no mesmo estilo, em vez de uma caixa laranja solta */ .liberacao-manual-wrap { gap: 0; } .liberacao-manual-wrap:has(.btn-liberacao-manual-lista:not(.hidden)) .btn-liberacao-manual { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-liberacao-manual-lista:not(.hidden) { display: inline-grid; place-items: center; min-height: 38px; padding: 0 10px; border-radius: 0 var(--v14-raio) var(--v14-raio) 0; background: color-mix(in srgb, var(--v14-cor) 16%, var(--card-bg)); color: var(--v14-cor-texto); border: 1px solid color-mix(in srgb, var(--v14-cor) 28%, transparent); border-left-width: 0; box-shadow: 0 1px 2px color-mix(in srgb, #0b1220 14%, transparent); } .btn-liberacao-manual-lista:not(.hidden):hover { background: linear-gradient(145deg, var(--v14-cor-2), var(--v14-cor)); color: #fff; filter: none; } /* 5i. A transparência e o ESTILO escolhidos para os botões valem também para os blocos de ícone (pedido do Alan, 24/10, ao ver os ícones de Configurações) */ html[data-v14-estilo="vidro"][data-v14-icone="chip"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone), html[data-v14-estilo="vidro"][data-v14-icone="circulo"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) { background: linear-gradient(135deg, color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 58%), transparent), color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 28%), transparent)); backdrop-filter: blur(10px) saturate(1.6); -webkit-backdrop-filter: blur(10px) saturate(1.6); border-color: color-mix(in srgb, var(--v14-cor) 50%, #fff); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--v14-cor) 40%, transparent); } html[data-v14-estilo="transparente"][data-v14-icone="chip"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone), html[data-v14-estilo="transparente"][data-v14-icone="circulo"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) { background: transparent; box-shadow: none; border: 1.5px solid color-mix(in srgb, var(--v14-cor) 55%, transparent); } /* o contorno do bloco não depende do deslizador: some o fundo, o contorno fica */ html[data-v14-estilo="contorno"][data-v14-icone="chip"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone), html[data-v14-estilo="contorno"][data-v14-icone="circulo"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) { background: transparent; border: 1.5px solid color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 100%), transparent); box-shadow: none; } html[data-v14-estilo="chapado"][data-v14-icone="chip"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone), html[data-v14-estilo="chapado"][data-v14-icone="circulo"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) { background: color-mix(in srgb, var(--v14-cor) calc(var(--v14-op) * 32%), transparent); box-shadow: none; } html[data-v14-estilo="transparente"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) svg, html[data-v14-estilo="contorno"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) svg, html[data-v14-estilo="chapado"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) svg, html[data-v14-estilo="vidro"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) svg { filter: none; } /* 5j. A aba ativa de Configurações (Equipamentos, Nuvem…) segue o MESMO padrão do botão «Aparência»: mesma cor, estilo, formato e efeito escolhidos */ .cfg-categoria.ativa svg { color: var(--v14-cor-texto); } html[data-v14-estilo][data-v14-estilo] body .cfg-categoria.ativa { min-height: 40px; } /* cartão da bandeja que repete o texto de um balão no campo: fica só para leitor de tela (não é display:none) */ #fase1b-tray .fase1b-message-card[data-v14-dup] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; box-shadow: none; } /* 5k. Transparência: em «transparente» e «contorno» o desenho (texto/ícone) e a borda acompanham o deslizador; o bloco do ícone nunca perde o contorno junto com o fundo */ html[data-v14-estilo="transparente"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) svg, html[data-v14-estilo="contorno"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) svg { color: color-mix(in srgb, var(--v14-cor-texto) calc(var(--v14-op) * 100%), transparent); } html[data-v14-estilo="vidro"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone), html[data-v14-estilo="chapado"] :is(.cfg-atalho-icone, .cfg-gaveta-icone, .cfg-categoria-icone, .config-painel-icone, body.painel-visual .pv-icone, .ajv-vazio-icone) { border-width: 1px; } /* 5l. Ícone de «Logar»: a seta entra na porta ao passar o mouse (em vez do «pulinho» geral) */ svg[data-v14-logar] .v14-seta { transition: transform .22s cubic-bezier(.34, 1.56, .64, 1); } :is(button, a):hover > svg[data-v14-logar] { animation: none; } :is(button, a):hover > svg[data-v14-logar] .v14-seta { transform: translateX(3px); } } /* ===== 24/10 (prints do Alan): botoes simetricos no «Detalhe da pessoa», icone gigante do «Conexao neste computador» ===== */ /* O produto so dimensiona `button svg`; o svg de um