/* Sectios.Web — estilos próprios (o restante vem do MudBlazor). */
html, body { font-family: "Segoe UI", "Inter", system-ui, -apple-system, Roboto, Arial, sans-serif; }

.sx-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.sx-appbar .mud-toolbar-appbar { gap: 8px; }
.sx-brand { display: flex; align-items: center; gap: 10px; font-weight: 750; letter-spacing: .06em; }
.sx-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--mud-palette-primary); color: #fff; display: grid; place-items: center; }
.sx-proj { display: flex; flex-direction: column; line-height: 1.15; margin-left: 14px; }
.sx-proj span { font-size: 12px; color: var(--mud-palette-text-secondary); }
.sx-kpis { display: flex; margin-right: 8px; }
.sx-kpi { display: flex; flex-direction: column; padding: 2px 16px; border-left: 1px solid var(--mud-palette-lines-default); min-width: 100px; }
.sx-kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--mud-palette-text-secondary); }
.sx-kpi b { font-size: 17px; font-variant-numeric: tabular-nums; }
.sx-kpi small { font-size: 11px; color: var(--mud-palette-text-secondary); }

.sx-drawer .mud-nav-link { border-radius: 9px; margin: 2px 8px; }
.sx-drawer .mud-nav-link.active { background: var(--mud-palette-primary) !important; color: #fff !important; }
.sx-nav-title { font-size: 11px !important; text-transform: uppercase; letter-spacing: .09em; color: #6f83a1 !important; padding: 14px 18px 6px; }
.sx-main { height: 100vh; }
.sx-page { padding: 22px 26px 40px; }

/* ---------- Editor de plano ---------- */
.plan-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; height: calc(100vh - 64px); }
.plan-list { border-right: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); overflow-y: auto; padding: 12px; }
.plan-side { border-left: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); overflow-y: auto; padding: 14px; }
.plan-center { display: flex; flex-direction: column; min-width: 0; background: var(--mud-palette-background-gray); }
.plan-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--mud-palette-surface); border-bottom: 1px solid var(--mud-palette-lines-default); flex-wrap: wrap; }
.plan-canvas { flex: 1; min-height: 0; overflow: auto; padding: 14px; outline: none; }
.plan-status { padding: 9px 14px; background: var(--mud-palette-surface); border-top: 1px solid var(--mud-palette-lines-default); min-height: 44px; display: flex; align-items: center; font-size: 13px; }
.plan-svg { display: block; touch-action: none; user-select: none; border-radius: 6px; }

.mat-title { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--mud-palette-text-secondary); margin: 14px 4px 8px; display: flex; align-items: center; gap: 6px; }
.thumb { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 8px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; margin-bottom: 8px; cursor: pointer; background: var(--mud-palette-surface); }
.thumb:hover { border-color: var(--mud-palette-text-secondary); }
.thumb.on { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent); }
.thumb svg { width: 76px; height: 52px; border-radius: 5px; background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); }
.thumb .meta { display: flex; flex-direction: column; justify-content: center; gap: 3px; font-size: 12px; min-width: 0; }
.thumb .meta b { font-size: 13px; }
.muted { color: var(--mud-palette-text-secondary); }
.unplaced { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px dashed var(--mud-palette-lines-inputs); border-radius: 8px; margin-bottom: 6px; cursor: pointer; font-size: 12.5px; }
.unplaced.on { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; border: 1px solid rgba(0,0,0,.25); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 13px; margin: 0; }
.kv dt { color: var(--mud-palette-text-secondary); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.side-sec { margin-bottom: 18px; }
.side-sec h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--mud-palette-text-secondary); margin: 0 0 8px; font-weight: 650; }
.issue { display: flex; gap: 8px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent); color: var(--mud-palette-error); font-size: 12.5px; margin-bottom: 6px; line-height: 1.4; }
.bar { height: 6px; border-radius: 3px; background: var(--mud-palette-lines-default); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--mud-palette-primary); }
.bar.low i { background: var(--mud-palette-warning); }
.bar.bad i { background: var(--mud-palette-error); }
.kbd { font-family: ui-monospace, Consolas, monospace; font-size: 11px; border: 1px solid var(--mud-palette-lines-inputs); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; }

/* ---------- Grade de peças e máquinas ---------- */
.cell-edited::after { content: ""; position: absolute; right: 2px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--mud-palette-warning); }
.cell-edited { position: relative; }
.center-card { cursor: pointer; border: 1px solid var(--mud-palette-lines-default); }
.center-card.on { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent); }
.dist { display: flex; height: 30px; border-radius: 8px; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); margin-top: 10px; }
.dist div { display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 650; min-width: 2px; transition: width .2s; }
.mud-table-cell .mud-input > input.mud-input-root { font-size: 13px; padding: 4px 0; }

/* ---------- Alternativas ---------- */
.alt-row { display: grid; grid-template-columns: 1.7fr repeat(4, 120px) 110px; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.alt-row.base { background: color-mix(in srgb, var(--mud-palette-text-secondary) 8%, transparent); }
.alt-row.best { background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); }
.alt-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); font-weight: 650; }
.delta { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.delta.good { background: color-mix(in srgb, var(--mud-palette-success) 18%, transparent); color: var(--mud-palette-success); }
.delta.bad { background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent); color: var(--mud-palette-error); }
.delta.zero { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.alt-row .bar { margin-top: 5px; }

/* ---------- Início e assistente de projeto novo ---------- */
.home-card { height: 100%; }
.wiz-steps { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.wiz-step { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); font-weight: 600; background: var(--mud-palette-surface); }
.wiz-step span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--mud-palette-lines-default); }
.wiz-step.on { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.wiz-step.on span { background: var(--mud-palette-primary); color: #fff; }
.wiz-step.done span { background: var(--mud-palette-success); color: #fff; }

/* ---------- Campos leves da grade de peças (HTML nativo: a grade tem centenas de linhas) ---------- */
.sx-cell { width: 100%; border: 0; border-bottom: 1px solid var(--mud-palette-lines-inputs); background: transparent; color: inherit; font: inherit; font-size: 13px; padding: 4px 2px; outline: none; }
.sx-cell:focus { border-bottom: 2px solid var(--mud-palette-primary); }
.sx-cell.wide { min-width: 300px; }
.sx-cell.num { min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
td:has(> .cell-edited) { position: relative; }

/* ---------- Login, usuário e licença ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: #0f1b2d; padding: 24px; }
.login-card { width: min(400px, 100%); background: #fff; border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.4); font-family: "Segoe UI", system-ui, sans-serif; }
.login-card h1 { margin: 6px 0 0; font-size: 24px; color: #101828; }
.login-card .muted { color: #667085; margin: 0 0 8px; }
.login-brand { display: flex; align-items: center; gap: 10px; font-weight: 750; letter-spacing: .06em; color: #0b7a6e; }
.login-brand .sx-logo { background: #0b7a6e; color: #fff; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.login-card label { font-size: 12px; font-weight: 650; color: #667085; margin-top: 8px; }
.login-card input[type=email], .login-card input[type=password] { padding: 11px 12px; border: 1px solid #d0d5dd; border-radius: 9px; font-size: 15px; }
.login-card input:focus { outline: 2px solid #a6dcd4; border-color: #0b7a6e; }
.login-card button { margin-top: 16px; padding: 12px; border: 0; border-radius: 9px; background: #0b7a6e; color: #fff; font-size: 15px; font-weight: 650; cursor: pointer; }
.login-card button:hover { filter: brightness(1.1); }
.login-erro { background: #fdecea; color: #b42318; padding: 10px 12px; border-radius: 9px; font-size: 13px; }
.sx-user { display: flex; flex-direction: column; line-height: 1.15; margin: 0 6px 0 12px; text-align: right; }
.sx-user span { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.sx-licenca { position: sticky; top: 0; z-index: 3; }

.sx-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.sx-fs[disabled] { opacity: .75; }
/* Cópia da base: o que muda no destino. */
.mud-simple-table table tbody td.sx-muda, td.sx-muda { font-weight: 600; color: var(--mud-palette-warning); }
.login-dica { font-size: 12px; color: #667085; }
.login-card a { color: #0b7a6e; }
.sx-calculo { display: flex; align-items: center; gap: 8px; margin-right: 16px; padding: 4px 8px 4px 12px; border-radius: 999px; background: #e7f4f1; color: #0b5c53; font-size: 13px; font-weight: 600; }
.login-ok { background: #e7f4f1; color: #0b5c53; padding: 10px 12px; border-radius: 9px; font-size: 13px; }

/* ---------- Impressão do plano de corte (/plano/imprimir) ----------
   Página nomeada "plano": o A4 deitado sem margem vale só para ela, não para outras impressões do sistema. */
.imp-barra { position: sticky; top: 0; z-index: 10; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 10px 18px;
    background: #1d2733; color: #fff; font: 14px "Segoe UI", Arial, sans-serif; }
.imp-barra label { display: flex; gap: 6px; align-items: center; }
.imp-barra select { padding: 4px 6px; border-radius: 4px; border: 0; font: inherit; }
.imp-dica { flex: 1; min-width: 220px; color: #c3cad4; font-size: 12.5px; }
.imp-botao { padding: 7px 14px; border-radius: 4px; border: 1px solid #8a96a6; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.imp-botao:hover { background: rgba(255,255,255,.1); }
.imp-principal { background: #0f766e; border-color: #0f766e; font-weight: 600; }
.imp-principal:hover { background: #115e59; }
.imp-doc { background: #d9dde3; padding: 18px 0; min-height: 100vh; }
.imp-pagina { page: plano; width: 297mm; min-height: 210mm; margin: 0 auto 18px; padding: 9mm 11mm; box-sizing: border-box; background: #fff;
    color: #111827; box-shadow: 0 1px 6px rgba(0,0,0,.25); font: 9.5pt "Segoe UI", Arial, sans-serif; break-after: page; }
.imp-pagina:last-child { break-after: auto; }
.imp-titulo { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #111827; padding-bottom: 6px; margin-bottom: 8px; }
.imp-titulo h1 { font-size: 20pt; margin: 0; }
.imp-sub { font-size: 12pt; color: #374151; }
.imp-emissao { text-align: right; font-size: 9pt; color: #374151; }
.imp-pagina h2 { font-size: 12.5pt; margin: 14px 0 4px; }
.imp-maquina { font-weight: 400; color: #4b5563; font-size: 9.5pt; margin-left: 6px; }
.imp-cab { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid #111827; padding-bottom: 3px; font-size: 11.5pt; }
.imp-chapa { font-weight: 700; font-size: 12pt; }
.imp-numeros { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 6px; color: #374151; }
.imp-alerta { color: #b42318; }
.imp-desenho { display: block; max-width: 100%; margin: 0 auto; }
.imp-corpo.lado { display: grid; grid-template-columns: auto 1fr; column-gap: 5mm; align-items: start; }
.imp-corpo.lado .imp-desenho { grid-column: 1; grid-row: 1; margin: 0; }
.imp-corpo.lado .imp-legenda { grid-column: 1; grid-row: 2; }
.imp-corpo.lado .imp-lista { grid-column: 2; grid-row: 1 / span 2; font-size: 7.8pt; }
.imp-corpo.lado .imp-lista td, .imp-corpo.lado .imp-lista th { padding: 1px 4px; }
.imp-desenho text { font-family: "Segoe UI", Arial, sans-serif; }
.imp-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 8pt; color: #4b5563; margin: 3px 0 6px; }
.imp-amostra { display: inline-block; width: 14px; height: 9px; border: 1px solid #9ca3af; vertical-align: middle; margin-right: 3px; }
.imp-tabela { width: 100%; border-collapse: collapse; }
.imp-tabela th, .imp-tabela td { border: 1px solid #cbd2da; padding: 2px 6px; text-align: left; }
.imp-tabela th { background: #f1f3f6; font-weight: 600; }
.imp-tabela .n { text-align: right; white-space: nowrap; }
.imp-tabela tr { break-inside: avoid; }
.imp-lista { font-size: 8.5pt; }
@page plano { size: A4 landscape; margin: 0; }
@media print {
    .nao-imprimir { display: none !important; }
    html, body { background: #fff !important; }
    .imp-doc { background: none; padding: 0; min-height: 0; }
    .imp-pagina { margin: 0; box-shadow: none; min-height: 0; }
    .imp-pagina, .imp-pagina * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}