.wf-ds { max-width: 1400px; margin: 0 auto; padding: var(--wf-space-6); }
.wf-ds-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--wf-space-5); }
.wf-ds-title { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }
.wf-ds-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--wf-border); }
.wf-ds-tab { padding: 9px 16px; border: none; background: transparent; color: var(--wf-text-muted);
    font-size: 14px; font-weight: 600; cursor: pointer; border-radius: var(--wf-radius-md) var(--wf-radius-md) 0 0; }
.wf-ds-tab:hover { background: var(--wf-hover); color: var(--wf-text); }
.wf-ds-tab.ativa { color: var(--wf-text); box-shadow: inset 0 -2px 0 var(--wf-brand-accent); }
.wf-ds-conteudo { padding-top: var(--wf-space-5); }

/* ---- Fundamentos ---- */
.wf-ds-sec { margin-bottom: var(--wf-space-8); }
.wf-ds-sec h2 { font-size: 16px; font-weight: 600; margin: 0 0 var(--wf-space-4); }

.wf-ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--wf-space-3); }
.wf-ds-swatch { border: 1px solid var(--wf-border); border-radius: var(--wf-radius-md); overflow: hidden; background: var(--wf-surface); }
.wf-ds-swatch__chip { height: 48px; }
.wf-ds-swatch__label { padding: var(--wf-space-2) var(--wf-space-3); font-family: var(--wf-font-mono); font-size: 11px; color: var(--wf-text-muted); }
.wf-ds-swatch__valor { color: var(--wf-text-subtle); }

.wf-ds-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--wf-space-2); }
.wf-ds-icone { display: flex; flex-direction: column; align-items: center; padding: var(--wf-space-3) var(--wf-space-2); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-md); background: var(--wf-surface); }
.wf-ds-icone__label { font-family: var(--wf-font-mono); font-size: 10px; margin-top: var(--wf-space-2); color: var(--wf-text-subtle); }

.wf-ds-espacamento { display: flex; flex-direction: column; gap: var(--wf-space-2); }
.wf-ds-espacamento__linha { display: flex; align-items: center; gap: var(--wf-space-3); }
.wf-ds-espacamento__nome { font-family: var(--wf-font-mono); font-size: 11px; color: var(--wf-text-muted); width: 110px; flex-shrink: 0; }
.wf-ds-espacamento__bar { height: 12px; background: var(--wf-brand-accent); border-radius: var(--wf-radius-sm); display: inline-block; }
.wf-ds-espacamento__valor { font-family: var(--wf-font-mono); font-size: 11px; color: var(--wf-text-subtle); }

.wf-ds-motion { display: flex; flex-direction: column; gap: var(--wf-space-2); margin-bottom: var(--wf-space-3); }
.wf-ds-motion__linha { display: flex; justify-content: space-between; gap: var(--wf-space-4); padding: var(--wf-space-2) var(--wf-space-3); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-md); background: var(--wf-surface); }
.wf-ds-motion__contexto { font-size: 13px; color: var(--wf-text); }
.wf-ds-motion__valor { font-family: var(--wf-font-mono); font-size: 12px; color: var(--wf-text-muted); }

.wf-ds-nota { font-size: 12px; color: var(--wf-text-muted); margin: 0 0 var(--wf-space-4); }
.wf-ds-racional { margin: 0; padding: var(--wf-space-3) var(--wf-space-4); border-left: 3px solid var(--wf-warning); background: var(--wf-warning-bg); color: var(--wf-text-muted); font-size: 12px; border-radius: 0 var(--wf-radius-md) var(--wf-radius-md) 0; }

/* ---- ComponentDoc (anatomia de página de componente) ---- */
.wf-ds-doc { display: flex; flex-direction: column; }
.wf-ds-doc-head { margin-bottom: var(--wf-space-4); }
.wf-ds-doc-titulo { display: flex; align-items: center; gap: var(--wf-space-3); font-size: 20px; font-weight: 700; letter-spacing: -0.3px; color: var(--wf-text); }
.wf-ds-doc-status { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--wf-radius-pill); font-size: 11px; font-weight: 600; color: var(--wf-success); background: var(--wf-success-bg); }
.wf-ds-doc-status.backlog { color: var(--wf-warning); background: var(--wf-warning-bg); }
.wf-ds-doc-one { margin: var(--wf-space-2) 0 0; font-size: 13px; color: var(--wf-text-muted); }
.wf-ds-doc-depara { margin: var(--wf-space-1) 0 0; font-family: var(--wf-font-mono); font-size: 12px; color: var(--wf-text-subtle); }
.wf-ds-doc-sec { padding-top: var(--wf-space-4); margin-top: var(--wf-space-4); border-top: 1px solid var(--wf-border); }
.wf-ds-doc-lbl { margin-bottom: var(--wf-space-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--wf-text-subtle); }

/* ---- PropsTable ---- */
.wf-ds-props { width: 100%; border-collapse: collapse; font-size: 13px; }
.wf-ds-props th { text-align: left; padding: var(--wf-space-2) var(--wf-space-3); color: var(--wf-text-muted); font-weight: 600; border-bottom: 1px solid var(--wf-border); }
.wf-ds-props td { padding: var(--wf-space-2) var(--wf-space-3); border-bottom: 1px solid var(--wf-border); color: var(--wf-text); vertical-align: top; }
.wf-ds-props td code { font-family: var(--wf-font-mono); font-size: 12px; color: var(--wf-brand-accent-deep); }

/* ---- Snippet ---- */
.wf-ds-code { position: relative; background: var(--wf-bg-sunken); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-md); }
.wf-ds-code pre { margin: 0; padding: var(--wf-space-4); overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.wf-ds-code code { font-family: var(--wf-font-mono); font-size: 12px; color: var(--wf-text); }
.wf-ds-code-copy { position: absolute; top: var(--wf-space-2); right: var(--wf-space-2); padding: 2px 10px; font-size: 11px; font-weight: 600; color: var(--wf-text-muted); background: var(--wf-surface); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-sm); cursor: pointer; }
.wf-ds-code-copy:hover { background: var(--wf-hover); color: var(--wf-text); }

/* ---- Catálogo de Componentes (índice lateral) ---- */
.wf-ds-catalogo { display: flex; align-items: flex-start; gap: 0; }

.wf-ds-nav { width: 210px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px;
    padding-right: var(--wf-space-4); border-right: 1px solid var(--wf-border); }
.wf-ds-nav .grupo { margin: var(--wf-space-4) 0 var(--wf-space-1); padding: 0 var(--wf-space-2);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--wf-text-subtle); }
.wf-ds-nav .grupo:first-child { margin-top: 0; }
.wf-ds-nav-item { display: block; width: 100%; text-align: left; padding: 6px var(--wf-space-2);
    border: none; background: transparent; border-radius: var(--wf-radius-md); font-size: 13px;
    color: var(--wf-text); cursor: pointer; }
.wf-ds-nav-item:hover { background: var(--wf-hover); }
.wf-ds-nav-item.ativo { background: var(--wf-selected); color: var(--wf-selected-text); font-weight: 600; }
.wf-ds-nav-item.backlog { color: var(--wf-text-subtle); opacity: 0.7; }
.wf-ds-nav-item.backlog::after { content: " ·"; color: var(--wf-warning); }

.wf-ds-nav-conteudo { flex: 1; min-width: 0; padding-left: var(--wf-space-6); }

/* ---- Helpers de conteúdo de doc (usados pelos docs de componente) ---- */
.wf-ds-canvas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wf-space-3);
    padding: var(--wf-space-5); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-lg);
    background: var(--wf-surface-alt); }
.wf-ds-canvas.col { flex-direction: column; align-items: stretch; }
.wf-ds-canvas.start { justify-content: flex-start; align-items: flex-start; }
.wf-ds-canvas.pad-lg { padding: var(--wf-space-6); }

.wf-ds-caption { font-size: 12px; color: var(--wf-text-muted); margin: 0; }

.wf-ds-doiscol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wf-space-4); }
.wf-ds-usar, .wf-ds-evitar { padding: var(--wf-space-3) var(--wf-space-4); border-radius: var(--wf-radius-md); font-size: 13px; }
.wf-ds-usar { background: var(--wf-success-bg); color: var(--wf-text); }
.wf-ds-evitar { background: var(--wf-danger-bg); color: var(--wf-text); }
.wf-ds-usar ul, .wf-ds-evitar ul { margin: var(--wf-space-2) 0 0; padding-left: 18px; }

.wf-ds-lnk { color: var(--wf-brand-accent-deep); font-size: 13px; text-decoration: none; }
.wf-ds-lnk:hover { text-decoration: underline; }

/* Preview estático de Toast (mock — o real é criado via JS em wwwroot/js/toast.js) */
.wf-ds-toast-preview { max-width: 320px; background: var(--wf-bg-elevated); border: 1px solid var(--wf-border);
    border-left: 3px solid var(--wf-brand-accent); border-radius: var(--wf-radius-md); padding: var(--wf-space-3) var(--wf-space-4);
    box-shadow: var(--wf-shadow-lg); font-size: 13px; }

/* Preview representativo de Abas/TabBar (mock — o real depende de AbasService/UsoTelasService, tenant-scoped) */
.wf-ds-abas-mock { display: flex; align-items: stretch; height: 34px; background: var(--wf-bg-sunken);
    border: 1px solid var(--wf-border); border-radius: var(--wf-radius-md); overflow: hidden; }

/* ---- Padrões de Tela (receita + arquétipos) ---- */
.wf-ds-receita { display: flex; flex-direction: column; gap: var(--wf-space-4); margin-top: var(--wf-space-4); }
.wf-ds-receita__passo { display: flex; gap: var(--wf-space-4); padding: var(--wf-space-4); border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-lg); background: var(--wf-surface); font-size: 13px; color: var(--wf-text); }
.wf-ds-receita__passo ul { margin: var(--wf-space-2) 0 0; padding-left: 18px; }
.wf-ds-receita__passo li { margin-bottom: var(--wf-space-1); }
.wf-ds-receita__num { flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--wf-radius-pill); background: var(--wf-brand-accent);
    color: var(--wf-brand-navy); font-weight: 700; font-size: 13px; }

.wf-ds-checklist { display: flex; flex-direction: column; gap: var(--wf-space-1); margin: 0; padding-left: 18px;
    font-size: 13px; color: var(--wf-text); }

.wf-ds-arquetipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--wf-space-4); }
.wf-ds-arquetipo { display: flex; flex-direction: column; gap: var(--wf-space-2); padding: var(--wf-space-4);
    border: 1px solid var(--wf-border); border-radius: var(--wf-radius-lg); background: var(--wf-surface); }
.wf-ds-arquetipo h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--wf-text); }
.wf-ds-arquetipo__quando, .wf-ds-arquetipo__estrutura { margin: 0; font-size: 13px; color: var(--wf-text-muted); }