/* Controle de seções — cards, guia e desenhos técnicos.
   Os desenhos usam só --pf-diagram-*: são pranchas claras nos dois temas. */

/* ── Desenho técnico ─────────────────────────────────────────────────── */
.sc-fig { margin: .25rem 0 1.25rem; }
.sc-fig .sc-svg { display: block; width: 100%; height: auto; border: 1px solid var(--pf-border); border-radius: 14px; }
.sc-fig figcaption { margin-top: .6rem; color: var(--pf-text-2); font-size: var(--pf-text-sm); line-height: var(--pf-leading); }
.sc-strip { display: block; width: 100%; height: auto; margin: .75rem 0 .25rem; border: 1px solid var(--pf-border); border-radius: 12px; }

.sc-svg text { font-family: var(--pf-font-sans); fill: var(--pf-diagram-ink); }
.sc-svg .t-xs { font-size: 12px; }
.sc-svg .t-sm { font-size: 13.5px; }
.sc-svg .t-md { font-size: 15px; }
.sc-svg .t-strong { font-weight: 800; }
.sc-svg .t-soft { fill: var(--pf-diagram-ink-2); }
.sc-svg .t-applied { fill: var(--pf-diagram-applied-line); }
.sc-svg .t-cmd { fill: var(--pf-diagram-command); }
.sc-svg .t-ref { fill: var(--pf-diagram-reference); }
.sc-svg .t-overlap { fill: var(--pf-diagram-overlap); }
.sc-svg .t-gap { fill: var(--pf-diagram-gap); }
.sc-svg .t-halo { paint-order: stroke; stroke: var(--pf-diagram-paper); stroke-width: 4px; stroke-linejoin: round; }

.sc-svg .f-paper { fill: var(--pf-diagram-paper); }
.sc-svg .f-soil { fill: var(--pf-diagram-soil); }
.sc-svg .f-applied { fill: var(--pf-diagram-applied); }
.sc-svg .f-spraytint { fill: var(--pf-diagram-spray-tint); }
.sc-svg .f-spray { fill: var(--pf-diagram-spray); }
.sc-svg .f-seed { fill: var(--pf-diagram-seed); }
.sc-svg .f-tire { fill: var(--pf-diagram-bg-deep); }
.sc-svg .f-body { fill: var(--pf-diagram-body); }
.sc-svg .f-glass { fill: var(--pf-diagram-glass); }
.sc-svg .f-roof { fill: var(--pf-diagram-light); }
.sc-svg .f-metal { fill: var(--pf-diagram-metal); }
.sc-svg .f-tank { fill: var(--pf-diagram-tint); }
.sc-svg .f-hopper { fill: var(--pf-diagram-light); }
.sc-svg .f-light { fill: var(--pf-diagram-tint); }
.sc-svg .f-tube { fill: var(--pf-diagram-light); }
.sc-svg .f-white { fill: var(--pf-diagram-paper); }
.sc-svg .f-ink { fill: var(--pf-diagram-ink); }
.sc-svg .f-ink2 { fill: var(--pf-diagram-ink-2); }
.sc-svg .f-cmd { fill: var(--pf-diagram-command); }
.sc-svg .f-ref { fill: var(--pf-diagram-reference); }
.sc-svg .f-overlap { fill: var(--pf-diagram-overlap); }
.sc-svg .f-overlaptint { fill: var(--pf-diagram-overlap-tint); }
.sc-svg .f-gaptint { fill: var(--pf-diagram-gap-tint); }
.sc-svg .f-gapflag { fill: var(--pf-amber-400); }
.sc-svg .f-gapink { fill: var(--pf-diagram-gap); }
.sc-svg .f-screen { fill: var(--pf-diagram-screen); }
.sc-svg .f-screen2 { fill: var(--pf-diagram-screen-2); }
.sc-svg .f-glow { fill: var(--pf-diagram-glow); }
.sc-svg .f-stage1 { fill: var(--pf-diagram-ink-2); }
.sc-svg .f-stage2 { fill: var(--pf-diagram-command); }
.sc-svg .f-stage3 { fill: var(--pf-diagram-spray); }
.sc-svg .f-stage4 { fill: var(--pf-diagram-applied-line); }

.sc-svg .s-ink { stroke: var(--pf-diagram-ink); }
.sc-svg .s-ink2 { stroke: var(--pf-diagram-ink-2); }
.sc-svg .s-white { stroke: var(--pf-diagram-paper); }
.sc-svg .s-grille { stroke: var(--pf-diagram-light); stroke-width: 1.4; }
.sc-svg .s-applied { stroke: var(--pf-diagram-applied-line); }
.sc-svg .s-overlap { stroke: var(--pf-diagram-overlap); }
.sc-svg .s-gap { stroke: var(--pf-diagram-gap); }
.sc-svg .s-cmd { stroke: var(--pf-diagram-command); }
.sc-svg .s-ref { stroke: var(--pf-diagram-reference); }
.sc-svg .s-spray { stroke: var(--pf-diagram-spray); }
.sc-svg .s-soil2 { stroke: var(--pf-diagram-soil-2); }
.sc-svg .s-wire { stroke: var(--pf-diagram-wire); }
.sc-svg .s-grid { stroke: var(--pf-diagram-tint); stroke-width: 1; }
.sc-svg .dim { stroke-width: 1.8; }

/* Etiquetas, numeração e seta de deslocamento */
.sc-svg .pill rect { fill: var(--pf-diagram-paper); stroke-width: 1.8; }
.sc-svg .pill text { font-size: 13.5px; font-weight: 800; }
.sc-svg .p-ink rect { stroke: var(--pf-diagram-ink); }
.sc-svg .p-cmd rect { stroke: var(--pf-diagram-command); }   .sc-svg .p-cmd text { fill: var(--pf-diagram-command); }
.sc-svg .p-ref rect { stroke: var(--pf-diagram-reference); } .sc-svg .p-ref text { fill: var(--pf-diagram-reference); }
.sc-svg .p-overlap rect { stroke: var(--pf-diagram-overlap); } .sc-svg .p-overlap text { fill: var(--pf-diagram-overlap); }
.sc-svg .p-gap rect { stroke: var(--pf-diagram-gap); }       .sc-svg .p-gap text { fill: var(--pf-diagram-gap); }

.sc-svg .callout circle { fill: var(--pf-diagram-paper); stroke: var(--pf-diagram-ink); stroke-width: 2.4; }
.sc-svg .callout text { font-size: 12px; font-weight: 800; }
.sc-svg .c-cmd circle { stroke: var(--pf-diagram-command); }        .sc-svg .c-cmd text { fill: var(--pf-diagram-command); }
.sc-svg .c-ref circle { stroke: var(--pf-diagram-reference); }      .sc-svg .c-ref text { fill: var(--pf-diagram-reference); }
.sc-svg .c-applied circle { stroke: var(--pf-diagram-applied-line); } .sc-svg .c-applied text { fill: var(--pf-diagram-applied-line); }
.sc-svg .c-stage.s1 circle { stroke: var(--pf-diagram-ink-2); }
.sc-svg .c-stage.s2 circle { stroke: var(--pf-diagram-command); }   .sc-svg .c-stage.s2 text { fill: var(--pf-diagram-command); }
.sc-svg .c-stage.s3 circle { stroke: var(--pf-diagram-spray); }
.sc-svg .c-stage.s4 circle { stroke: var(--pf-diagram-applied-line); } .sc-svg .c-stage.s4 text { fill: var(--pf-diagram-applied-line); }

.sc-svg .travel line { stroke: var(--pf-diagram-ink-2); }
.sc-svg .travel path { fill: var(--pf-diagram-ink-2); }
.sc-svg .travel text { font-size: 12px; font-weight: 700; fill: var(--pf-diagram-ink-2); paint-order: stroke; stroke: var(--pf-diagram-paper); stroke-width: 4px; stroke-linejoin: round; }

/* ── Legenda numerada do desenho ─────────────────────────────────────── */
.sc-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.sc-legend li { display: grid; grid-template-columns: 2.6rem 1fr; align-items: start; gap: .5rem; color: var(--pf-text); }
.sc-legend b:first-child {
  display: inline-flex; justify-content: center; align-items: center; min-height: 1.6rem; padding: 0 .4rem;
  border-radius: var(--pf-radius-pill); background: var(--pf-diagram-ink); color: var(--pf-diagram-paper); font-weight: 800;
}
.sc-legend .k-cmd { background: var(--pf-diagram-command) !important; }
.sc-legend .k-ref { background: var(--pf-diagram-reference) !important; }
.sc-legend .k-applied { background: var(--pf-diagram-applied-line) !important; }

/* ── Campos ──────────────────────────────────────────────────────────── */
.sc-card .input-wrapper input { padding-right: 3.6rem; }
.sc-fieldset { margin: 0 0 1rem; padding: .85rem .9rem .1rem; border: 1px solid var(--pf-border); border-radius: var(--pf-radius); }
.sc-fieldset legend { padding: 0 .4rem; font-weight: 800; color: var(--pf-text); }

/* ── Resultado ───────────────────────────────────────────────────────── */
.sc-sub { margin: 1rem 0 .4rem; font-weight: 800; color: var(--pf-text); }
.sc-bar { display: flex; height: 18px; overflow: hidden; border-radius: var(--pf-radius-pill); background: var(--pf-surface-3); }
.sc-bar span { flex: 1 1 0; min-width: 3px; }
.sc-bar-legend { list-style: none; margin: .45rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--pf-text-sm); color: var(--pf-text-2); }
.sc-bar-legend i { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; border-radius: 3px; vertical-align: -1px; }
.b-lat { background: var(--pf-diagram-ink-2); }
.b-act { background: var(--pf-diagram-command); }
.b-hid { background: var(--pf-diagram-spray); }
.b-alvo { background: var(--pf-diagram-applied-line); }
.sc-card .result-box .alert { margin-top: .9rem; }

/* ── Tutorial ────────────────────────────────────────────────────────── */
.sc-how { margin-top: 1.1rem; padding-top: .4rem; border-top: 1px solid var(--pf-border); }
.sc-how summary { display: flex; align-items: center; min-height: var(--pf-touch); cursor: pointer; font-weight: 800; color: var(--pf-primary); }
.sc-how-body { color: var(--pf-text); }
.sc-steps, .sc-check { margin: .25rem 0 1rem; padding-left: 1.3rem; color: var(--pf-text); }
.sc-steps li, .sc-check li { margin: .5rem 0; line-height: var(--pf-leading); }
.sc-steps li::marker { font-weight: 800; color: var(--pf-primary); }
.sc-guide { color: var(--pf-text); line-height: var(--pf-leading); }
.sc-guide h4 { margin: 1.75rem 0 .6rem; font-size: var(--pf-text-lg); color: var(--pf-text); }
.sc-guide h4:first-child { margin-top: .25rem; }
.sc-guide p { margin: 0 0 1rem; }

.sc-table-wrap { overflow-x: auto; margin: .5rem 0 1rem; border: 1px solid var(--pf-border); border-radius: var(--pf-radius); }
.sc-table { width: 100%; border-collapse: collapse; font-size: var(--pf-text-sm); }
.sc-table th, .sc-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--pf-border); text-align: left; vertical-align: top; color: var(--pf-text); }
.sc-table th { background: var(--pf-surface-2); font-weight: 800; }
.sc-table tr:last-child td { border-bottom: 0; }
.sc-num td, .sc-num th { text-align: right; font-variant-numeric: tabular-nums; }
.sc-row-on td { background: var(--pf-primary-tint); font-weight: 800; }

.sc-safety { margin: 1rem 0 .25rem; padding: .8rem 1rem; border-left: 4px solid var(--pf-warning); border-radius: var(--pf-radius-sm); background: var(--pf-warning-tint); color: var(--pf-text); }

/* O guia e os desenhos precisam de largura: ocupam a linha inteira da grade. */
.calculators-grid.sc-root { grid-template-columns: 1fr; }

/* Calibrações de campo (calibracoes-campo.js) reaproveitam .sc-* acima. */
.cal-note { margin: .75rem 0 0; font-size: var(--pf-text-sm); color: var(--pf-text-2); line-height: var(--pf-leading); }
/* calc-base vira toda <table> em bloco sem quebra no celular; aqui o contêiner já rola. */
.sc-table-wrap > .sc-table { display: table; white-space: normal; }
.sc-table th, .sc-table td { padding: .55rem .6rem; }

/* ── Guia de campo em etapas ─────────────────────────────────────────── */
.sc-etapa { margin: 1.75rem 0; padding: 1.1rem 1.1rem .4rem; border: 1px solid var(--pf-border); border-left: 4px solid var(--pf-primary); border-radius: var(--pf-radius); background: var(--pf-surface); }
.sc-etapa > header { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .6rem; }
.sc-etapa-n { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--pf-primary-surface); color: var(--pf-on-primary); font-weight: 800; font-size: 1.15rem; }
.sc-etapa h4 { margin: .15rem 0 .2rem !important; font-size: var(--pf-text-lg); line-height: 1.3; }
.sc-etapa-meta { margin: 0 !important; font-size: var(--pf-text-sm); color: var(--pf-text-2); }
.sc-objetivo { margin: 0 0 .8rem !important; padding: .6rem .8rem; border-radius: var(--pf-radius-sm); background: var(--pf-primary-tint); color: var(--pf-text); }
.sc-passos { margin: 0 0 1rem; padding-left: 1.35rem; color: var(--pf-text); }
.sc-passos > li { margin: .75rem 0; line-height: var(--pf-leading); }
.sc-passos > li::marker { font-weight: 800; color: var(--pf-primary); }
.sc-porque { display: block; margin-top: .35rem; padding-left: .7rem; border-left: 3px solid var(--pf-border-strong); font-size: var(--pf-text-sm); color: var(--pf-text-2); }
.sc-mat { margin: .4rem 0 0; padding-left: 1.1rem; }
.sc-mat li { margin: .2rem 0; }
.sc-confira { margin: .5rem 0 1rem; padding: .75rem .9rem; border: 1px solid var(--pf-success); border-radius: var(--pf-radius-sm); background: var(--pf-success-tint); color: var(--pf-text); }
.sc-confira > b { color: var(--pf-success); }
.sc-confira ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.sc-confira li { margin: .2rem 0; }
.sc-exemplo { margin: .5rem 0 1rem; padding: .8rem .95rem; border: 1px dashed var(--pf-border-strong); border-radius: var(--pf-radius-sm); background: var(--pf-surface-2); color: var(--pf-text); }
.sc-exemplo > b:first-child { display: block; margin-bottom: .45rem; }
.sc-exemplo p { margin: .55rem 0 0 !important; }
.sc-ex-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; padding: .3rem 0; border-bottom: 1px solid var(--pf-border); font-size: var(--pf-text-sm); }
.sc-ex-linha span { color: var(--pf-text-2); }
.sc-ex-linha b { font-variant-numeric: tabular-nums; }
.sc-erros { margin: .25rem 0 1rem; padding-left: 1.2rem; color: var(--pf-text); }
.sc-erros li { margin: .55rem 0; line-height: var(--pf-leading); }
.sc-erros li::marker { color: var(--pf-danger); }
.sc-planilha th, .sc-planilha td { white-space: nowrap; font-size: .8rem; }
.sc-planilha td { height: 2.2rem; }
.sc-ex-row td { color: var(--pf-text-2); font-style: italic; }
.sc-guia-link { margin: .75rem 0 .25rem; font-size: var(--pf-text-sm); color: var(--pf-text-2); }
.sc-guia-link a { color: var(--pf-primary); font-weight: 800; }