/** * BARMO Importação — design manual escopado (Fase 2) * ESCOPO: somente páginas com class="barmo-importacao" no . */ .barmo-importacao { --imp-brand: #102a43; --imp-brand-2: #1e5b8c; --imp-accent: #d9a441; --imp-accent-soft: #f4d27a; --imp-bg: #0b1220; --imp-bg-elevated: #111b2e; --imp-bg-card: #152238; --imp-ink: #e8eef6; --imp-ink-muted: #8b9cb3; --imp-ink-subtle: #5c6f88; --imp-line: rgba(255, 255, 255, 0.08); --imp-line-strong: rgba(255, 255, 255, 0.14); --imp-shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.32); --imp-ok: #3ecf8e; --imp-warn: #e8b84a; --imp-info: #5eb3f0; --imp-danger: #dc4646; --imp-space-md: 16px; --imp-space-lg: 24px; --imp-radius-md: 14px; --imp-radius-lg: 20px; } body.barmo-importacao { background: radial-gradient(ellipse 65% 40% at 100% 0%, rgba(217, 164, 65, 0.1), transparent 50%), radial-gradient(ellipse 60% 40% at 0% 0%, rgba(30, 91, 140, 0.16), transparent 55%), var(--imp-bg); color: var(--imp-ink); } .barmo-importacao .shell-header { border-bottom-color: var(--imp-line); } .barmo-importacao .shell-logo-mark { background: linear-gradient(145deg, #173b5d, var(--imp-brand)); color: var(--imp-accent); box-shadow: var(--imp-shadow-soft); } .barmo-importacao .shell-title { color: var(--imp-ink); } .barmo-importacao .shell-subtitle, .barmo-importacao .shell-date { color: var(--imp-ink-muted); } .barmo-importacao .shell-section-title { border-left-color: var(--imp-accent); color: var(--imp-ink); } .barmo-importacao .shell-section-hint { color: var(--imp-ink-subtle); } .barmo-importacao .alert-bar { background: rgba(30, 91, 140, 0.15); border-color: rgba(94, 179, 240, 0.2); color: var(--imp-ink-muted); } .barmo-importacao .alert-bar strong { color: var(--imp-info); } .barmo-importacao .import-piloto-limpo { background: rgba(62, 207, 142, 0.1); border-color: rgba(62, 207, 142, 0.28); } /* Assistente (Cap. 12) */ .barmo-importacao .assistente-importacao-real { border-color: rgba(217, 164, 65, 0.28); border-radius: var(--imp-radius-lg); background: linear-gradient(180deg, rgba(217, 164, 65, 0.06) 0%, transparent 48%); } .barmo-importacao .assistente-progress-bar { background: var(--imp-bg-elevated); border-color: var(--imp-line); } .barmo-importacao .assistente-progress-fill { background: linear-gradient(90deg, var(--imp-ok), var(--imp-accent)); } .barmo-importacao .assistente-step-card { background: var(--imp-bg-elevated); border-color: var(--imp-line); transition: border-color 0.16s ease, background 0.16s ease; } .barmo-importacao .assistente-step-card.is-done { border-color: rgba(62, 207, 142, 0.4); background: rgba(62, 207, 142, 0.06); } .barmo-importacao .assistente-step-num { background: rgba(217, 164, 65, 0.18); color: var(--imp-ink); } .barmo-importacao .assistente-step-card.is-done .assistente-step-num { background: rgba(62, 207, 142, 0.28); } .barmo-importacao .assistente-step-link { color: var(--imp-accent); } .barmo-importacao .assistente-step-link:focus-visible { outline: 2px solid var(--imp-accent); outline-offset: 2px; } /* Wizard */ .barmo-importacao .import-wizard-steps { background: var(--imp-bg-card); border-color: var(--imp-line); } .barmo-importacao .import-step-pill.is-active { border-color: rgba(217, 164, 65, 0.55); background: rgba(217, 164, 65, 0.12); color: var(--imp-ink); } .barmo-importacao .import-step-pill.is-done { color: var(--imp-ok); border-color: rgba(62, 207, 142, 0.35); } .barmo-importacao .import-panel { background: var(--imp-bg-card); border-color: var(--imp-line); } .barmo-importacao .import-source-card { background: var(--imp-bg-elevated); border-color: var(--imp-line-strong); } .barmo-importacao .import-source-card:hover:not(.is-disabled) { border-color: rgba(217, 164, 65, 0.45); } .barmo-importacao .import-source-card.is-selected { border-color: rgba(217, 164, 65, 0.65); box-shadow: 0 0 0 1px rgba(217, 164, 65, 0.25); } .barmo-importacao .import-source-card:focus-visible { outline: 2px solid var(--imp-accent); outline-offset: 2px; } .barmo-importacao .import-empty-state { border-color: var(--imp-line-strong); background: rgba(16, 42, 67, 0.35); color: var(--imp-ink-subtle); } /* Backup / persistência cards */ .barmo-importacao .import-confirm-box { border-color: rgba(217, 164, 65, 0.35); background: rgba(217, 164, 65, 0.08); } .barmo-importacao .import-safe-note { background: rgba(62, 207, 142, 0.1); border-color: rgba(62, 207, 142, 0.28); } .barmo-importacao .import-btn:focus-visible { outline: 2px solid var(--imp-accent); outline-offset: 2px; } .barmo-importacao .import-btn.primary { background: rgba(217, 164, 65, 0.22); border-color: rgba(217, 164, 65, 0.55); color: var(--imp-ink); } /* Extração diag cards */ .barmo-importacao .extracao-diag-card { background: var(--imp-bg-elevated); border-color: var(--imp-line); } .barmo-importacao .extracao-diag-card.is-found { border-color: rgba(62, 207, 142, 0.35); } .barmo-importacao .extracao-note { border-color: rgba(217, 164, 65, 0.35); background: rgba(217, 164, 65, 0.06); } .barmo-importacao .import-table th { background: var(--imp-brand); color: var(--imp-ink-muted); } /* Gate página inteira */ .barmo-importacao .sistema-gate.is-locked { border-color: var(--imp-line); background: rgba(16, 42, 67, 0.35); } .barmo-importacao .sistema-gate__form { background: rgba(16, 42, 67, 0.5); border-color: var(--imp-line); } .barmo-importacao .sistema-gate__input { background: var(--imp-bg-elevated); border-color: var(--imp-line-strong); color: var(--imp-ink); } .barmo-importacao .sistema-gate__submit { background: var(--imp-accent); border-color: var(--imp-accent); color: var(--imp-brand); } .barmo-importacao .sistema-gate__error { color: var(--imp-danger); } .barmo-importacao .shell-footer { border-top-color: var(--imp-line); color: var(--imp-ink-subtle); } @media (prefers-reduced-motion: reduce) { .barmo-importacao .assistente-progress-fill, .barmo-importacao .import-source-card { transition: none; } }