@import url("../shared/ep-como-usar.css");
:root {
  color-scheme: light;
  --black: #101715;
  --ink: #26332f;
  --muted: #6b7873;
  --green: #16a476;
  --green-dark: #087f5b;
  --green-pale: #eaf7f2;
  --line: #d8e1de;
  --line-strong: #b9c8c2;
  --paper: #fff;
  --background: #eef2f0;
  --danger: #a63c3c;
  --warning: #8a5613;
  --shadow: 0 12px 34px rgb(16 23 21 / 10%);
  font-family: var(--ep-fonte);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow-x: hidden; overflow-y: auto; }
body { background: var(--background); color: var(--ink); font-size: 13px; font-weight: 400; }
button, input, select, textarea { font: inherit; }
button, label, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, .file-button:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }

/* A CASCA DE APLICATIVO SAIU. Este produto abria com `.app-shell`, uma grade
 * de quatro linhas com `min-width: 1040px`, barra de projeto de 64 px, faixa
 * de ações de 48 px e conteúdo sangrando até a borda da janela. Os outros
 * noventa e dois produtos abriam com barra branca, faixa escura e conteúdo
 * dentro de uma margem, e a diferença saltava aos olhos ao trocar de produto.
 *
 * O cabeçalho e a margem agora vêm de `shared/ep-cabecalho.css`. As regras de
 * `.topbar`, `.ribbon` e `.project-identity` abaixo ficaram sem marcação e
 * estão mortas; foram mantidas nesta passada para a migração ser reversível,
 * e saem quando os treze produtos estiverem migrados. */
.topbar { display: grid; grid-template-columns: 260px minmax(180px, 1fr) auto; align-items: center; gap: 20px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--paper); z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--black); text-decoration: none; }
/* O simbolo EP em SVG. O azulejo com "EP" escrito saiu daqui; o porque
   esta em app/components/marca.tsx. */
.brand-mark {
  display: block;
  width: auto;
  height: 38px;
  background: none;
  border-radius: 0;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.brand small { margin-top: 1px; color: var(--muted); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.project-identity { min-width: 0; padding-left: 18px; border-left: 1px solid var(--line); }
.project-identity span, .property-heading span, .panel-heading span, .canvas-heading span, .settings-header span { display: block; color: var(--green-dark); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.project-identity strong { display: block; overflow: hidden; margin-top: 2px; color: var(--black); font-size: 13px; font-weight: 570; text-overflow: ellipsis; white-space: nowrap; }
.top-actions, .ribbon-group { display: flex; align-items: center; gap: 7px; }
.save-state { margin-right: 4px; color: var(--muted); font-size: 9px; }
.top-button, .ribbon-button, .small-button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: white; color: var(--black); font-size: 10px; font-weight: 620; line-height: 1; white-space: nowrap; transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease; }
.top-button:hover, .ribbon-button:hover, .small-button:hover { border-color: var(--green); background: var(--green-pale); color: var(--green-dark); }
.top-button:active, .ribbon-button:active, .small-button:active, .primary-button:active, .secondary-button:active, .optimize-button:active { transform: translateY(1px); }
.danger-button { border-color: #e5c5c5; color: var(--danger); }
.danger-button:hover { border-color: #d89c9c; background: #fff3f3; color: var(--danger); }
.file-button { display: inline-flex; min-height: 34px; align-items: center; margin-top: 0; cursor: pointer; }
.file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.ribbon { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #fafcfb; box-shadow: 0 3px 12px rgb(16 23 21 / 4%); z-index: 9; }
.ribbon-group > strong { margin-right: 6px; color: var(--black); font-size: 11px; font-weight: 650; }
.ribbon-summary { min-width: 0; justify-content: flex-end; margin-left: auto; }
.ribbon-summary > span { max-width: 320px; overflow: hidden; margin-right: 5px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.toggle { display: inline-flex; align-items: center; gap: 5px; margin-top: 0; color: var(--muted); font-size: 9px; cursor: pointer; }
.toggle input { width: 14px; height: 14px; accent-color: var(--green-dark); }
.primary-button, .secondary-button, .optimize-button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 0 12px; border-radius: 8px; font-size: 10px; font-weight: 650; white-space: nowrap; transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease; }
.primary-button { border: 0; background: var(--green-dark); color: white; }
.primary-button:hover { background: #06694c; }
.secondary-button { border: 1px solid var(--line-strong); background: white; color: var(--black); }
.secondary-button:hover { border-color: var(--green); background: var(--green-pale); color: var(--green-dark); }
.optimize-button { border: 0; background: var(--black); color: white; }
.optimize-button:hover { background: #26332f; }

/* O padding saiu para `shared/ep-cabecalho.css`, em `#top > .workspace`: a
 * margem de pagina e da plataforma e vale nas treze bancadas. */
.workspace { display: grid; grid-template-columns: 350px minmax(0, 1fr); column-gap: 18px; min-height: 0; align-items: start; overflow: visible; }
.input-panel { position: sticky; top: 8px; display: flex; min-width: 0; height: calc(100vh - 16px); min-height: 0; flex-direction: column; border: 1px solid var(--line); border-left: 0; background: var(--paper); }
.model-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 2px; padding: 7px 9px; border-bottom: 1px solid var(--line); background: white; }
.model-flow button { min-width: 0; padding: 5px 2px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 7px; font-weight: 650; }
.model-flow button:hover, .model-flow button.active { background: var(--green-pale); color: var(--green-dark); }
.model-flow i { color: #a9b6b1; font-size: 8px; font-style: normal; }
.tool-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #f8faf9; }
.tool-button { display: flex; min-width: 0; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 2px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); }
.tool-button b { color: var(--black); font-family: Arial, sans-serif; font-size: 17px; font-weight: 400; line-height: 1; }
.tool-button span { font-size: 8px; font-weight: 560; }
.tool-button:hover { background: #f5f8f7; color: var(--black); }
.tool-button.active { border-color: #9dd9c5; background: var(--green-pale); color: var(--green-dark); }
.tool-button.active b { color: var(--green-dark); }
.danger-tool:hover, .danger-tool.active { border-color: #ebc0c0; background: #fff3f3; color: var(--danger); }
.danger-tool:hover b, .danger-tool.active b { color: var(--danger); }
.tool-options { padding: 9px 10px; border-bottom: 1px solid var(--line); background: var(--green-pale); }
.tool-options > span { display: block; margin-bottom: 6px; color: var(--green-dark); font-size: 7px; font-weight: 700; letter-spacing: .12em; }
.load-tool-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.load-tool-options button { min-height: 29px; padding: 4px 6px; border: 1px solid #b7d7cb; border-radius: 6px; background: white; color: #37564b; font-size: 8px; text-align: left; }
.load-tool-options button.active { border-color: var(--green-dark); background: var(--green-dark); color: white; }

.canvas-column { position: relative; min-width: 0; padding: 10px; overflow: visible; background: #eef2f0; }
.drawing-stage { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: white; box-shadow: 0 4px 16px rgb(16 23 21 / 5%); }
.canvas-heading { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: white; }
.canvas-heading h1 { margin: 2px 0 0; color: var(--black); font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.canvas-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.calculation-state { padding: 5px 9px; border-radius: 999px; background: var(--green-pale); color: var(--green-dark); font-size: 8px; font-weight: 650; }
.calculation-state.failed { background: #fff0f0; color: var(--danger); }
.message { position: absolute; top: 74px; left: 14px; right: 14px; z-index: 12; padding: 10px 12px; border: 1px solid #e6cf9e; border-radius: 8px; background: #fff8e9; color: var(--warning); box-shadow: var(--shadow); font-size: 10px; }
.message.error { border-color: #e8c0c0; background: #fff2f2; color: var(--danger); }
.canvas-surface { position: relative; height: clamp(210px, 36vh, 380px); overflow: hidden; background-color: #fbfcfc; }
/* A SUPERFÍCIE ACOMPANHA A PROPORÇÃO DO viewBox DO CANVAS.
 *
 * O desenho da viga é composto num viewBox de 1200 × 620 — proporção 1,94. Com
 * a altura genérica de 36vh a superfície fica 1053 × 324, proporção 3,25, e o
 * `preserveAspectRatio` padrão resolve o conflito ENCAIXANDO: a escala efetiva
 * cai para 0,52 e sobram 425 px de vazio, 40 % da largura. O desenho não fica
 * cortado — fica pequeno, com margens enormes dos dois lados, que é o que se lê
 * como "fora de escala".
 *
 * Casando a proporção, a mesma largura passa a render a 0,88: o desenho cresce
 * 68 % sem mudar uma coordenada. O teto em 64vh existe para o notebook baixo, e
 * o piso para quando a coluna é estreita.
 *
 * Os outros produtos que importam esta folha declaram a sua própria
 * modificadora — `column-canvas-surface` em pilares, por exemplo —, e é por isso
 * que a regra genérica continua onde está. */
.canvas-surface.beam-canvas-surface,
.canvas-surface.slab-canvas-surface {
  height: auto; aspect-ratio: 1200 / 620; max-height: 64vh; min-height: 300px;
}
.canvas-surface.grid-on { background-image: radial-gradient(#cfdad6 1px, transparent 1px); background-size: 20px 20px; }
#beam-model { display: block; width: 100%; height: 100%; min-height: 0; touch-action: none; user-select: none; }
#beam-model.pan-ready { cursor: grab; }
#beam-model.is-panning { cursor: grabbing; }
#beam-model.tool-span { cursor: crosshair; }
#beam-model.tool-pin, #beam-model.tool-roller, #beam-model.tool-fixed { cursor: cell; }
#beam-model.tool-load { cursor: copy; }
#beam-model.tool-delete { cursor: not-allowed; }
#beam-model.tool-span .model-node, #beam-model.tool-pin .model-node, #beam-model.tool-roller .model-node, #beam-model.tool-fixed .model-node { cursor: inherit; }
#beam-model.tool-load .model-hit { cursor: copy; }
#beam-model.tool-delete .model-hit, #beam-model.tool-delete .load-hit-area, #beam-model.tool-delete .model-node { cursor: not-allowed; }
#beam-model text, #detailing-preview text, .diagram-grid text { font-family: var(--ep-fonte); font-weight: 300; }
.canvas-mode { position: absolute; top: 10px; left: 12px; max-width: min(310px, calc(100% - 250px)); padding: 7px 9px; border: 1px solid #b8d9cd; border-radius: 7px; background: rgb(234 247 242 / 94%); box-shadow: 0 4px 14px rgb(16 23 21 / 6%); pointer-events: none; }
.canvas-mode strong, .canvas-mode span { display: block; }
.canvas-mode strong { color: var(--green-dark); font-size: 7px; letter-spacing: .12em; }
.canvas-mode span { margin-top: 2px; overflow: hidden; color: #3f5b51; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.canvas-edit-controls { position: absolute; bottom: 10px; left: 12px; display: flex; min-height: 32px; align-items: center; gap: 10px; padding: 0 6px 0 9px; border: 1px solid var(--line); border-radius: 7px; background: rgb(255 255 255 / 92%); box-shadow: 0 4px 14px rgb(16 23 21 / 8%); backdrop-filter: blur(8px); }
.canvas-edit-controls .toggle { height: 30px; color: #465650; font-size: 8px; font-weight: 560; }
.canvas-edit-controls .toggle input { width: 13px; height: 13px; margin: 0; }
.canvas-edit-controls button { height: 30px; margin: 0 -6px 0 0; padding: 0 10px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--black); font-size: 8px; font-weight: 620; }
.canvas-edit-controls button:hover { background: var(--green-pale); color: var(--green-dark); }
.canvas-controls { position: absolute; top: 10px; right: 12px; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: rgb(255 255 255 / 92%); box-shadow: 0 4px 14px rgb(16 23 21 / 8%); backdrop-filter: blur(8px); }
.canvas-controls button, .canvas-controls output { display: grid; min-width: 32px; height: 30px; margin: 0; padding: 0 8px; place-items: center; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--black); font-size: 10px; }
.canvas-controls button:last-child { min-width: 32px; border-right: 0; }
.canvas-controls button:hover { background: var(--green-pale); color: var(--green-dark); }
.canvas-controls output { min-width: 48px; color: var(--muted); font-size: 8px; font-variant-numeric: tabular-nums; }
.canvas-legend { position: absolute; right: 12px; bottom: 10px; display: flex; gap: 12px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: rgb(255 255 255 / 88%); color: var(--muted); font-size: 8px; backdrop-filter: blur(8px); }
.canvas-legend span { display: flex; align-items: center; gap: 4px; }
.canvas-legend i { display: inline-block; width: 15px; height: 3px; background: var(--black); }
.canvas-legend .legend-load { height: 2px; background: var(--green); }
.canvas-legend .legend-selection { height: 7px; border-radius: 3px; background: #8fe0c4; }
.model-grid { stroke: #e3eae7; stroke-width: 1; }
.model-axis { stroke: #bdc9c4; stroke-width: 1.1; stroke-dasharray: 5 6; }
.model-beam { stroke: var(--black); stroke-width: 10; stroke-linecap: round; }
.model-beam.selected { stroke: var(--green-dark); stroke-width: 13; }
.model-hit { stroke: transparent; stroke-width: 34; cursor: pointer; }
.model-node { fill: white; stroke: var(--green-dark); stroke-width: 3; cursor: pointer; }
.model-node.selected { fill: var(--green); stroke: white; stroke-width: 4; filter: drop-shadow(0 0 4px rgb(8 127 91 / 45%)); }
.span-draft { stroke: var(--green); stroke-width: 4; stroke-dasharray: 12 8; pointer-events: none; }
.span-draft.invalid { stroke: var(--danger); }
.span-draft-node { fill: white; stroke: var(--green-dark); stroke-width: 4; pointer-events: none; }
.span-draft-label { fill: var(--green-dark); font-size: 12px; font-weight: 650 !important; pointer-events: none; }
.model-dimension, .model-label { fill: var(--muted); font-size: 12px; pointer-events: none; }
.model-label { fill: var(--black); font-weight: 600 !important; }
.load-line, .load-arrow { stroke: var(--green); stroke-width: 2; cursor: pointer; }
.load-arrow { fill: none; }
.load-profile { fill: none; stroke-linejoin: round; }
.load-profile-point { fill: white; stroke: var(--green-dark); stroke-width: 2; pointer-events: none; }
.load-end-value { fill: var(--green-dark); font-size: 9px; font-weight: 600 !important; pointer-events: none; }
.moment-symbol { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.moment-application { fill: white; stroke: var(--green-dark); stroke-width: 3; pointer-events: none; }
.load-hit-area { fill: transparent; stroke: none; cursor: pointer; pointer-events: all; }
.load-group.selected .load-line, .load-group.selected .load-arrow { stroke: #057451; stroke-width: 4; filter: drop-shadow(0 2px 2px rgb(8 127 91 / 25%)); }
.load-text { fill: var(--green-dark); font-size: 12px; font-weight: 600 !important; pointer-events: none; }
.empty-canvas-title { fill: var(--black); font-size: 22px; font-weight: 560 !important; }
.empty-canvas-copy { fill: var(--muted); font-size: 12px; }
.support { fill: white; stroke: var(--black); stroke-width: 2; pointer-events: none; }
.support-ground { stroke: var(--black); stroke-width: 2; pointer-events: none; }

.property-heading { padding: 16px 16px 13px; border-bottom: 1px solid var(--line); }
.property-heading h2 { margin: 3px 0 0; color: var(--black); font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
.property-heading p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.property-content { flex: 1; overflow-y: auto; padding: 4px 16px 18px; }
.span-tabs { position: sticky; top: -4px; z-index: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 97%); backdrop-filter: blur(8px); }
.span-tabs button { min-width: 0; min-height: 31px; padding: 5px 3px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #f7faf8; color: var(--muted); font-size: 8px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.span-tabs button:hover { border-color: #9dcdbc; color: var(--green-dark); }
.span-tabs button.active { border-color: var(--green-dark); background: var(--green-dark); color: white; }
.span-tabs button span { display: inline-grid; min-width: 15px; height: 15px; margin-left: 2px; place-items: center; border-radius: 999px; background: rgb(255 255 255 / 20%); font-size: 7px; }
.property-legend { padding: 12px 16px; border-top: 1px solid var(--line); background: #f7faf8; }
.property-legend strong { color: var(--black); font-size: 10px; }
.property-legend p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.empty-inspector { display: grid; min-height: 290px; place-items: center; padding: 28px; text-align: center; }
.empty-inspector b { display: grid; width: 54px; height: 54px; margin: 0 auto 12px; place-items: center; border-radius: 50%; background: var(--green-pale); color: var(--green-dark); font-size: 24px; font-weight: 400; }
.empty-inspector strong { display: block; color: var(--black); font-size: 13px; }
.empty-inspector p { max-width: 220px; margin: 7px auto 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.property-section { padding: 14px 0; border-bottom: 1px solid var(--line); }
.property-section:last-child { border-bottom: 0; }
.property-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.property-section h3 { margin: 0; color: var(--black); font-size: 12px; font-weight: 650; }
.element-tag { padding: 4px 7px; border-radius: 5px; background: var(--green-pale); color: var(--green-dark); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.inspector-grid, .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 9px; }
.wide { grid-column: 1 / -1; }
label { display: block; min-width: 0; margin-top: 8px; color: #3c4c46; font-size: 9px; font-weight: 580; }
input, select, textarea { display: block; width: 100%; min-width: 0; height: 35px; margin-top: 4px; padding: 0 8px; border: 1px solid #c7d3cf; border-radius: 6px; outline: 0; background: white; color: var(--ink); font-size: 10px; font-weight: 400; }
textarea { height: 62px; padding-block: 7px; resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgb(8 127 91 / 11%); }
.unit-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: 4px; align-items: center; overflow: hidden; border: 1px solid #c7d3cf; border-radius: 6px; }
.unit-input input { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.unit-input b { padding: 0 7px; color: var(--muted); font-size: 7px; font-weight: 500; }
.unit-input.divisor { grid-template-columns: auto minmax(0, 1fr); }
.check-label { display: flex; align-items: center; gap: 7px; min-height: 35px; padding-top: 10px; }
.check-label input { width: 15px; height: 15px; margin: 0; accent-color: var(--green-dark); }
.inspector-actions, .load-buttons, .document-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.small-button { min-height: 28px; padding-inline: 8px; font-size: 9px; }
.small-button.green { border-color: #a8d6c6; color: var(--green-dark); }
.small-button.danger { border-color: #e5c5c5; color: var(--danger); }
.load-card { position: relative; margin-top: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: #fafcfb; }
.load-card.selected { border-color: var(--green); background: var(--green-pale); }
.load-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.load-card-head strong { color: var(--black); font-size: 9px; }
.load-name { min-width: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--black); font-size: 9px; font-weight: 650; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.load-name:hover { color: var(--green-dark); }
.icon-button { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 1px solid #e5c5c5; border-radius: 5px; background: white; color: var(--danger); }
.load-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6px; }
.tabulated-points { margin-top: 10px; }
.tabulated-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.tabulated-heading strong, .tabulated-heading span { display: block; }
.tabulated-heading strong { color: var(--black); font-size: 9px; }
.tabulated-heading span { margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 400; }
.tabulated-points table { border: 1px solid var(--line); border-radius: 6px; background: white; }
.tabulated-points th, .tabulated-points td { padding: 4px; }
.tabulated-points input { height: 29px; margin: 0; text-align: center; }
.tabulated-points p { margin: 6px 0 0; color: var(--muted); font-size: 8px; line-height: 1.4; }
.property-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.property-summary div { padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: #fafcfb; }
.property-summary span { display: block; color: var(--muted); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.property-summary strong { display: block; margin-top: 3px; color: var(--black); font-size: 11px; font-weight: 600; }
.reinforcement-summary strong { font-size: 9px; line-height: 1.35; white-space: normal; }
.reinforcement-editor .mode-selector { margin-top: 0; }
.reinforcement-note { margin: 10px 0 2px; padding: 10px; border-left: 3px solid var(--green); border-radius: 0 7px 7px 0; background: var(--green-pale); color: #355148; font-size: 9px; line-height: 1.45; }
.reinforcement-note strong, .reinforcement-note span { display: block; }
.reinforcement-note strong { margin-bottom: 2px; color: var(--green-dark); font-size: 9px; }
.reinforcement-note span { font-weight: 400; }
.informed-reinforcement { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.reinforcement-verdict { margin-top: 11px; padding: 9px 10px; border: 1px solid #abd9ca; border-radius: 7px; background: #f0faf6; }
.reinforcement-verdict strong, .reinforcement-verdict span { display: block; }
.reinforcement-verdict strong { color: var(--green-dark); font-size: 9px; }
.reinforcement-verdict span { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.reinforcement-verdict.failed { border-color: #e5b8b8; background: #fff3f3; }
.reinforcement-verdict.failed strong { color: var(--danger); }
.empty-inline, .inspector-help { margin: 8px 0; padding: 9px; border: 1px dashed var(--line-strong); border-radius: 7px; color: var(--muted); font-size: 9px; line-height: 1.45; }

.output-strip { display: flex; min-height: 58px; margin-top: 10px; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.output-strip > div:first-child span { display: block; color: var(--green-dark); font-size: 7px; font-weight: 700; letter-spacing: .14em; }
.output-strip > div:first-child strong { display: block; margin-top: 2px; color: var(--black); font-size: 11px; font-weight: 620; }
.output-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

.results-dock { margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: white; box-shadow: 0 4px 16px rgb(16 23 21 / 5%); z-index: 6; }
.dock-tabs { display: flex; min-height: 39px; align-items: stretch; border-bottom: 1px solid var(--line); background: #f8faf9; }
.dock-tab, .dock-toggle { padding: 0 15px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 9px; font-weight: 600; }
.dock-tab.active { background: white; color: var(--green-dark); box-shadow: inset 0 3px 0 var(--green); }
.dock-toggle { margin-left: auto; border-right: 0; border-left: 1px solid var(--line); font-size: 17px; }
.results-dock.collapsed .dock-body { display: none; }
.results-dock.collapsed { max-height: 39px; }
.results-dock.collapsed .dock-toggle { transform: rotate(180deg); }
.dock-body { padding: 18px 18px 28px; }
.result-panel { display: none; }
.result-panel.active { display: block; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.panel-heading h2 { margin: 2px 0 0; color: var(--black); font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.result-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border-radius: 9px; background: var(--black); }
.result-cards article { min-width: 0; padding: 12px 14px; border-right: 1px solid rgb(255 255 255 / 12%); }
.result-cards article:last-child { border-right: 0; }
.result-cards .featured { background: rgb(22 164 118 / 14%); }
.result-cards article > span { color: #a8bab4; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.result-cards strong { display: block; margin-top: 4px; color: white; font-size: 22px; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }
.result-cards .featured strong { color: #65d5ad; }
.result-cards small { margin-left: 3px; color: #b9c7c2; font-size: 8px; font-weight: 400; }
.verification-summary { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.verification-summary span { padding: 5px 7px; border-radius: 5px; background: var(--green-pale); color: #17614a; font-size: 8px; }
.verification-summary span.fail { background: #fff0f0; color: var(--danger); }
.verification-board-section { margin-top: 10px; }
.verification-board-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 0 2px 6px; }
.verification-board-heading span { color: var(--green-dark); font-size: 7px; font-weight: 650; letter-spacing: .09em; }
.verification-board-heading h3 { margin: 2px 0 0; color: var(--black); font-size: 13px; font-weight: 600; }
.verification-board-heading p { margin: 0; color: var(--muted); font-size: 8px; }
.verification-board-heading p strong { color: var(--black); }
.verification-board { display: grid; gap: 8px; }
.verification-group-card { overflow: hidden; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 8px; background: white; }
.verification-group-card.fail { border-left-color: var(--danger); }
.verification-group-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; background: #f8faf9; }
.verification-group-card > header span { color: var(--muted); font-size: 7px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.verification-group-card > header h4 { margin: 2px 0 0; color: var(--black); font-size: 11px; font-weight: 600; }
.verification-group-card > header > strong { color: var(--green-dark); font-size: 9px; font-weight: 600; }
.verification-group-card.fail > header > strong { color: var(--danger); }
.verification-table { min-width: 980px; }
.verification-table th:first-child, .verification-table td:first-child { width: 26px; padding-right: 0; }
.verification-table td:nth-child(2) { min-width: 220px; text-align: left; white-space: normal; }
.verification-table td:nth-child(2) small { display: block; color: var(--muted); font-size: 6.5px; letter-spacing: .05em; text-transform: uppercase; }
.verification-table td:nth-child(2) strong { display: block; margin-top: 1px; color: var(--black); font-size: 8.5px; font-weight: 550; }
.verification-table .verification-status { display: block; width: 8px; height: 8px; margin: auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-pale); }
.verification-table .warn .verification-status { background: #d79817; box-shadow: 0 0 0 3px #fff4d9; }
.verification-table .fail .verification-status { background: var(--danger); box-shadow: 0 0 0 3px #ffe7e7; }
.verification-table .na .verification-status { background: #9ba7a2; box-shadow: 0 0 0 3px #edf1ef; }
.utilization-value { display: grid; grid-template-columns: 42px 68px; align-items: center; gap: 6px; }
.utilization-value > strong { color: var(--green-dark); font-size: 8px; font-weight: 650; text-align: right; }
.warn .utilization-value > strong, .warn .verification-margin { color: #9c6810; }
.fail .utilization-value > strong, .fail .verification-margin { color: var(--danger); }
.utilization-track { display: block; height: 5px; overflow: hidden; border-radius: 5px; background: #e3e9e6; }
.utilization-track i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.warn .utilization-track i { background: #d79817; }
.fail .utilization-track i { background: var(--danger); }
.verification-margin { color: var(--green-dark); font-weight: 600; }
.verification-guidance { min-width: 240px; max-width: 340px; color: #4d5b56; line-height: 1.35; text-align: left; white-space: normal; }
.verification-row.fail { background: #fffafa; }
.verification-row.warn { background: #fffdf8; }
.diagram-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.diagram-card { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: inset 0 2px 0 var(--green); }
.diagram-card h3 { margin: 0; font-family: var(--ep-fonte); font-size: 12px; font-weight: 300; }
.diagram-card p { margin: 2px 0 0; color: var(--muted); font-size: 7px; }
.diagram-card svg { display: block; width: 100%; height: auto; margin-top: 5px; }
.chart-grid { stroke: #dde5e2; stroke-width: 1; stroke-dasharray: 3 4; }
.chart-zero { stroke: var(--black); stroke-width: 1.3; }
.chart-max { fill: rgb(22 164 118 / 10%); stroke: var(--green); stroke-width: 3; }
.chart-min { fill: none; stroke: var(--black); stroke-width: 2; }
.chart-axis-label { fill: #60706a; font-size: 10px; }
.chart-value { fill: var(--black); font-size: 10px; font-weight: 600 !important; }
.tables-pair { display: grid; grid-template-columns: .85fr 1.35fr; gap: 8px; margin-top: 9px; }
.table-card { overflow: hidden; margin-top: 9px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.table-card h3 { margin: 0; padding: 9px 10px; color: var(--black); font-size: 10px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 8.5px; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 8px; border-bottom: 1px solid #e5ebe8; text-align: center; font-weight: 400; white-space: nowrap; }
th { position: sticky; top: 0; background: #eef3f1; color: var(--black); font-size: 7px; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
.status-ok { color: var(--green-dark); font-weight: 650; }
.status-fail { color: var(--danger); font-weight: 650; }
.section-note { padding: 10px 12px; border: 1px solid #b9dccc; border-radius: 7px; background: var(--green-pale); color: #315f50; font-size: 9px; }
#detailing-preview { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fafcfb; }
.preview-sheet-paper { fill: white; stroke: #9eaca7; stroke-width: 1.2; filter: drop-shadow(0 6px 12px rgb(16 23 21 / 8%)); }
.preview-sheet-title { fill: var(--black); font-size: 17px; font-weight: 650 !important; letter-spacing: .025em; }
.preview-sheet-meta { fill: #61716b; font-size: 10px; letter-spacing: .04em; }
.preview-title-block { fill: #fafcfb; stroke: #9eaca7; stroke-width: 1; }
.preview-title-main { fill: var(--black); font-size: 13px; font-weight: 650 !important; }
.preview-sheet-number { fill: var(--black); font-size: 15px; font-weight: 650 !important; }
.detail-title { fill: var(--black); font-size: 15px; font-weight: 500 !important; letter-spacing: -.01em; }
.detail-concrete { fill: #e7ecea; stroke: var(--black); stroke-width: 3; }
.detail-column { fill: #f0f3f2; stroke: #7d8985; stroke-width: 2; }
.detail-bar-bottom { fill: none; stroke: #d33f49; stroke-width: 5; }
.detail-bar-top { fill: none; stroke: #246bce; stroke-width: 5; }
.detail-bar-perimeter { fill: none; stroke: var(--green-dark); stroke-width: 4; }
.detail-bar-skin { fill: none; stroke: #159a70; stroke-width: 3; }
.detail-bar-bottom-point { fill: #d33f49; stroke: white; stroke-width: 1.5; }
.detail-bar-top-point { fill: #246bce; stroke: white; stroke-width: 1.5; }
.detail-bar-perimeter-point { fill: var(--green-dark); stroke: white; stroke-width: 1.5; }
.detail-bar-skin-point { fill: #159a70; stroke: white; stroke-width: 1.5; }
.detail-stirrup, .detail-stirrup-shape { fill: none; stroke: #101715; stroke-width: 2; }
.detail-dimension { stroke: #87958f; stroke-width: 1; }
.detail-extension { stroke: #a8b3af; stroke-width: 1; }
.detail-leader, .detail-zone-bracket { fill: none; stroke: #87958f; stroke-width: 1; }
.detail-load { fill: none; stroke: var(--green); stroke-width: 2.2; }
.detail-load-text { fill: var(--green-dark); font-size: 11px; font-weight: 650 !important; }
.detail-cut line, .detail-cut path { fill: none; stroke: #64736d; stroke-width: 1.2; stroke-dasharray: 5 4; }
.detail-cut text { fill: var(--black); font-size: 12px; font-weight: 650 !important; }
.detail-projection { stroke: #a8b3af; stroke-width: 1; stroke-dasharray: 4 4; }
.detail-note { fill: #52615c; font-size: 11px; }
.detail-divider { stroke: #cbd5d1; stroke-width: 1; }
.detail-label { fill: var(--ink); font-size: 12px; }
.detail-subtitle { fill: var(--black); font-size: 13px; font-weight: 650 !important; letter-spacing: .04em; }
.detail-position { font-size: 11px; font-weight: 650 !important; }
.detail-position-card > rect:first-child { fill: white; stroke: #d4deda; stroke-width: 1; rx: 7px; }
.detail-section-card > rect:first-child { fill: #fbfcfc; stroke: #d4deda; stroke-width: 1; }
.detail-position-title { fill: var(--black); font-size: 12px; font-weight: 650 !important; }
.detail-position-note { fill: #405049; font-size: 10px; }
.detail-dimension-text { fill: #53635d; font-size: 11px; }
.detail-callout, .detail-stirrup-text { fill: #465650; font-size: 11px; font-weight: 600 !important; }
.detail-bar-bottom-text { fill: #b92f39; }
.detail-bar-top-text { fill: #1f5ba9; }
.detail-bar-skin-text { fill: #087b59; }
.detail-legend text { fill: #42524c; font-size: 11px; }
.memory-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
.memory-preview div { padding: 12px; background: #fafcfb; }
.memory-preview span { display: block; color: var(--muted); font-size: 7px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.memory-preview strong { display: block; margin-top: 3px; color: var(--black); font-size: 10px; font-weight: 580; }
.memory-document { grid-column: 1 / -1; padding: 26px clamp(18px, 5vw, 64px) 38px; background: white; }
.memory-document h3 { max-width: 860px; margin: 5px auto 16px; color: var(--black); font-size: 21px; font-weight: 570; letter-spacing: -.025em; }
.memory-document > span { max-width: 860px; margin-inline: auto; color: var(--green-dark); }
.memory-document pre { max-width: 860px; margin: 0 auto; color: #30413b; font: 400 11px/1.75 var(--ep-fonte); white-space: pre-wrap; }

.statusbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 30px; padding: 0 var(--ep-margem-pagina); border-top: 1px solid var(--line); background: white; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; }

.settings-dialog { width: min(920px, calc(100vw - 36px)); max-height: 88vh; padding: 0; overflow: hidden; border: 0; border-radius: 13px; background: white; box-shadow: 0 30px 90px rgb(16 23 21 / 30%); }
.settings-dialog::backdrop { background: rgb(10 18 15 / 52%); backdrop-filter: blur(3px); }
.settings-hint { margin: 0; align-self: end; color: var(--muted); font-size: 8px; line-height: 1.45; }
.setting-readonly { display: flex; align-items: center; min-height: 39px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: #f5f8f7; color: var(--black); font-size: 9px; }
.settings-header { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; background: var(--black); color: white; }
.settings-header span { color: #73d2b0; }
.settings-header h2 { margin: 3px 0 0; font-size: 18px; font-weight: 570; }
.settings-header button { width: 32px; height: 32px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 7px; background: transparent; color: white; font-size: 20px; }
.settings-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: calc(88vh - 130px); overflow-y: auto; padding: 14px; background: #f4f7f5; }
.settings-group { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.settings-group h3 { margin: 0 0 8px; color: var(--black); font-size: 12px; }
.wide-settings { grid-column: 1 / -1; }
.settings-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-footer { display: flex; justify-content: flex-end; gap: 7px; padding: 11px 14px; border-top: 1px solid var(--line); background: white; }
.editor-table { width: 100%; border-collapse: collapse; font-size: 8px; }
.editor-table th { padding: 5px 3px; color: var(--muted); text-align: left; }
.editor-table td { padding: 3px; }
.editor-table input, .editor-table select { height: 30px; margin: 0; padding: 0 5px; border-radius: 5px; font-size: 8px; }
.editor-table input[type="checkbox"] { width: 14px; }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: 320px minmax(0, 1fr); }
  .topbar { grid-template-columns: 230px minmax(140px, 1fr) auto; }
  .save-state { display: none; }
}

@media (max-width: 1100px) {
  .app-shell { min-width: 0; }
  .topbar { grid-template-columns: minmax(190px, 1fr) auto; gap: 10px; padding-inline: 12px; }
  .project-identity { display: none; }
  .top-actions { min-width: 0; justify-content: flex-end; gap: 5px; }
  .top-button { min-height: 29px; padding-inline: 8px; font-size: 9px; }
  .ribbon { gap: 8px; padding-inline: 10px; }
  .ribbon-group { gap: 4px; }
  .ribbon-summary > span { display: none; }
  .ribbon-button, .ribbon .primary-button, .ribbon .optimize-button { min-height: 30px; padding-inline: 8px; font-size: 9px; }
  .workspace { grid-template-columns: 275px minmax(0, 1fr); }
  .property-heading { padding: 12px 12px 10px; }
  .property-content { padding-inline: 12px; }
  .tool-palette { gap: 3px; padding: 6px 8px; }
  .tool-button { min-height: 42px; }
  .output-strip > div:first-child { display: none; }
  .output-actions { display: grid; width: 100%; grid-template-columns: .8fr 1fr 1fr; }
  .output-actions button { min-width: 0; padding-inline: 7px; font-size: 9px; }
  .dock-tab, .dock-toggle { padding-inline: 11px; }
}

@media (max-height: 760px) {
  .app-shell { grid-template-rows: 58px 44px auto 26px; }
  .canvas-heading { min-height: 58px; }
  .tool-button { min-height: 44px; }
}

@media (max-height: 650px) and (min-width: 901px) {
  .app-shell { grid-template-rows: 54px 42px auto 24px; }
  .brand-mark { height: 32px; width: auto; }
  .top-button { min-height: 28px; }
  .ribbon-group > strong { font-size: 9px; }
  .canvas-heading { min-height: 52px; padding-block: 7px; }
  .canvas-heading h1 { font-size: 17px; }
  .canvas-heading p { display: none; }
  .calculation-state { padding: 4px 7px; }
  .property-heading { padding-block: 9px; }
  .property-heading h2 { font-size: 15px; }
  .property-heading p, .property-legend { display: none; }
  .tool-button { min-height: 37px; }
  .tool-button b { font-size: 15px; }
  .canvas-surface { height: 190px; min-height: 190px; }
  #beam-model { min-height: 0; }
  .output-strip { min-height: 48px; padding-block: 6px; }
  .results-dock.collapsed { max-height: 35px; }
  .dock-tabs { min-height: 35px; }
  .statusbar { font-size: 7px; }
}

@media (max-width: 900px) {
  .app-shell { display: block; min-width: 0; height: auto; }
  .topbar { grid-template-columns: 1fr auto; min-height: 60px; }
  .project-identity { display: none; }
  .ribbon { min-height: 48px; overflow-x: auto; }
  .workspace { display: flex; min-height: 900px; flex-direction: column; }
  .input-panel { position: static; height: auto; min-height: 390px; border-right: 0; border-bottom: 1px solid var(--line); }
  .canvas-column { min-height: 0; }
  .tool-palette { grid-template-columns: repeat(7, minmax(60px, 1fr)); overflow-x: auto; }
  .statusbar { min-height: 30px; }
  .settings-body { grid-template-columns: 1fr; }
  .wide-settings { grid-column: auto; }
}

/* ALINHAMENTO DOS CAMPOS DA GRADE.
 *
 * O label era `display: block`, então o campo começava onde o texto acabasse:
 * "Garantia temporal pretendida" ocupa duas linhas, "Anos mínimos de série"
 * ocupa uma, e os dois campos da mesma linha saíam em alturas diferentes.
 *
 * Coluna flexível com o campo empurrado para o fim resolve sem depender de o
 * rótulo caber numa linha — que é uma condição que nenhum texto em português
 * respeita por muito tempo. O `:not(.checkbox)` preserva a caixa de marcação,
 * que é deitada de propósito. */
.field-grid label:not(.checkbox) { display: flex; flex-direction: column; gap: 5px; }
.field-grid label:not(.checkbox) > .input-with-unit,
.field-grid label:not(.checkbox) > input,
.field-grid label:not(.checkbox) > select,
.field-grid label:not(.checkbox) > textarea { margin-top: auto; }