/* PCP — visual no espírito das interfaces da Apple (15/09/2026, pedido do Guilherme: "usa essa skill para refazer o PCP", skill apple-design de Emil Kowalski). Só aparência e navegação: nenhuma regra daqui muda o que as telas fazem. O que veio da skill, e onde está: - MATERIAL: cabeçalho e abas numa camada fixa e translúcida (.pcp-chrome), com blur, e o conteúdo rola por baixo. A sombra sob as abas aparece conforme a página rola (efeito de borda, não uma divisória fixa), com scroll-driven animation onde o navegador tem. - TIPOGRAFIA: fonte do sistema; título grande com espaçamento negativo, texto pequeno neutro, números tabulares nas tabelas; hierarquia por peso + tamanho, não só tamanho. - RESPOSTA: botão e aba reagem no aperto (:active, scale .97), sem esperar soltar. - CONTENÇÃO E AGRUPAMENTO: dois níveis — seções no cabeçalho, abas da seção na barra de baixo, só com texto; a ativa vira pílula, como o controle segmentado do macOS. O título diz onde a pessoa está ("PCP › Pedidos"). O peso da fonte não muda na aba ativa, para a fileira não "andar". - ACESSIBILIDADE: prefers-reduced-motion (sem escala nem entrada), prefers-reduced-transparency (camada sólida), prefers-contrast (bordas e textos mais fortes). - CLARO E ESCURO pelas mesmas variáveis --pc-* (mesmo modelo do pipeline.css). ⚠️ Tudo escopado em #page-pcp: .card, .btn, .data-table e .admin-tabs são do app inteiro e as outras telas não podem mudar. O modal .pcp-program-modal nasce no , fora da página, e por isso entra na lista das variáveis. Cor nova entra como variável — literal só vale num tema. Contraste de texto pequeno conferido (mínimo 4,5:1). */ #page-pcp, .pcp-program-modal { --pc-bg: #f5f5f7; --pc-surface: #ffffff; --pc-surface-2: #fafafc; --pc-ink: #1d1d1f; --pc-ink-2: #3a3a3c; --pc-muted: #636366; /* 5,5:1 sobre o fundo, 6:1 sobre a carta */ --pc-hairline: rgba(0, 0, 0, 0.07); --pc-sep: rgba(0, 0, 0, 0.13); --pc-fill: rgba(118, 118, 128, 0.14); --pc-fill-2: rgba(118, 118, 128, 0.08); --pc-hover: rgba(0, 0, 0, 0.028); --pc-primary: #15293a; /* azul-marinho da RR */ --pc-primary-ink: #ffffff; --pc-tint: #b4500f; /* laranja da RR escurecido para texto: 5,1:1 no branco */ --pc-focus: rgba(236, 106, 28, 0.32); --pc-danger-fill: #c81e1e; --pc-chrome: rgba(245, 245, 247, 0.74); --pc-header: rgba(21, 41, 58, 0.9); --pc-header-solid: #15293a; --pc-radius: 14px; --pc-radius-sm: 9px; --pc-shadow-card: 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 28px -18px rgba(0, 0, 0, 0.2); --pc-shadow-pop: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 24px 60px -18px rgba(0, 0, 0, 0.4); } [data-theme="dark"] #page-pcp, [data-theme="dark"] .pcp-program-modal { --pc-bg: #0e1013; --pc-surface: #1b1d22; --pc-surface-2: #212329; --pc-ink: #f5f5f7; --pc-ink-2: #d1d1d6; --pc-muted: #a1a1a6; /* 6,6:1 sobre a carta escura */ --pc-hairline: rgba(255, 255, 255, 0.07); --pc-sep: rgba(255, 255, 255, 0.14); --pc-fill: rgba(118, 118, 128, 0.28); --pc-fill-2: rgba(118, 118, 128, 0.18); --pc-hover: rgba(255, 255, 255, 0.035); --pc-primary: #f3934f; /* no escuro o app já usa o laranja como destaque */ --pc-primary-ink: #1b1206; --pc-tint: #f3934f; --pc-focus: rgba(243, 147, 79, 0.38); --pc-danger-fill: #dc2626; --pc-chrome: rgba(14, 16, 19, 0.72); --pc-header: rgba(18, 35, 52, 0.88); --pc-header-solid: #122334; --pc-shadow-card: 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 12px 28px -18px rgba(0, 0, 0, 0.7); --pc-shadow-pop: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 24px 60px -18px rgba(0, 0, 0, 0.8); } #page-pcp { background: var(--pc-bg); color: var(--pc-ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color 250ms ease, color 250ms ease; /* troca de tema sem susto */ } /* ── Camada fixa: cabeçalho + abas ─────────────────────────────────────────────────────────── */ #page-pcp .pcp-chrome { position: sticky; top: 0; z-index: 100; } #page-pcp .pcp-chrome .header { position: static; background-color: var(--pc-header); background-image: none; border-bottom: 2px solid var(--orange); box-shadow: none; padding: 10px 16px; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } #page-pcp .pcp-voltar { background: none; border: 0; color: #fff; cursor: pointer; font-size: 1.55rem; line-height: 1; padding: 2px 9px 5px; border-radius: 8px; transition: background-color 150ms ease, transform 100ms ease; } #page-pcp .pcp-voltar:hover { background: rgba(255, 255, 255, 0.12); } #page-pcp .pcp-voltar:active { transform: scale(0.94); } #page-pcp .pcp-titulo { display: flex; align-items: baseline; gap: 8px; font-size: 1.22rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; } #page-pcp .pcp-secao { font-size: 0.98rem; font-weight: 500; letter-spacing: -0.012em; color: rgba(255, 255, 255, 0.76); } #page-pcp .pcp-secao::before { content: '›'; margin-right: 8px; font-weight: 400; color: rgba(255, 255, 255, 0.45); } #page-pcp .pcp-sair { background: rgba(255, 255, 255, 0.14); color: #fff; } #page-pcp .pcp-sair:hover { background: rgba(255, 255, 255, 0.22); } #page-pcp .pcp-abas { display: flex; align-items: center; gap: 2px; padding: 6px 12px; background: var(--pc-chrome); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 0; box-shadow: 0 1px 0 var(--pc-hairline); overflow-x: auto; scrollbar-width: none; } #page-pcp .pcp-abas::-webkit-scrollbar { display: none; } #page-pcp .pcp-abas .admin-tab { flex: none; margin: 0; padding: 6px 11px; border: 0; border-radius: 8px; font-size: 0.84rem; font-weight: 500; letter-spacing: -0.006em; color: var(--pc-ink-2); transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease; } #page-pcp .pcp-abas .admin-tab:hover { background: var(--pc-fill-2); color: var(--pc-ink); } #page-pcp .pcp-abas .admin-tab:active { transform: scale(0.97); background: var(--pc-fill); } #page-pcp .pcp-abas .admin-tab.active { background: var(--pc-surface); color: var(--pc-ink); box-shadow: 0 0 0 0.5px var(--pc-sep), 0 1px 3px rgba(0, 0, 0, 0.1); } /* A sombra sob as abas nasce com a rolagem, em vez de uma divisória fixa. */ @supports (animation-timeline: scroll()) { #page-pcp .pcp-abas { box-shadow: 0 1px 0 transparent; animation: pcp-borda linear both; animation-timeline: scroll(root); animation-range: 0 40px; } @keyframes pcp-borda { to { box-shadow: 0 1px 0 var(--pc-hairline), 0 14px 26px -22px rgba(0, 0, 0, 0.5); } } } /* Navegador sem blur: a camada fica sólida, senão o texto de baixo aparece através dela. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { #page-pcp .pcp-abas { background: var(--pc-bg); } #page-pcp .pcp-chrome .header { background-color: var(--pc-header-solid); } } /* ── Conteúdo ───────────────────────────────────────────────────────────────────────────────── */ #page-pcp #pcp-content { flex: 1; overflow-y: auto; padding: 18px 20px 36px; } /* Entrada só na troca de aba (a classe sai no animationend): refazer a tabela ao filtrar não pisca. */ #page-pcp #pcp-content.pcp-entra { animation: pcp-entra 200ms ease-out backwards; } @keyframes pcp-entra { from { opacity: 0; } } #page-pcp .text-muted { color: var(--pc-muted); } #page-pcp .pcp-toolbar { gap: 8px; margin-bottom: 14px; } #page-pcp .pcp-toolbar > strong:first-child { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.024em; line-height: 1.1; margin-right: 6px; color: var(--pc-ink); } /* Cartas: sem borda desenhada, só a sombra de meio pixel e a profundidade. */ #page-pcp .card { background: var(--pc-surface); border: 0; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow-card); padding: 16px 18px; } #page-pcp .card-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; text-transform: none; color: var(--pc-ink); margin-bottom: 10px; } /* ── Botões: resposta no aperto ─────────────────────────────────────────────────────────────── */ #page-pcp .btn { border-radius: var(--pc-radius-sm); font-weight: 600; letter-spacing: -0.005em; transition: transform 100ms ease, background-color 150ms ease, box-shadow 150ms ease, filter 150ms ease, opacity 150ms ease; } #page-pcp .btn:active { transform: scale(0.97); filter: none; transition-duration: 60ms; } #page-pcp .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pc-focus); } #page-pcp .btn:disabled, #page-pcp .btn[disabled] { opacity: 0.45; cursor: default; transform: none; } #page-pcp .btn-sm { padding: 6px 12px; font-size: 0.84rem; } #page-pcp .btn-primary { background: var(--pc-primary); color: var(--pc-primary-ink); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); } #page-pcp .btn-primary:hover { filter: brightness(1.08); } #page-pcp .btn-outline { background: var(--pc-surface); color: var(--pc-ink); border: 1px solid var(--pc-sep); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03); } #page-pcp .btn-outline:hover { background: var(--pc-surface-2); border-color: var(--pc-muted); } #page-pcp .btn-gray { background: var(--pc-fill); color: var(--pc-ink); } #page-pcp .btn-gray:hover { background: var(--pc-fill-2); } #page-pcp .btn-danger { background: var(--pc-danger-fill); color: #fff; } /* ── Campos ─────────────────────────────────────────────────────────────────────────────────── */ #page-pcp input[type=text], #page-pcp input[type=number], #page-pcp input[type=password], #page-pcp input[type=date], #page-pcp input[type=month], #page-pcp input[type=search], #page-pcp input[type=time], #page-pcp input[type=email], #page-pcp select, #page-pcp textarea { border: 1px solid var(--pc-sep); border-radius: var(--pc-radius-sm); background-color: var(--pc-surface); /* nunca o atalho background: apaga a seta do select */ color: var(--pc-ink); padding: 7px 10px; font-size: 0.875rem; line-height: 1.3; transition: border-color 120ms ease, box-shadow 120ms ease; } #page-pcp input:focus, #page-pcp select:focus, #page-pcp textarea:focus { outline: none; border-color: var(--pc-tint); box-shadow: 0 0 0 3px var(--pc-focus); } #page-pcp input::placeholder, #page-pcp textarea::placeholder { color: var(--pc-muted); opacity: 0.85; } #page-pcp input[type=checkbox], #page-pcp input[type=radio] { accent-color: var(--pc-tint); } /* Campos que moram dentro da tabela ou de filtros compactos mantêm o tamanho deles. */ #page-pcp input.pcp-inp, #page-pcp select.pcp-inp { padding: 4px 7px; font-size: 0.82rem; border-radius: 7px; max-width: 150px; } #page-pcp .colet-filtros input { padding: 5px 9px; font-size: 13px; } #page-pcp .form-group label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0; color: var(--pc-ink-2); } /* ── Tabelas ────────────────────────────────────────────────────────────────────────────────── */ #page-pcp table.data-table { font-size: 0.84rem; font-variant-numeric: tabular-nums; } #page-pcp table.data-table th { background: var(--pc-surface-2); color: var(--pc-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; padding: 9px 10px; border-bottom: 1px solid var(--pc-sep); } #page-pcp table.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--pc-hairline); color: var(--pc-ink); } #page-pcp table.data-table tbody tr:last-child td { border-bottom: 0; } #page-pcp table.data-table tr:hover td { background: var(--pc-hover); } #page-pcp .pcp-table-wrap.card { overflow: auto; } #page-pcp .pcp-du, #page-pcp .pcp-status, #page-pcp .status-pill { font-weight: 600; letter-spacing: 0.01em; } #page-pcp .empty-state { color: var(--pc-muted); } /* Cadastros: o menu gruda logo abaixo da camada fixa (altura medida pelo pcp/index.js). */ #page-pcp .pcp-cad-menu { top: calc(var(--pcp-chrome-h, 100px) + 12px); background: var(--pc-surface); border: 0; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow-card); padding: 8px; } #page-pcp .pcp-cad-menu button { font-weight: 500; border-radius: 8px; color: var(--pc-ink); transition: background-color 120ms ease; } #page-pcp .pcp-cad-menu button:hover { background: var(--pc-fill-2); } #page-pcp .pcp-cad-card { scroll-margin-top: calc(var(--pcp-chrome-h, 100px) + 12px); } /* Barra do envio ao SH (Coletados/Entradas SH) no mesmo material das cartas. */ #page-pcp .colet-envio { background: var(--pc-surface-2); border-color: var(--pc-sep); } /* ── Modal da programação: escurece para focar e a carta surge do centro ────────────────────── */ .pcp-program-modal { background: rgba(0, 0, 0, 0.3); animation: pcp-escurece 180ms ease-out backwards; } .pcp-program-modal .pcp-program-box { background: var(--pc-surface); color: var(--pc-ink); border: 0; border-radius: 16px; box-shadow: var(--pc-shadow-pop); padding: 18px; animation: pcp-surge 240ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; } .pcp-program-modal .pcp-program-title { font-size: 1.05rem; letter-spacing: -0.015em; } .pcp-program-modal textarea { background: var(--pc-surface-2); color: var(--pc-ink); border: 1px solid var(--pc-sep); border-radius: 10px; } @keyframes pcp-escurece { from { background-color: rgba(0, 0, 0, 0); } } @keyframes pcp-surge { from { opacity: 0; transform: scale(0.97); } } /* ── Acessibilidade ─────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #page-pcp *, .pcp-program-modal, .pcp-program-modal * { animation: none !important; transition-duration: 0.01ms !important; } #page-pcp .pcp-abas { box-shadow: 0 1px 0 var(--pc-hairline) !important; } #page-pcp .btn:active, #page-pcp .pcp-abas .admin-tab:active, #page-pcp .pcp-voltar:active { transform: none; } } @media (prefers-reduced-transparency: reduce) { #page-pcp .pcp-chrome .header { background-color: var(--pc-header-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } #page-pcp .pcp-abas { background: var(--pc-bg); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { #page-pcp, .pcp-program-modal { --pc-hairline: rgba(0, 0, 0, 0.22); --pc-sep: rgba(0, 0, 0, 0.4); --pc-muted: #48484a; --pc-ink-2: #1d1d1f; } [data-theme="dark"] #page-pcp, [data-theme="dark"] .pcp-program-modal { --pc-hairline: rgba(255, 255, 255, 0.24); --pc-sep: rgba(255, 255, 255, 0.45); --pc-muted: #d1d1d6; --pc-ink-2: #f5f5f7; } #page-pcp .card { box-shadow: 0 0 0 1px var(--pc-sep); } } /* ── Cabeçalho em três partes: marca, seções, ações (15/09/2026) ──────────────────────────────── As SEÇÕES são um controle segmentado no centro do cabeçalho; a barra translúcida de baixo mostra só as abas da seção. Dois níveis curtos em vez de uma fileira de 18 abas: a pessoa escolhe o assunto e depois a tela, e a barra nunca precisa rolar para o lado no computador. */ #page-pcp .pcp-chrome .header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 16px; } #page-pcp .pcp-marca { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; min-width: 0; } #page-pcp .pcp-logo { height: 24px; width: auto; flex: none; } #page-pcp .pcp-titulo { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.22); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-pcp .pcp-acoes { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; } #page-pcp .pcp-secoes { grid-column: 2; grid-row: 1; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14); overflow-x: auto; scrollbar-width: none; } #page-pcp .pcp-secoes::-webkit-scrollbar { display: none; } #page-pcp .pcp-secao-btn { flex: none; border: 0; background: transparent; cursor: pointer; color: rgba(255, 255, 255, 0.84); font: inherit; font-size: 0.86rem; font-weight: 500; letter-spacing: -0.006em; padding: 5px 13px; border-radius: 8px; white-space: nowrap; transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease; } #page-pcp .pcp-secao-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } #page-pcp .pcp-secao-btn:active { transform: scale(0.97); } #page-pcp .pcp-secao-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); } #page-pcp .pcp-secao-btn.active { background: #ffffff; color: #15293a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } /* ── Formulários (revisão de 15/09/2026) ───────────────────────────────────────────────────── */ #page-pcp, .pcp-program-modal { --pc-danger-text: #b91c1c; --pc-warn-text: #b45309; } [data-theme="dark"] #page-pcp, [data-theme="dark"] .pcp-program-modal { --pc-danger-text: #fca5a5; --pc-warn-text: #fbbf24; } /* Excluir ou cancelar dentro de uma lista é ação secundária: texto na cor do risco, fundo só ao passar o mouse. Botão vermelho cheio em cada linha gritava mais que o conteúdo. */ #page-pcp table.data-table .btn-danger, #page-pcp .am-remover { background: transparent; color: var(--pc-danger-text); box-shadow: none; } #page-pcp table.data-table .btn-danger:hover, #page-pcp .am-remover:hover { background: var(--pc-danger-fill); color: #fff; } #page-pcp table.data-table .btn-warning { background: transparent; color: var(--pc-warn-text); box-shadow: inset 0 0 0 1px currentColor; } #page-pcp table.data-table .btn-warning:hover { background: var(--pc-fill-2); } /* Cadastros: o salvar de cada carta fica na borda direita, como ação final da carta. */ #page-pcp .pcp-cad-card > .btn:last-child { display: flex; width: fit-content; margin-left: auto; margin-top: 12px; } #page-pcp .pcp-cad-card > .text-muted { line-height: 1.55; max-width: 78ch; } #page-pcp .pcp-form-grid { gap: 12px 16px; } /* Linha de "adicionar" com rótulo em cada campo, separada da lista por um fio. */ #page-pcp .pcp-linha-add { display: flex; gap: 8px 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pc-hairline); } #page-pcp .pcp-linha-add .form-group { margin: 0; } /* Ação que sobrescreve muita coisa fica afastada da comum, com o próprio fio. */ #page-pcp .pcp-perigo { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pc-hairline); } @media (max-width: 900px) { #page-pcp .pcp-chrome .header { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; } #page-pcp .pcp-acoes { grid-column: 2; grid-row: 1; } #page-pcp .pcp-secoes { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; } } @media (max-width: 640px) { #page-pcp #pcp-content { padding: 12px 12px 28px; } #page-pcp .pcp-secao { display: none; } #page-pcp .pcp-titulo { padding-left: 10px; } #page-pcp .pcp-toolbar > strong:first-child { font-size: 1.2rem; } }