/** * BARMO Produtos — design manual escopado (Fase 2) * ESCOPO: somente páginas com class="barmo-produtos" no . * Variáveis locais — NÃO altera :root global nem módulos legados. */ .barmo-produtos { --prod-brand: #102a43; --prod-brand-2: #1e5b8c; --prod-accent: #d9a441; --prod-accent-soft: #f4d27a; --prod-bg: #0b1220; --prod-bg-elevated: #111b2e; --prod-bg-card: #152238; --prod-bg-card-hover: #1a2a45; --prod-ink: #e8eef6; --prod-ink-muted: #8b9cb3; --prod-ink-subtle: #5c6f88; --prod-line: rgba(255, 255, 255, 0.08); --prod-line-strong: rgba(255, 255, 255, 0.14); --prod-shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.32); --prod-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); --prod-ok: #3ecf8e; --prod-warn: #e8b84a; --prod-info: #5eb3f0; --prod-danger: #dc4646; --prod-space-xs: 6px; --prod-space-sm: 10px; --prod-space-md: 16px; --prod-space-lg: 24px; --prod-space-xl: 36px; --prod-radius-md: 14px; --prod-radius-lg: 20px; --prod-text-xs: 11px; --prod-text-sm: 13px; --prod-text-lg: 18px; } body.barmo-produtos { background: radial-gradient(ellipse 70% 45% at 0% 0%, rgba(30, 91, 140, 0.18), transparent 55%), radial-gradient(ellipse 50% 35% at 100% 0%, rgba(217, 164, 65, 0.08), transparent 50%), var(--prod-bg); color: var(--prod-ink); } /* Header (Cap. 10) */ .barmo-produtos .shell-header { border-bottom-color: var(--prod-line); } .barmo-produtos .shell-logo-mark { background: linear-gradient(145deg, #173b5d, var(--prod-brand)); color: var(--prod-accent); box-shadow: var(--prod-shadow-soft); } .barmo-produtos .shell-title { color: var(--prod-ink); } .barmo-produtos .shell-subtitle, .barmo-produtos .shell-date { color: var(--prod-ink-muted); } .barmo-produtos .shell-section-title { border-left-color: var(--prod-accent); color: var(--prod-ink); } .barmo-produtos .shell-section-hint { color: var(--prod-ink-subtle); } /* Métricas e origem */ .barmo-produtos .produtos-metric { background: var(--prod-bg-card); border-color: var(--prod-line); transition: border-color 0.16s ease, background 0.16s ease; } .barmo-produtos .produtos-metric:hover { border-color: var(--prod-line-strong); background: var(--prod-bg-card-hover); } .barmo-produtos .produtos-metric.ok .value { color: var(--prod-ok); } .barmo-produtos .produtos-metric.warn .value { color: var(--prod-warn); } /* Filtros (Cap. 23) */ .barmo-produtos .produtos-toolbar { padding: var(--prod-space-md); border-radius: var(--prod-radius-md); background: var(--prod-bg-card); border: 1px solid var(--prod-line); } .barmo-produtos .produtos-field input, .barmo-produtos .produtos-field select { background: var(--prod-bg-elevated); border-color: var(--prod-line-strong); color: var(--prod-ink); } .barmo-produtos .produtos-field input:focus, .barmo-produtos .produtos-field select:focus { outline: 2px solid rgba(217, 164, 65, 0.4); border-color: rgba(217, 164, 65, 0.5); } .barmo-produtos .produtos-field input:focus-visible, .barmo-produtos .produtos-field select:focus-visible { outline: 2px solid var(--prod-accent); outline-offset: 1px; } /* Tabela (Cap. 20) */ .barmo-produtos .produtos-table-wrap { border-color: var(--prod-line); background: var(--prod-bg-elevated); box-shadow: var(--prod-shadow-soft); } .barmo-produtos .produtos-table th { background: var(--prod-brand); color: var(--prod-ink-muted); border-bottom-color: var(--prod-line-strong); } .barmo-produtos .produtos-table td { color: var(--prod-ink); border-bottom-color: var(--prod-line); } .barmo-produtos .produtos-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); } .barmo-produtos .produtos-table tbody tr:hover td { background: rgba(30, 91, 140, 0.14); } .barmo-produtos .produtos-table .sku { color: var(--prod-accent-soft); } /* Badges e alertas */ .barmo-produtos .produtos-health-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: var(--prod-text-xs); font-weight: 800; margin-left: 8px; border: 1px solid var(--prod-line-strong); } .barmo-produtos .produtos-health-badge.is-ok { color: var(--prod-ok); border-color: rgba(62, 207, 142, 0.45); } .barmo-produtos .produtos-health-badge.is-atencao { color: var(--prod-warn); border-color: rgba(232, 184, 74, 0.55); } .barmo-produtos .produtos-health-badge.is-critico { color: var(--prod-danger); border-color: rgba(220, 70, 70, 0.55); } .barmo-produtos .produtos-alert-pill { background: rgba(232, 184, 74, 0.12); color: var(--prod-warn); border-color: rgba(232, 184, 74, 0.28); } .barmo-produtos .produtos-alert-pill.bad { background: rgba(220, 70, 70, 0.15); color: #f87171; border-color: rgba(248, 113, 113, 0.28); } .barmo-produtos .produtos-future-btn { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--prod-line-strong); background: var(--prod-bg-elevated); color: var(--prod-ink-subtle); font: inherit; font-size: 12px; font-weight: 800; opacity: 0.55; cursor: not-allowed; margin-left: 8px; } /* Empty state */ .barmo-produtos .produtos-empty { padding: var(--prod-space-xl); color: var(--prod-ink-muted); font-weight: 700; background: rgba(16, 42, 67, 0.35); border-top: 1px dashed var(--prod-line); } /* Configurações avançadas + gate (Cap. 10 L4) */ .barmo-produtos details.area-tecnica { border-color: var(--prod-line); background: rgba(16, 42, 67, 0.35); } .barmo-produtos details.area-tecnica > summary { color: var(--prod-ink-subtle); } .barmo-produtos .area-sistema-note { color: var(--prod-ink-subtle); } .barmo-produtos .sistema-gate.is-locked { border-color: var(--prod-line); background: rgba(16, 42, 67, 0.35); } .barmo-produtos .sistema-gate__form { background: rgba(16, 42, 67, 0.5); border-color: var(--prod-line); } .barmo-produtos .sistema-gate__input { background: var(--prod-bg-elevated); border-color: var(--prod-line-strong); color: var(--prod-ink); } .barmo-produtos .sistema-gate__submit { background: var(--prod-accent); border-color: var(--prod-accent); color: var(--prod-brand); } .barmo-produtos .sistema-gate__error { color: var(--prod-danger); } .barmo-produtos .alert-bar { background: rgba(30, 91, 140, 0.15); border-color: rgba(94, 179, 240, 0.2); color: var(--prod-ink-muted); } .barmo-produtos .alert-bar strong { color: var(--prod-info); } /* Sync cards */ .barmo-produtos .produtos-sync-card { background: var(--prod-bg-card); border-color: var(--prod-line); } .barmo-produtos .produtos-sync-card h3 { color: var(--prod-accent-soft); } .barmo-produtos .produtos-sync-btn:focus-visible { outline: 2px solid var(--prod-accent); outline-offset: 2px; } .barmo-produtos .produtos-limpeza-piloto { border-color: rgba(217, 164, 65, 0.28); } .barmo-produtos .shell-footer { border-top-color: var(--prod-line); color: var(--prod-ink-subtle); } @media (prefers-reduced-motion: reduce) { .barmo-produtos .produtos-metric { transition: none; } } /* Edição segura do canônico (próximo passo Fase 2) */ .barmo-produtos .produtos-edicao-form { display: grid; gap: var(--prod-space-sm); margin-bottom: var(--prod-space-md); } .barmo-produtos .produtos-edicao-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--prod-text-sm); font-weight: 700; color: var(--prod-ink-muted); } .barmo-produtos .produtos-edicao-form input { min-height: 38px; padding: 8px 12px; border-radius: var(--prod-radius-md); border: 1px solid var(--prod-line-strong); background: var(--prod-bg-card); color: var(--prod-ink); font: inherit; } .barmo-produtos .produtos-edicao-form input:focus-visible { outline: 2px solid var(--prod-accent); outline-offset: 1px; }