.mockup-showcase-container{display:flex;flex-direction:column;gap:3.5rem}.mockup-item-wrap{display:flex;flex-direction:column;gap:1.25rem}.mockup-header-info{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem}.mockup-title-area h3{font-family:var(--font-heading);font-size:clamp(1.25rem,2.2vw,1.55rem);color:var(--color-heading);margin-bottom:.35rem}.mockup-title-area p{font-size:var(--font-size-sm);color:var(--color-text-muted);max-width:620px}.mockup-badge-example{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .85rem;background-color:var(--color-demo-bg);color:var(--color-demo-text);border:1px solid var(--color-demo-border);border-radius:var(--radius-pill);font-size:.75rem;font-weight:600;letter-spacing:.02em;white-space:nowrap}.mockup-badge-dot{width:6px;height:6px;border-radius:50%;background-color:currentColor}.mockup-window{background-color:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 16px 40px #0f4c5c14;overflow:hidden;transition:box-shadow var(--transition-normal)}[data-theme=dark] .mockup-window{box-shadow:0 20px 48px #0006;border-color:#ffffff1f}.mockup-window-bar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;background-color:var(--color-bg-surface);border-bottom:1px solid var(--color-border)}.mockup-window-controls{display:flex;gap:6px;align-items:center}.mockup-control-dot{width:10px;height:10px;border-radius:50%}.mockup-control-dot.red{background-color:#ff5f56}.mockup-control-dot.yellow{background-color:#ffbd2e}.mockup-control-dot.green{background-color:#27c93f}.mockup-window-title{font-family:var(--font-heading);font-size:.8125rem;font-weight:500;color:var(--color-text-muted)}.mockup-window-actions{display:flex;gap:.5rem}.mockup-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem;background-color:var(--color-bg-card);border-bottom:1px solid var(--color-border);flex-wrap:wrap}.mockup-search-box{display:flex;align-items:center;gap:.5rem;padding:.45rem .85rem;background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.8125rem;color:var(--color-text-muted);min-width:240px}.mockup-filter-chips{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.mockup-chip{padding:.3rem .65rem;font-size:.75rem;font-weight:500;border-radius:var(--radius-pill);border:1px solid var(--color-border);background-color:var(--color-bg-surface);color:var(--color-text-muted)}.mockup-chip.active{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.mockup-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.mockup-table{width:100%;border-collapse:collapse;text-align:left;font-size:.875rem;min-width:680px}.mockup-table th{padding:.85rem 1.25rem;background-color:var(--color-bg-surface);color:var(--color-text-muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--color-border)}.mockup-table td{padding:1rem 1.25rem;border-bottom:1px solid var(--color-border-light);color:var(--color-text-main);vertical-align:middle}.mockup-table tbody tr:hover{background-color:#2ec4a60a}.mockup-os-code{font-family:monospace;font-weight:700;color:var(--color-primary)}.mockup-client-cell{display:flex;flex-direction:column}.mockup-client-name{font-weight:600;color:var(--color-heading)}.mockup-client-phone{font-size:.75rem;color:var(--color-text-muted)}.status-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .65rem;border-radius:var(--radius-pill);font-size:.75rem;font-weight:600;white-space:nowrap}.status-pill:before{content:"";width:6px;height:6px;border-radius:50%;background-color:currentColor}.status-aberta{background-color:#0f4c5c1f;color:var(--color-primary)}.status-andamento{background-color:#f59e0b26;color:#b45309}.status-aguardando{background-color:#ea580c26;color:#c2410c}.status-concluida{background-color:#2ec4a629;color:var(--color-accent-dark)}[data-theme=dark] .status-aberta{background-color:#3ddbba26;color:#3ddbba}[data-theme=dark] .status-andamento{background-color:#fbbf2433;color:#fbbf24}[data-theme=dark] .status-aguardando{background-color:#fb923c33;color:#fb923c}[data-theme=dark] .status-concluida{background-color:#2ec4a640;color:#3ddbba}.mockup-dashboard-body{padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.mockup-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.mockup-kpi-card{background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.15rem 1.25rem;display:flex;flex-direction:column;gap:.35rem}.mockup-kpi-label{font-size:.75rem;font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em}.mockup-kpi-value{font-family:var(--font-heading);font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;color:var(--color-heading);line-height:1.2}.mockup-kpi-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:600;color:var(--color-accent-dark);margin-top:.2rem}.mockup-chart-card{background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.mockup-chart-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}.mockup-chart-header h4{font-family:var(--font-heading);font-size:.95rem;color:var(--color-heading);margin:0}.mockup-chart-legend{display:flex;gap:1rem;font-size:.75rem;color:var(--color-text-muted)}.mockup-chart-legend-item{display:flex;align-items:center;gap:.4rem}.legend-color-box{width:10px;height:10px;border-radius:2px}.mockup-svg-chart{width:100%;height:220px;display:block}@media(max-width:900px){.mockup-kpi-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.mockup-header-info{flex-direction:column;align-items:flex-start}.mockup-toolbar{flex-direction:column;align-items:stretch}.mockup-search-box{width:100%;min-width:0}.mockup-kpi-grid{grid-template-columns:1fr;gap:.75rem}.mockup-dashboard-body{padding:1rem;gap:1rem}.mockup-chart-card{padding:1rem}.mockup-svg-chart{height:180px}}