/** * BARMO Pesquisa & Viabilidade — design manual escopado (Fase 4) * ESCOPO: somente páginas com class="barmo-pesquisa" no . * Tema claro — NÃO carrega tokens/shell/components globais dark. */ .barmo-pesquisa { --pes-brand: #102a43; --pes-accent: #d9a441; --pes-paper: #ffffff; --pes-ink: #172033; --pes-muted: #667085; --pes-border: #d9e2ec; --pes-surface: #f4f7fa; --pes-soft: #eef4fa; --pes-shadow: 0 18px 50px rgba(16, 42, 67, .10); --pes-radius-lg: 18px; --pes-radius-md: 12px; --pes-space-xs: 6px; --pes-space-sm: 10px; --pes-space-md: 16px; --pes-space-lg: 24px; --pes-space-xl: 32px; } /* ── Shell & navegação ── */ .barmo-pesquisa .page { border-color: var(--pes-border); box-shadow: var(--pes-shadow); } .barmo-pesquisa .page header { border-bottom-color: var(--pes-brand); } .barmo-pesquisa .page header h1 { color: var(--pes-brand); } .barmo-pesquisa .page header .subtitle { color: var(--pes-muted); } .barmo-pesquisa .page h2 { border-left-color: var(--pes-accent); color: var(--pes-brand); } .barmo-pesquisa .main-nav { border-color: var(--pes-border); background: var(--pes-soft); } .barmo-pesquisa .main-nav button.active { background: var(--pes-brand); } .barmo-pesquisa button:focus-visible, .barmo-pesquisa input:focus-visible, .barmo-pesquisa select:focus-visible, .barmo-pesquisa textarea:focus-visible { outline: 3px solid rgba(24, 59, 91, 0.18); outline-offset: 2px; } /* ── Home — jornada protagonista ── */ .barmo-pesquisa .home-jornada-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pes-space-md); margin-bottom: var(--pes-space-lg); } @media (max-width: 720px) { .barmo-pesquisa .home-jornada-kpis { grid-template-columns: 1fr; } } .barmo-pesquisa .home-jornada-kpis .home-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; position: relative; overflow: hidden; min-height: 112px; border-width: 1px; border-radius: 18px; padding: 18px; box-shadow: var(--soft-shadow); cursor: pointer; width: 100%; text-align: left; font-family: inherit; } .barmo-pesquisa .home-jornada-kpis .home-card:before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--brand-2); } .barmo-pesquisa .home-jornada-kpis .home-card:nth-child(3):before { background: #43a66b; } .barmo-pesquisa .home-jornada-kpis .home-card:nth-child(4):before, .barmo-pesquisa .home-jornada-kpis .home-card:nth-child(5):before { background: var(--pes-accent); } .barmo-pesquisa .home-jornada-kpis .home-card:nth-child(6):before { background: #43a66b; } .barmo-pesquisa .home-jornada-kpis .home-card .label { font-size: 10px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .barmo-pesquisa .home-jornada-kpis .home-card .value { font-size: 24px; font-weight: 950; line-height: 1.18; letter-spacing: -0.03em; margin-top: 10px; } /* ── Esteira completa (A1 do roadmap) — 6 estágios, mesmo padrão visual da jornada ── */ .barmo-pesquisa .home-jornada-kpis--esteira { grid-template-columns: repeat(3, 1fr); } @media (max-width: 720px) { .barmo-pesquisa .home-jornada-kpis--esteira { grid-template-columns: 1fr; } } .barmo-pesquisa .home-jornada-kpis--esteira .jornada-card--total { cursor: default; } .barmo-pesquisa .home-jornada-kpis--esteira a.jornada-card--link { text-decoration: none; display: block; } .barmo-pesquisa .panel-hint--esteira-nota { font-size: 11px; color: var(--pes-muted); margin-top: var(--pes-space-sm); } .barmo-pesquisa .home-secondary-details { margin-top: var(--pes-space-md); } .barmo-pesquisa .home-secondary-details summary { cursor: pointer; font-weight: 800; font-size: 12px; color: var(--pes-muted); padding: var(--pes-space-sm) 0; list-style: none; } .barmo-pesquisa .home-secondary-details summary::-webkit-details-marker { display: none; } .barmo-pesquisa .home-secondary-details summary::before { content: "▸ "; color: var(--pes-accent); } .barmo-pesquisa .home-secondary-details[open] summary::before { content: "▾ "; } .barmo-pesquisa .home-card { border-color: var(--pes-border); background: linear-gradient(180deg, var(--pes-paper) 0%, var(--pes-soft) 100%); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } .barmo-pesquisa .home-card:hover { transform: translateY(-1px); border-color: #c7d6e5; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08); } .barmo-pesquisa .home-card .value { color: var(--pes-brand); } .barmo-pesquisa .home-card.jornada-card .value { color: var(--pes-brand); } .barmo-pesquisa .panel-card { border-color: var(--pes-border); border-radius: var(--pes-radius-md); } .barmo-pesquisa .files-menu { border-color: var(--pes-border); box-shadow: 0 20px 54px rgba(15, 23, 42, 0.16); } /* ── Compras & SKU — painel ── */ .barmo-pesquisa .compras-panel { display: flex; flex-direction: column; gap: var(--pes-space-md); } .barmo-pesquisa .gestor-toolbar { display: flex; align-items: center; gap: var(--pes-space-sm); flex-wrap: wrap; padding: var(--pes-space-sm) var(--pes-space-md); border-radius: var(--pes-radius-md); border: 1px solid rgba(217, 164, 65, 0.45); border-left: 4px solid var(--pes-accent); background: linear-gradient(90deg, #fff9ed 0%, #fffdf8 100%); font-size: 12px; font-weight: 700; color: var(--pes-ink); } .barmo-pesquisa .gestor-toolbar.is-unlocked { border-color: #86efac; border-left-color: #22c55e; background: linear-gradient(90deg, #f0fdf4 0%, #fff 100%); } .barmo-pesquisa .gestor-toolbar .gestor-lock-form { display: flex; gap: var(--pes-space-xs); align-items: center; flex-wrap: wrap; margin-left: auto; } .barmo-pesquisa .gestor-toolbar .gestor-lock-form input { width: 150px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--pes-border); font-size: 12px; } .barmo-pesquisa .gestor-toolbar .gestor-unlock-link { color: var(--pes-brand); font-weight: 800; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; font-size: inherit; } /* ── Pipeline 3 passos ── */ .barmo-pesquisa .compras-pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: var(--pes-space-sm); margin: 0; } @media (max-width: 860px) { .barmo-pesquisa .compras-pipeline { grid-template-columns: 1fr; } .barmo-pesquisa .compras-pipeline-arrow { display: none; } } .barmo-pesquisa .compras-pipeline-arrow { display: flex; align-items: center; color: var(--pes-muted); font-size: 18px; font-weight: 700; opacity: 0.5; padding: 0 2px; } .barmo-pesquisa .compras-step { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--pes-space-md); border: 2px solid var(--pes-border); border-radius: var(--pes-radius-md); background: var(--pes-paper); cursor: pointer; text-align: left; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .barmo-pesquisa .compras-step:hover { border-color: #b8c9db; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } .barmo-pesquisa .compras-step.active { border-color: var(--pes-brand); background: linear-gradient(180deg, #fff 0%, var(--pes-soft) 100%); box-shadow: 0 6px 18px rgba(24, 59, 91, 0.1); } .barmo-pesquisa .compras-step-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--pes-surface); color: var(--pes-muted); font-size: 12px; font-weight: 900; } .barmo-pesquisa .compras-step.active .compras-step-num { background: var(--pes-brand); color: #fff; } .barmo-pesquisa .compras-step-label { font-size: 14px; font-weight: 900; color: var(--pes-brand); } .barmo-pesquisa .compras-step-count { font-size: 11px; font-weight: 700; color: var(--pes-muted); } /* ── Resumo cotação (KPIs reduzidos) ── */ .barmo-pesquisa .compras-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pes-space-sm); } @media (max-width: 720px) { .barmo-pesquisa .compras-summary { grid-template-columns: repeat(2, 1fr); } } .barmo-pesquisa .compras-summary-card { padding: var(--pes-space-sm) var(--pes-space-md); border: 1px solid var(--pes-border); border-radius: var(--pes-radius-md); background: var(--pes-paper); } .barmo-pesquisa .compras-summary-card .label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pes-muted); } .barmo-pesquisa .compras-summary-card .value { font-size: 18px; font-weight: 900; color: var(--pes-brand); margin-top: 2px; } /* ── Ações do painel ── */ .barmo-pesquisa .compras-actions { display: flex; align-items: center; gap: var(--pes-space-sm); flex-wrap: wrap; } .barmo-pesquisa .compras-step-panel { display: flex; flex-direction: column; gap: var(--pes-space-md); } .barmo-pesquisa .compras-step-hint { margin: 0; font-size: 12px; color: var(--pes-muted); font-weight: 600; } /* ── Section cards (fornecedor grupos) ── */ .barmo-pesquisa .section-card { border: 1px solid var(--pes-border); border-radius: var(--pes-radius-md); background: var(--pes-paper); overflow: hidden; } .barmo-pesquisa .section-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--pes-space-sm); flex-wrap: wrap; padding: var(--pes-space-sm) var(--pes-space-md); background: var(--pes-soft); border-bottom: 1px solid var(--pes-border); } .barmo-pesquisa .section-card-header h3 { margin: 0; font-size: 13px; font-weight: 900; color: var(--pes-brand); } .barmo-pesquisa .section-card-body { padding: var(--pes-space-sm); } .barmo-pesquisa .section-card-meta, .barmo-pesquisa .fornecedor-metrics { display: flex; flex-wrap: wrap; gap: var(--pes-space-xs); padding: var(--pes-space-xs) var(--pes-space-md); border-bottom: 1px solid var(--pes-border); } .barmo-pesquisa .item-card-action a.primary, .barmo-pesquisa .item-card-action a.secondary { display: inline-block; padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 800; text-decoration: none; text-align: center; } .barmo-pesquisa .item-card-action a.primary { background: var(--pes-brand); color: #fff; } .barmo-pesquisa .item-card-action a.secondary { background: var(--pes-surface); color: var(--pes-brand); border: 1px solid var(--pes-border); } /* ── Item cards (Comprado / No SKU) ── */ .barmo-pesquisa .compras-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--pes-space-md); } .barmo-pesquisa .item-card { display: flex; flex-direction: column; gap: var(--pes-space-sm); padding: var(--pes-space-md); border: 1px solid var(--pes-border); border-radius: var(--pes-radius-md); background: var(--pes-paper); transition: box-shadow 0.15s ease; } .barmo-pesquisa .item-card:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07); } .barmo-pesquisa .item-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pes-space-sm); } .barmo-pesquisa .item-card-head h4 { margin: 0; font-size: 13px; font-weight: 900; color: var(--pes-ink); line-height: 1.35; flex: 1; } .barmo-pesquisa .item-card-meta { font-size: 11px; color: var(--pes-muted); font-weight: 600; line-height: 1.5; } .barmo-pesquisa .item-card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pes-space-xs); } .barmo-pesquisa .item-card-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pes-muted); } .barmo-pesquisa .item-card-fields input { padding: 6px 8px; border: 1px solid var(--pes-border); border-radius: 8px; font-size: 12px; } .barmo-pesquisa .item-card-action { margin-top: auto; padding-top: var(--pes-space-xs); border-top: 1px solid var(--pes-border); } .barmo-pesquisa .item-card-action .primary { width: 100%; } /* ── SKU draft row ── */ .barmo-pesquisa .sku-draft-row { display: flex; flex-direction: column; gap: 4px; } .barmo-pesquisa .sku-draft-row .sku-draft-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pes-muted); } .barmo-pesquisa .sku-draft-row .sku-draft-inputs { display: flex; gap: var(--pes-space-xs); align-items: center; } .barmo-pesquisa .sku-draft-row input.pre-sku-draft, .barmo-pesquisa .sku-draft-row input.comp-sku-draft { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--pes-border); border-radius: 8px; font-family: ui-monospace, monospace; font-size: 11px; text-transform: uppercase; } .barmo-pesquisa .sku-draft-hint { font-size: 10px; color: var(--pes-muted); font-weight: 600; } /* ── Status pills ── */ .barmo-pesquisa .status-pill, .barmo-pesquisa .orc-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } .barmo-pesquisa .status-pill--cotacao, .barmo-pesquisa .orc-badge--cotacao { background: #e0f2fe; color: #0369a1; } .barmo-pesquisa .status-pill--comprado, .barmo-pesquisa .orc-badge--comprado { background: #fef3c7; color: #92400e; } .barmo-pesquisa .status-pill--sku, .barmo-pesquisa .orc-badge--sku, .barmo-pesquisa .orc-badge--pronto { background: #dcfce7; color: #166534; } /* ── Tabelas cotação ── */ .barmo-pesquisa .preorcamento-table th, .barmo-pesquisa .preorcamento-table td { padding: 8px 10px; vertical-align: middle; } .barmo-pesquisa .preorcamento-table thead th { background: var(--pes-soft); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pes-muted); font-weight: 800; } .barmo-pesquisa .preorcamento-empty { padding: var(--pes-space-lg); border: 1px dashed var(--pes-border); border-radius: var(--pes-radius-md); color: var(--pes-muted); background: var(--pes-surface); font-weight: 700; text-align: center; } .barmo-pesquisa .btn-gestor-locked { opacity: 0.55; cursor: not-allowed; } /* ── Cotação — card rows (substitui tabela 11 colunas) ── */ .barmo-pesquisa .cotacao-cards { display: flex; flex-direction: column; gap: var(--pes-space-md); padding: var(--pes-space-sm); } .barmo-pesquisa .cotacao-card { display: flex; flex-direction: column; gap: var(--pes-space-md); padding: var(--pes-space-md); border: 1px solid var(--pes-border); border-radius: var(--pes-radius-md); background: var(--pes-paper); transition: box-shadow 0.15s ease; } .barmo-pesquisa .cotacao-card:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07); } .barmo-pesquisa .cotacao-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pes-space-sm); } .barmo-pesquisa .cotacao-card-title { margin: 0; font-size: 14px; font-weight: 900; color: var(--pes-ink); line-height: 1.4; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .barmo-pesquisa .cotacao-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--pes-space-md) var(--pes-space-sm); align-items: start; } @media (min-width: 900px) { .barmo-pesquisa .cotacao-card-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 0.6fr 2fr; } .barmo-pesquisa .cotacao-field--sku { grid-column: 1 / -1; } .barmo-pesquisa .cotacao-field--link { grid-column: span 2; } } .barmo-pesquisa .cotacao-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .barmo-pesquisa .cotacao-field-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pes-muted); } .barmo-pesquisa .cotacao-field input, .barmo-pesquisa .cotacao-field select, .barmo-pesquisa .cotacao-field textarea { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid var(--pes-border); border-radius: 8px; font-size: 14px; color: var(--pes-ink); background: var(--pes-paper); } .barmo-pesquisa .cotacao-field textarea { min-height: 56px; resize: vertical; font-size: 13px; } .barmo-pesquisa .cotacao-field input.pre-sku-draft { font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; } .barmo-pesquisa .cotacao-field input.pre-total { font-weight: 800; color: var(--pes-brand); background: var(--pes-surface); } .barmo-pesquisa .cotacao-sku-row, .barmo-pesquisa .cotacao-link-row { display: flex; gap: var(--pes-space-xs); align-items: stretch; } .barmo-pesquisa .cotacao-sku-row input, .barmo-pesquisa .cotacao-link-row input { flex: 1; min-width: 0; } .barmo-pesquisa .cotacao-card-footer { display: grid; grid-template-columns: 1fr auto auto; gap: var(--pes-space-md); align-items: end; padding-top: var(--pes-space-sm); border-top: 1px solid var(--pes-border); } @media (max-width: 720px) { .barmo-pesquisa .cotacao-card-footer { grid-template-columns: 1fr; } } .barmo-pesquisa .cotacao-card-total { display: flex; flex-direction: column; gap: 6px; min-width: 110px; } .barmo-pesquisa .cotacao-total-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pes-muted); } .barmo-pesquisa .cotacao-card-actions { display: flex; flex-direction: column; gap: var(--pes-space-xs); align-items: stretch; min-width: 180px; } /* Botões cotação — estados claros (Cap 12) */ .barmo-pesquisa .btn-cotacao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 8px 14px; border: 1px solid transparent; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1.2; cursor: pointer; white-space: nowrap; width: auto; opacity: 1; pointer-events: auto; transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease; } .barmo-pesquisa .btn-cotacao:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); } .barmo-pesquisa .btn-cotacao:active:not(:disabled) { transform: translateY(0); } .barmo-pesquisa .btn-cotacao--accent { background: var(--pes-accent); color: #2f2300; border-color: #c9922e; box-shadow: 0 3px 10px rgba(217, 164, 65, 0.35); } .barmo-pesquisa .btn-cotacao--navy { background: var(--pes-brand); color: #fff; border-color: #0f2a42; box-shadow: 0 3px 10px rgba(24, 59, 91, 0.28); } .barmo-pesquisa .btn-cotacao--primary { background: var(--pes-brand); color: #fff; border-color: #0f2a42; box-shadow: 0 4px 12px rgba(24, 59, 91, 0.3); } .barmo-pesquisa .btn-cotacao--unlock { background: #fff; color: var(--pes-brand); border-color: var(--pes-border); box-shadow: none; } .barmo-pesquisa .btn-cotacao--unlock:hover { border-color: var(--pes-accent); background: #fff9ed; } .barmo-pesquisa .btn-cotacao--danger-ghost { background: transparent; color: #b91c1c; border-color: #fecaca; } .barmo-pesquisa .btn-cotacao--danger-ghost:hover { background: #fef2f2; } .barmo-pesquisa .btn-cotacao:disabled, .barmo-pesquisa .btn-cotacao.btn-gestor-locked { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; filter: none; } .barmo-pesquisa .cotacao-card .btn-cotacao:not(:disabled):not(.btn-gestor-locked) { opacity: 1; } /* ── Modal SKU — opções pós-criação ── */ .barmo-pesquisa .sku-post-options { margin: var(--pes-space-md) 0; padding: var(--pes-space-md); border-radius: var(--pes-radius-md); background: var(--pes-soft); border: 1px solid var(--pes-border); } .barmo-pesquisa .sku-post-options-title { margin: 0 0 var(--pes-space-sm); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pes-muted); } .barmo-pesquisa .sku-post-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pes-space-xs); } @media (max-width: 560px) { .barmo-pesquisa .sku-post-options-grid { grid-template-columns: 1fr; } } .barmo-pesquisa .sku-post-option { position: relative; } .barmo-pesquisa .sku-post-option input { position: absolute; opacity: 0; pointer-events: none; } .barmo-pesquisa .sku-post-option label { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--pes-space-sm); border: 2px solid var(--pes-border); border-radius: var(--pes-radius-md); background: var(--pes-paper); cursor: pointer; text-align: center; font-size: 11px; font-weight: 800; color: var(--pes-muted); transition: border-color 0.15s ease, background 0.15s ease; } .barmo-pesquisa .sku-post-option input:checked + label { border-color: var(--pes-brand); background: var(--pes-soft); color: var(--pes-brand); } .barmo-pesquisa .sku-post-option-icon { font-size: 18px; } .barmo-pesquisa .sku-modal-map th { background: var(--pes-soft); } .barmo-pesquisa .sku-modal-links a { color: var(--pes-brand); font-weight: 800; } /* ── Config — ferramentas gestor colapsadas ── */ .barmo-pesquisa .config-gestor-tools { margin-top: var(--pes-space-md); } .barmo-pesquisa .config-gestor-tools summary { font-weight: 800; font-size: 12px; color: var(--pes-muted); cursor: pointer; padding: var(--pes-space-sm) 0; } /* Legacy aliases (compatibilidade JS) */ .barmo-pesquisa .preorc-gestor-bar { border-color: var(--pes-border); background: var(--pes-soft); } .barmo-pesquisa .preorc-gestor-bar.is-unlocked { border-color: #86efac; background: #f0fdf4; } .barmo-pesquisa .preorc-subtabs button.active { background: var(--pes-brand); border-color: var(--pes-brand); color: #fff; } @media (prefers-reduced-motion: reduce) { .barmo-pesquisa .home-card, .barmo-pesquisa .compras-step, .barmo-pesquisa .item-card { transition: none; } }