/* Componentes visuais genéricos do Design System. */
.jj-surface{background:var(--jj-color-surface-1);border:1px solid var(--jj-color-border);border-radius:var(--jj-radius-md)}
.jj-surface--subtle{background:var(--jj-color-surface-2)}.jj-surface--raised{box-shadow:var(--jj-shadow-md)}.jj-surface--brand{background:var(--jj-color-brand-surface);border-color:var(--jj-color-brand-surface);color:var(--jj-color-text-inverse)}
.jj-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--jj-space-2);min-height:44px;padding:var(--jj-space-3) var(--jj-space-5);border:1px solid transparent;border-radius:var(--jj-radius-md);background:var(--jj-color-brand-surface);color:var(--jj-color-text-inverse);font:var(--jj-weight-bold) var(--jj-text-sm)/1 var(--jj-font-body);cursor:pointer;transition:background-color var(--jj-transition),border-color var(--jj-transition),color var(--jj-transition),transform var(--jj-transition)}
.jj-button:hover{background:var(--jj-color-accent-strong)}.jj-button:active{transform:translateY(1px)}
.jj-button--secondary{background:var(--jj-color-surface-1);border-color:var(--jj-color-primary);color:var(--jj-color-primary)}.jj-button--ghost{background:transparent;border-color:var(--jj-color-border);color:var(--jj-color-text)}.jj-button--danger{background:var(--jj-color-danger)}
.jj-button--sm{min-height:36px;padding:var(--jj-space-2) var(--jj-space-4);font-size:var(--jj-text-xs)}.jj-button--lg{min-height:52px;padding:var(--jj-space-4) var(--jj-space-6);font-size:var(--jj-text-base)}
.jj-button[disabled],.jj-button[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}.jj-button[aria-busy="true"]{cursor:progress}
.jj-card{display:flex;flex-direction:column;background:var(--jj-color-surface-1);border:1px solid var(--jj-color-border);border-radius:var(--jj-radius-md);overflow:hidden}.jj-card__header,.jj-card__body,.jj-card__footer{padding:var(--jj-space-5)}.jj-card__body{flex:1}.jj-card__header+.jj-card__body,.jj-card__body+.jj-card__footer{border-top:1px solid var(--jj-color-border)}
.jj-card--interactive{transition:transform var(--jj-transition),box-shadow var(--jj-transition)}.jj-card--interactive:hover{transform:translateY(-3px);box-shadow:var(--jj-shadow-md)}.jj-card--featured{border-top:4px solid var(--jj-color-accent)}
.jj-badge{display:inline-flex;align-items:center;width:max-content;padding:var(--jj-space-1) var(--jj-space-3);border:1px solid var(--jj-color-border);border-radius:var(--jj-radius-pill);background:var(--jj-color-surface-2);color:var(--jj-color-text);font-size:var(--jj-text-xs);font-weight:var(--jj-weight-bold);line-height:1.4}
.jj-badge--success{background:var(--jj-color-success-surface);border-color:var(--jj-color-success-border);color:var(--jj-color-success)}.jj-badge--warning{background:var(--jj-color-warning-surface);border-color:var(--jj-color-warning-border);color:var(--jj-color-warning)}.jj-badge--danger{background:var(--jj-color-danger-surface);border-color:var(--jj-color-danger-border);color:var(--jj-color-danger)}.jj-badge--info{background:var(--jj-color-information-surface);border-color:var(--jj-color-information-border);color:var(--jj-color-information)}
.jj-meta{display:flex;flex-wrap:wrap;gap:var(--jj-space-2) var(--jj-space-4);color:var(--jj-color-text-muted);font-size:var(--jj-text-sm)}.jj-meta__item{display:inline-flex;align-items:center;gap:var(--jj-space-2)}.jj-meta__item+.jj-meta__item::before{content:"·";color:var(--jj-color-border);margin-inline-end:var(--jj-space-2)}
.jj-divider{width:100%;height:1px;border:0;background:var(--jj-color-border);margin-block:var(--jj-space-6)}
.jj-link{color:var(--jj-color-primary);font-weight:var(--jj-weight-bold);text-decoration:underline;text-underline-offset:.2em}.jj-link--interface{text-decoration:none}.jj-link--muted{color:var(--jj-color-text-muted);font-weight:var(--jj-weight-normal)}