/* ===================================================================== SIMPLIFOR DESIGN SYSTEM · sf-ds.css · v4 Fonte única de identidade visual. Prefixo sf- (não quebra o legado). Para tematizar um RAMO: defina --sf-primary (ex.: no /). v4: componentes "Centro de Comando" extraídos da capa do ramo (.sf-command-page, .sf-backlink, .sf-command-hero*, .sf-command-strip*). ===================================================================== */ /* ---------- 1. TOKENS ---------- */ :root{ /* Cor principal do ramo (ÚNICA coisa que muda por ramo) */ --sf-primary:#123a63; --sf-on-primary:#ffffff; /* Tons derivados — FALLBACK estático (sobrescrito por color-mix no @supports abaixo) */ --sf-primary-soft:#e9eff5; --sf-primary-tint:#d7e1eb; --sf-primary-line:#b8c8d8; --sf-primary-dark:#0d2c4d; /* CTA fixo da marca (dourado) — igual em toda a plataforma */ --sf-gold:#f0b43c; --sf-gold-2:#d99a24; --sf-on-gold:#7a2e2e; /* Neutros / texto / superfícies */ --sf-ink:#1f2733; --sf-ink-2:#5a6b7d; --sf-ink-3:#8a99a8; --sf-bg:#f4f6f9; --sf-surface:#ffffff; --sf-surface-2:#f7fafc; --sf-line:#e3e9f0; --sf-line-2:#eef2f7; /* Estados */ --sf-success:#1e7a3c; --sf-warn:#c8860a; --sf-danger:#c0392b; --sf-success-soft:#e8f6ec; --sf-warn-soft:#fdf3e3; --sf-danger-soft:#fdecea; /* Tipografia */ --sf-font-head:'Nunito',system-ui,Segoe UI,Roboto,sans-serif; --sf-font-body:'Inter',system-ui,Segoe UI,Roboto,sans-serif; --sf-fs-display:clamp(2.1rem,5.2vw,3.4rem); --sf-fs-h1:clamp(1.6rem,3.4vw,2.35rem); --sf-fs-h2:clamp(1.3rem,2.4vw,1.65rem); --sf-fs-h3:1.15rem; --sf-fs-body:1rem; --sf-fs-sm:.875rem; --sf-fs-xs:.75rem; --sf-lh:1.55; /* Espaçamento (base 4px) — ÚNICA escala em todo o site */ --sf-1:4px; --sf-2:8px; --sf-3:12px; --sf-4:16px; --sf-5:24px; --sf-6:32px; --sf-7:48px; --sf-8:64px; --sf-9:96px; /* Raio, sombra, layout */ --sf-r-sm:8px; --sf-r:12px; --sf-r-lg:18px; --sf-pill:999px; --sf-sh-1:0 2px 8px rgba(20,40,70,.06); --sf-sh-2:0 10px 30px rgba(20,40,70,.12); --sf-container:1180px; --sf-gutter:24px; --sf-nav-h:64px; } /* Progressive enhancement: quando color-mix existir, os tons derivam de --sf-primary */ @supports (color: color-mix(in srgb, red, blue)){ :root{ --sf-primary-soft:color-mix(in srgb, var(--sf-primary) 10%, #fff); --sf-primary-tint:color-mix(in srgb, var(--sf-primary) 18%, #fff); --sf-primary-line:color-mix(in srgb, var(--sf-primary) 30%, #fff); --sf-primary-dark:color-mix(in srgb, var(--sf-primary) 80%, #000); } } /* ---------- 2. BASE (escopo .sf-page, não afeta páginas legadas) ---------- */ .sf-page{font-family:var(--sf-font-body);color:var(--sf-ink);background:var(--sf-bg);line-height:var(--sf-lh);font-size:var(--sf-fs-body);-webkit-font-smoothing:antialiased} .sf-page *,.sf-page *::before,.sf-page *::after{box-sizing:border-box} /* ---------- 3. CONTAINER + GRID DE 12 COLUNAS ---------- */ .sf-container{max-width:var(--sf-container);margin-inline:auto;padding-inline:var(--sf-gutter);width:100%} .sf-section{padding-block:var(--sf-8)} .sf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sf-5)} .sf-col-1{grid-column:span 1}.sf-col-2{grid-column:span 2}.sf-col-3{grid-column:span 3} .sf-col-4{grid-column:span 4}.sf-col-5{grid-column:span 5}.sf-col-6{grid-column:span 6} .sf-col-7{grid-column:span 7}.sf-col-8{grid-column:span 8}.sf-col-9{grid-column:span 9} .sf-col-10{grid-column:span 10}.sf-col-11{grid-column:span 11}.sf-col-12{grid-column:span 12} /* Responsividade SEM versão separada: um único ponto onde as colunas empilham */ @media (max-width:760px){ .sf-grid{gap:var(--sf-4)} [class*="sf-col-"]{grid-column:1 / -1} } /* Grade de cards que se auto-ajusta (sem media query) */ .sf-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sf-5)} /* ---------- 4. TIPOGRAFIA CONSISTENTE ---------- */ .sf-display{font-family:var(--sf-font-head);font-weight:900;font-size:var(--sf-fs-display);line-height:1.03;letter-spacing:-.02em;color:var(--sf-ink);text-wrap:balance} .sf-h1{font-family:var(--sf-font-head);font-weight:900;font-size:var(--sf-fs-h1);line-height:1.1;letter-spacing:-.01em;color:var(--sf-ink)} .sf-h2{font-family:var(--sf-font-head);font-weight:800;font-size:var(--sf-fs-h2);line-height:1.15;color:var(--sf-ink)} .sf-h3{font-family:var(--sf-font-head);font-weight:800;font-size:var(--sf-fs-h3);color:var(--sf-ink)} .sf-lead{font-size:1.08rem;color:var(--sf-ink-2)} .sf-text{font-size:var(--sf-fs-body);color:var(--sf-ink)} .sf-muted{font-size:var(--sf-fs-sm);color:var(--sf-ink-2)} .sf-eyebrow{font-family:var(--sf-font-head);font-weight:800;font-style:italic;color:var(--sf-primary);font-size:var(--sf-fs-sm);letter-spacing:.02em} .sf-link{color:var(--sf-primary);text-decoration:none;font-weight:600} .sf-link:hover{text-decoration:underline} /* ---------- 5. BOTÕES ÚNICOS ---------- */ .sf-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--sf-font-head);font-weight:800;font-size:.95rem;line-height:1; padding:12px 22px;border-radius:var(--sf-r);border:1.5px solid transparent; cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s,background .12s,border-color .12s; white-space:nowrap; } .sf-btn:hover{transform:translateY(-1px)} .sf-btn:active{transform:translateY(0)} /* CTA do RAMO — acompanha a cor principal (botão de entrada do ramo) */ .sf-btn--cta{background:var(--sf-primary);color:var(--sf-on-primary)} .sf-btn--cta:hover{background:var(--sf-primary-dark)} /* BRAND — dourado institucional/comercial (NÃO é o padrão; uso reservado) */ .sf-btn--brand{background:linear-gradient(180deg,#f7cf76,var(--sf-gold) 60%,var(--sf-gold-2));color:var(--sf-on-gold);box-shadow:0 6px 16px rgba(180,120,20,.28)} .sf-btn--brand:hover{box-shadow:0 10px 22px rgba(180,120,20,.38)} /* aliases retrocompatíveis */ .sf-btn--primary{background:var(--sf-primary);color:var(--sf-on-primary)} .sf-btn--primary:hover{background:var(--sf-primary-dark)} .sf-btn--gold{background:linear-gradient(180deg,#f7cf76,var(--sf-gold) 60%,var(--sf-gold-2));color:var(--sf-on-gold);box-shadow:0 6px 16px rgba(180,120,20,.28)} /* Contornado */ .sf-btn--ghost{background:transparent;color:var(--sf-primary);border-color:var(--sf-primary-line)} .sf-btn--ghost:hover{background:var(--sf-primary-soft)} /* Neutro */ .sf-btn--soft{background:var(--sf-surface);color:var(--sf-ink);border-color:var(--sf-line)} .sf-btn--soft:hover{background:var(--sf-surface-2)} /* Estado ACTIVE (pressionado) por variante */ .sf-btn:active{transform:translateY(1px)} .sf-btn--cta:active,.sf-btn--primary:active{background:var(--sf-primary-dark)} .sf-btn--brand:active,.sf-btn--gold:active{filter:brightness(.95)} .sf-btn--ghost:active{background:var(--sf-primary-tint)} .sf-btn--soft:active{background:var(--sf-line-2)} /* Tamanhos */ .sf-btn--sm{padding:8px 14px;font-size:.84rem} .sf-btn--lg{padding:16px 34px;font-size:1.1rem} .sf-btn--block{width:100%} /* ---------- 6. CARDS PADRÃO ---------- */ .sf-card{background:var(--sf-surface);border:1px solid var(--sf-line);border-radius:var(--sf-r-lg);padding:var(--sf-5);box-shadow:var(--sf-sh-1)} .sf-card--hover{transition:transform .15s,box-shadow .15s} .sf-card--hover:hover{transform:translateY(-3px);box-shadow:var(--sf-sh-2)} .sf-card--accent{border-top:3px solid var(--sf-primary)} .sf-card__head{display:flex;align-items:center;gap:var(--sf-3);margin-bottom:var(--sf-3)} .sf-card__title{font-family:var(--sf-font-head);font-weight:800;font-size:1.05rem;color:var(--sf-ink)} .sf-card__body{color:var(--sf-ink-2);font-size:var(--sf-fs-sm)} .sf-card__foot{margin-top:var(--sf-4);padding-top:var(--sf-3);border-top:1px solid var(--sf-line-2);display:flex;gap:var(--sf-2);align-items:center} /* ---------- 7. HERO ÚNICO ---------- */ .sf-hero{ display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sf-7);align-items:center; background:linear-gradient(135deg,var(--sf-primary-soft),var(--sf-surface)); border:1px solid var(--sf-line);border-radius:var(--sf-r-lg); padding:clamp(var(--sf-5),4vw,var(--sf-8)); } .sf-hero__text{display:flex;flex-direction:column;gap:var(--sf-4);align-items:flex-start} .sf-hero__title{font-family:var(--sf-font-head);font-weight:900;font-size:var(--sf-fs-display);line-height:1.03;letter-spacing:-.02em;color:var(--sf-primary-dark);text-wrap:balance} .sf-hero__media{border-radius:var(--sf-r);overflow:hidden;aspect-ratio:4/3;background:var(--sf-primary-tint) center/cover no-repeat;min-height:220px;display:flex;align-items:center;justify-content:center;color:var(--sf-primary-dark);font-family:var(--sf-font-head);font-weight:800} .sf-hero__media img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:760px){ .sf-hero{grid-template-columns:1fr;gap:var(--sf-5)} } /* ---------- 8. MENU / NAV IDÊNTICO ---------- */ .sf-nav{position:sticky;top:0;z-index:900;height:var(--sf-nav-h);display:flex;align-items:center;gap:var(--sf-5); background:color-mix(in srgb,var(--sf-surface) 88%,transparent);backdrop-filter:blur(8px); border-bottom:1px solid var(--sf-line);padding-inline:var(--sf-gutter)} .sf-nav__brand{font-family:var(--sf-font-head);font-weight:900;color:var(--sf-primary);font-size:1.15rem;text-decoration:none;margin-right:auto;display:inline-flex;align-items:center;gap:8px} .sf-nav__links{display:flex;gap:var(--sf-4);align-items:center} .sf-nav__link{color:var(--sf-ink-2);text-decoration:none;font-weight:600;font-size:.92rem;padding:6px 2px;border-bottom:2px solid transparent} .sf-nav__link:hover{color:var(--sf-primary)} .sf-nav__link.is-active{color:var(--sf-primary);border-bottom-color:var(--sf-primary)} /* Nav mobile: NÃO usar apenas display:none. O menu responsivo completo (botão, abrir/fechar, foco, Escape, trava de rolagem) é responsabilidade do _shared.js e será migrado à parte. */ /* ---------- 9. ELEMENTOS DE APOIO (mesmos em todo lugar) ---------- */ .sf-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--sf-fs-xs);font-weight:800;padding:3px 9px;border-radius:var(--sf-pill);background:var(--sf-primary-soft);color:var(--sf-primary-dark)} .sf-badge--success{background:var(--sf-success-soft);color:var(--sf-success)} .sf-badge--warn{background:var(--sf-warn-soft);color:var(--sf-warn)} .sf-badge--danger{background:var(--sf-danger-soft);color:var(--sf-danger)} .sf-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--sf-fs-sm);font-weight:600;padding:6px 12px;border-radius:var(--sf-pill);background:var(--sf-surface);border:1px solid var(--sf-line);color:var(--sf-ink)} .sf-field{display:flex;flex-direction:column;gap:6px} .sf-label{font-size:var(--sf-fs-sm);font-weight:700;color:var(--sf-ink-2)} .sf-input{font-family:var(--sf-font-body);font-size:var(--sf-fs-body);color:var(--sf-ink);background:var(--sf-surface); border:1.5px solid var(--sf-line);border-radius:var(--sf-r);padding:11px 14px;width:100%;transition:border-color .12s,box-shadow .12s} .sf-input:focus{outline:none;border-color:var(--sf-primary);box-shadow:0 0 0 3px var(--sf-primary-soft)} .sf-table{width:100%;border-collapse:collapse;font-size:var(--sf-fs-sm)} .sf-table th,.sf-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--sf-line)} .sf-table th{font-family:var(--sf-font-head);color:var(--sf-ink);background:var(--sf-surface-2)} .sf-table tr:hover td{background:var(--sf-surface-2)} /* ---------- 10. ACESSIBILIDADE E ESTADOS ---------- */ /* Foco visível por teclado (não aparece no clique de mouse) */ .sf-btn:focus-visible,.sf-nav__link:focus-visible,.sf-link:focus-visible,.sf-chip:focus-visible,.sf-input:focus-visible,.sf-backlink:focus-visible{ outline:3px solid var(--sf-primary);outline-offset:2px;border-radius:var(--sf-r-sm)} /* Desabilitado */ .sf-btn:disabled,.sf-btn[disabled],.sf-btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none;box-shadow:none;transform:none} /* Área de toque mínima no mobile (44px) sem inchar o desktop */ @media (pointer:coarse){ .sf-btn,.sf-input,.sf-nav__link{min-height:44px} } /* Carregando (spinner no botão) */ .sf-btn.is-loading{color:transparent !important;position:relative;pointer-events:none} .sf-btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:sf-spin .6s linear infinite;color:#fff} @keyframes sf-spin{to{transform:rotate(360deg)}} /* Erro em formulário */ .sf-input--error{border-color:var(--sf-danger)} .sf-input--error:focus{box-shadow:0 0 0 3px var(--sf-danger-soft)} .sf-field__error{color:var(--sf-danger);font-size:var(--sf-fs-xs);font-weight:700} /* Skeleton de carregamento */ .sf-skeleton{background:linear-gradient(90deg,var(--sf-line-2),var(--sf-surface-2),var(--sf-line-2));background-size:200% 100%;animation:sf-shimmer 1.2s ease-in-out infinite;border-radius:var(--sf-r-sm);min-height:14px} @keyframes sf-shimmer{to{background-position:-200% 0}} /* Respeita quem pede menos movimento */ @media (prefers-reduced-motion:reduce){ .sf-page *,.sf-btn,.sf-card--hover{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} .sf-btn:hover,.sf-card--hover:hover{transform:none} } /* ---------- 11. UTILITÁRIOS MÍNIMOS (usam a escala de espaçamento) ---------- */ .sf-stack>*+*{margin-top:var(--sf-4)} .sf-stack-sm>*+*{margin-top:var(--sf-2)} .sf-row{display:flex;gap:var(--sf-3);align-items:center;flex-wrap:wrap} .sf-center{text-align:center} .sf-mt-6{margin-top:var(--sf-6)} .sf-mb-6{margin-bottom:var(--sf-6)} .sf-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ===================================================================== 12. CENTRO DE COMANDO · componentes reutilizáveis da capa de ramo Tematizados por --sf-primary. O fundo temático usa --fundo (definido pelo script da página, com fallback para o token do DS). Somente a COMPOSIÇÃO específica (mosaico) permanece na página. ===================================================================== */ /* Página temática (fundo suave que acompanha a cor do ramo) */ .sf-command-page{ min-height:100vh;display:flex;flex-direction:column; padding:22px clamp(16px,4vw,54px); background: radial-gradient(circle at 22% 18%,rgba(255,255,255,.5),transparent 55%), radial-gradient(circle at 85% 90%,rgba(255,255,255,.32),transparent 50%), var(--fundo,var(--sf-bg)); transition:background .25s; } /* Link "voltar" translúcido (reutilizável em páginas de comando) */ .sf-backlink{align-self:flex-start;display:inline-flex;align-items:center;gap:7px; background:rgba(255,255,255,.7);color:#3a4656;border:none;border-radius:var(--sf-r-sm); padding:9px 15px;font-family:var(--sf-font-body);font-size:.9rem;font-weight:700; cursor:pointer;text-decoration:none;box-shadow:var(--sf-sh-1);backdrop-filter:blur(4px); transition:background .15s,transform .15s} .sf-backlink:hover{background:#fff;transform:translateY(-1px)} /* HERO de comando: conteúdo à esquerda + mídia/composição à direita */ .sf-command-hero{flex:1;display:grid; grid-template-columns:minmax(280px,.86fr) minmax(0,1.14fr); gap:clamp(var(--sf-5),4vw,var(--sf-7)) clamp(var(--sf-5),4vw,var(--sf-8)); align-items:center;max-width:var(--sf-container);width:100%;margin:0 auto;padding:16px 0 8px} .sf-command-hero__content{display:flex;flex-direction:column;gap:var(--sf-4);align-items:flex-start} .sf-command-hero__eyebrow{font-family:var(--sf-font-head);font-weight:800;letter-spacing:.06em; text-transform:uppercase;font-size:.76rem;color:var(--sf-primary);display:inline-flex;align-items:center; gap:7px;background:var(--sf-primary-soft);padding:6px 12px;border-radius:var(--sf-pill)} .sf-command-hero__eyebrow::before{content:"◆";font-size:.72em} .sf-command-hero__title{font-family:var(--sf-font-head);font-weight:900;line-height:1.03; font-size:clamp(2.2rem,5.4vw,3.7rem);letter-spacing:-.02em;color:var(--sf-primary-dark);text-wrap:balance} .sf-command-hero__support{font-size:clamp(.94rem,1.6vw,1.1rem);font-weight:600;line-height:1.5; max-width:38ch;color:var(--sf-primary-dark);opacity:.82} .sf-command-hero__support:empty{display:none} .sf-command-hero__actions{display:flex;gap:var(--sf-3);flex-wrap:wrap;margin-top:var(--sf-2)} .sf-command-hero__media{width:100%} /* BARRA de indicadores (translúcida, base para conteúdo estático ou dinâmico) */ .sf-command-strip{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--sf-3) var(--sf-6); align-items:center;justify-content:center;background:rgba(255,255,255,.55);backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.8);border-radius:var(--sf-r-lg);padding:14px 20px;box-shadow:var(--sf-sh-1)} .sf-command-strip[hidden]{display:none} .sf-command-strip__item{display:inline-flex;align-items:center;gap:8px;font-size:.86rem; font-weight:600;color:var(--sf-primary-dark)} .sf-command-strip__icon{width:20px;height:20px;flex:none;display:inline-flex;color:var(--sf-primary)} .sf-command-strip__icon svg{width:100%;height:100%;display:block} @media (max-width:900px){ .sf-command-hero{grid-template-columns:1fr;gap:var(--sf-5);padding-top:6px} } @media (max-width:560px){ .sf-command-page{padding:16px} .sf-command-hero__actions .sf-btn{flex:1} } /* ===================================================================== 13. CENTRO DE COMANDO COMERCIAL · componentes reutilizáveis Extraídos do portal-ramo.html (homologado). Autocontidos em tokens --sf-*, tematizados por --sf-primary. Reutilizáveis em inteligência, comparador, melhor-compra, painéis de fornecedor/admin e ramos. ===================================================================== */ /* Casca (largura + respiro do bloco de comando) */ .sf-command-shell{max-width:1280px;margin-inline:auto;padding:22px 14px 4px} /* Cabeçalho do bloco */ .sf-command-header{margin-bottom:6px} .sf-command-header__sub{color:var(--sf-ink-2);font-size:.95rem;margin-top:8px;max-width:62ch} /* Faixa de status (real=oculta · demo · indisponível/sem ramo) */ .sf-command-status{border-radius:14px;padding:12px 16px;font-weight:700;font-size:.92rem;margin-bottom:14px} .sf-command-status[hidden]{display:none} .sf-command-status--demo{background:#fdf3e3;color:#8a6512;border:1px solid #f0d9a8} .sf-command-status--off{background:#fdecea;color:#8a2b22;border:1px solid #f2c4bd} .sf-command-status--ok{background:var(--sf-success-soft);color:var(--sf-success);border:1px solid #b7e0c2} /* Seção + título + "chip" de contexto (ex.: retrato de agora) */ .sf-command-section{margin:22px 0} .sf-command-section[hidden]{display:none} .sf-command-section>h2{font-family:var(--sf-font-head);font-size:1.05rem;color:var(--sf-ink);margin-bottom:10px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .sf-command-hint{font-weight:700;font-size:.72rem;color:var(--sf-ink-2);text-transform:uppercase;letter-spacing:.6px;background:var(--sf-line-2);padding:2px 8px;border-radius:var(--sf-pill)} /* Métricas (retrato factual) — cada card é .sf-card.sf-command-metric */ .sf-command-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sf-3)} .sf-command-metrics .sf-skeleton{height:64px;border-radius:16px} .sf-command-metric{padding:14px 16px} .sf-command-metric__num{font-family:var(--sf-font-head);font-weight:900;font-size:1.7rem;color:var(--sf-primary-dark);line-height:1} .sf-command-metric__label{font-size:.8rem;color:var(--sf-ink-2);margin-top:5px} /* Ações principais (rotas) */ .sf-command-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sf-3)} .sf-command-action{display:flex;align-items:center;gap:12px;cursor:pointer;text-decoration:none;text-align:left;background:var(--sf-surface);border:1px solid var(--sf-line);border-radius:18px;padding:14px 16px;font-family:inherit;transition:transform .12s,box-shadow .12s,border-color .12s} .sf-command-action:hover{transform:translateY(-2px);box-shadow:var(--sf-sh-2);border-color:var(--sf-primary)} .sf-command-action:focus-visible{outline:3px solid var(--sf-primary);outline-offset:2px} .sf-command-action__icon{width:42px;height:42px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--sf-primary-soft);color:var(--sf-primary)} .sf-command-action__icon svg{width:22px;height:22px} .sf-command-action__title{display:block;font-family:var(--sf-font-head);font-weight:800;color:var(--sf-ink);font-size:.98rem} .sf-command-action__desc{display:block;font-size:.76rem;color:var(--sf-ink-2);margin-top:2px} /* Oportunidades (retrato de agora) — cada card é .sf-card.sf-card--accent.sf-command-opportunity */ .sf-command-opportunities{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sf-3)} .sf-command-opportunity__label{font-size:.72rem;color:var(--sf-ink-2);text-transform:uppercase;letter-spacing:.6px;font-weight:800} .sf-command-opportunity__value{font-family:var(--sf-font-head);font-weight:800;color:var(--sf-ink);margin-top:5px;font-size:.98rem;line-height:1.3} /* Estado vazio (dados insuficientes) */ .sf-command-empty{color:var(--sf-ink-2);font-size:.9rem;background:var(--sf-surface-2);border-radius:var(--sf-r);padding:14px 16px} /* Grade de cards de orientação/novidades — cada card é .sf-card */ .sf-command-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sf-3)} @media (max-width:600px){ .sf-command-metric__num{font-size:1.45rem} } @media (prefers-reduced-motion:reduce){ .sf-command-action{transition:none} .sf-command-action:hover{transform:none} } /* ===================================================================== Dialog (sf-dlg) — componente oficial. Promovido do carrinho A3 (Fase 2.1b), tokenizado para --sf-* (tematiza por ramo). SÓ o visual reutilizável: backdrop + container + título + linha/rótulo de corpo + ações + botões. Conteúdo específico (itens do pedido, contato, aviso comercial) NÃO entra aqui — é composição da página. Comportamento acessível (foco preso, Escape, retorno de foco, inert, scroll lock, prevenção de empilhamento) fica no JS do consumidor. ===================================================================== */ .sf-dlg-bg{position:fixed;inset:0;background:color-mix(in srgb, var(--sf-primary) 55%, transparent);display:flex;align-items:center;justify-content:center;padding:18px;z-index:1000} .sf-dlg{background:var(--sf-surface);border-radius:var(--sf-r-lg);max-width:440px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--sf-sh-2);padding:22px 22px 18px} .sf-dlg-titulo{font-family:var(--sf-font-head);font-size:1.15rem;font-weight:800;color:var(--sf-primary);margin:0 0 10px} /* O título recebe foco programático ao abrir (anuncia o diálogo). Foco visível, porém integrado ao DS (não o outline padrão do navegador). */ .sf-dlg-titulo:focus{outline:3px solid color-mix(in srgb, var(--sf-primary) 45%, transparent);outline-offset:4px;border-radius:var(--sf-r-sm)} .sf-dlg .sf-dlg-row{font-size:.9rem;color:var(--sf-ink);margin:6px 0} .sf-dlg .sf-dlg-label{font-size:.74rem;font-weight:700;color:var(--sf-ink-3);text-transform:uppercase;letter-spacing:.02em} .sf-dlg .sf-dlg-acoes{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px} .sf-dlg-btn{border:none;border-radius:var(--sf-r-sm);padding:10px 18px;font-size:.88rem;font-weight:700;cursor:pointer;font-family:inherit} .sf-dlg-btn-primario{background:var(--sf-success);color:#fff} .sf-dlg-btn-primario:hover{background:color-mix(in srgb, var(--sf-success) 85%, #fff)} .sf-dlg-btn-primario:disabled{opacity:.45;cursor:not-allowed} .sf-dlg-btn-secundario{background:var(--sf-primary-soft);color:var(--sf-primary)} .sf-dlg-btn-link{background:var(--sf-primary);color:#fff;text-decoration:none;display:inline-block}