@import url("../vigas/styles.css?v=13");
@import url("../shared/ep-como-usar.css");

.column-shell { min-width: 1080px; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: #fff; }
.mode-switch button { min-height: 29px; border: 1px solid var(--line); border-radius: 6px; background: #f8faf9; color: var(--muted); font-size: 8px; font-weight: 620; }
.mode-switch button.active { border-color: var(--green-dark); background: var(--green-dark); color: #fff; }
.column-canvas-surface { height: clamp(300px, 48vh, 500px); }
#column-model { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; }
#column-model.pan-ready { cursor: grab; }
#column-model.is-panning { cursor: grabbing; }
#column-model.tool-level, #column-model.tool-segment { cursor: crosshair; }
#column-model.tool-load { cursor: copy; }
#column-model.tool-support, #column-model.tool-section { cursor: cell; }
#column-model.tool-delete { cursor: not-allowed; }
#column-model text, #detailing-preview text, .column-diagrams text, .interaction-grid text { font-family: var(--ep-fonte); font-weight: 300; }
.column-axis { stroke: #cbd8d3; stroke-width: 1; stroke-dasharray: 4 7; }
.column-line { fill: url(#column-fill); stroke: #17211e; stroke-width: 4; filter: url(#column-shadow); }
.column-line.selected { stroke: var(--green-dark); stroke-width: 7; }
.column-hit { fill: none; stroke: transparent; stroke-width: 36; cursor: pointer; }
.level-line { stroke: #c3d1cc; stroke-width: 1.25; stroke-dasharray: 2 3; }
.level-node { fill: white; stroke: var(--green-dark); stroke-width: 2.25; cursor: pointer; filter: drop-shadow(0 2px 3px rgb(12 75 56 / 18%)); }
.level-node.selected { fill: var(--green); stroke: white; stroke-width: 4; }
.view-title { fill: var(--green-dark); font-size: 13px; font-weight: 650 !important; letter-spacing: .1em; }
.view-caption { fill: var(--muted); font-size: 10px; }
.level-label, .segment-label { fill: var(--black); font-size: 11px; }
.segment-label { font-weight: 600 !important; }
.load-axial { stroke: #101715; fill: none; stroke-width: 2; }
.load-x { stroke: #d94848; fill: none; stroke-width: 2; }
.load-y { stroke: #2674c8; fill: none; stroke-width: 2; }
.load-label { font-size: 9px; font-weight: 560 !important; paint-order: stroke fill; stroke: white; stroke-width: 3px; stroke-linejoin: round; }
.load-label.axial { fill: #101715; }
.load-label.x { fill: #b62f2f; }
.load-label.y { fill: #1e5fa8; }
.load-anchor { stroke: white; stroke-width: 1.5; }
.load-anchor.x { fill: #d94848; }
.load-anchor.y { fill: #2674c8; }
.load-anchor.axial { fill: #101715; }
.load-leader { fill: none; stroke-width: 1; stroke-dasharray: 3 3; }
.load-leader.x { stroke: #d94848; }
.load-leader.y { stroke: #2674c8; }
.load-leader.axial { stroke: #101715; }
.load-group { cursor: pointer; }
.load-group.selected path, .load-group.selected line, .load-group.selected polyline { stroke-width: 6; filter: drop-shadow(0 1px 2px rgb(8 127 91 / 30%)); }
.support-symbol { fill: white; stroke: #26332f; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.support-symbol.fixed { fill: none; }
.support-symbol circle { fill: white; }
.support-caption { fill: #52615b; stroke: none; font-size: 8px; font-weight: 560 !important; letter-spacing: .06em; }
.section-preview-shape { fill: url(#column-fill); stroke: #17211e; stroke-width: 2.5; filter: url(#column-shadow); }
.section-bar { fill: var(--green); stroke: var(--black); stroke-width: 1.5; }
.canvas-legend .legend-column { height: 5px; background: var(--black); }
.canvas-legend .legend-load-x { height: 2px; background: #d94848; }
.canvas-legend .legend-load-y { height: 2px; background: #2674c8; }
.canvas-legend .legend-axial { height: 2px; background: #101715; }
.load-tool-options, .support-tool-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.support-tool-options { display: grid; gap: 5px; }
.support-tool-options button { display: grid; min-height: 38px; padding: 6px 8px; text-align: left; }
.support-tool-options button b { font-size: 8px; }
.support-tool-options button small { margin-top: 2px; color: inherit; font-size: 6.5px; font-weight: 420; }
.canvas-case { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 7px; font-weight: 600; }
.canvas-case select { min-width: 132px; height: 28px; padding: 0 24px 0 8px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--black); font: inherit; }
.canvas-mode button { align-self: start; min-height: 26px; margin-top: 7px; padding: 4px 8px; border: 1px solid var(--green); border-radius: 6px; background: white; color: var(--green-dark); font-size: 7px; font-weight: 650; }
.selection-emphasis { box-shadow: inset 3px 0 0 var(--green); background: #fbfefd; }
.axis-triad circle { fill: #101715; }
.axis-triad line, .view-axes line { fill: none; stroke-width: 2; stroke-linecap: round; }
.axis-x { stroke: #d94848; }
.axis-y { stroke: #2674c8; }
.axis-z { stroke: #087f5b; }
.axis-label { fill: #34423d; font-size: 9px; font-weight: 650 !important; }
.axis-label.x { fill: #b62f2f; }
.axis-label.y { fill: #1e5fa8; }
.axis-label.z { fill: #087f5b; }
.four-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.verification-board { display: grid; gap: 10px; margin: 14px 0; }
.column-check-card { overflow: hidden; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 8px; background: #fff; }
.column-check-card.failed { border-left-color: var(--danger); }
.column-check-card > header { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; background: #f8faf9; }
.column-check-card > header strong { color: var(--black); font-size: 10px; }
.column-check-card > header span { color: var(--muted); font-size: 8px; }
.column-check-table { min-width: 900px; }
.column-check-table th:first-child, .column-check-table td:first-child { width: 26px; padding-right: 0; }
.column-check-table td:nth-child(2) { min-width: 210px; text-align: left; white-space: normal; }
.column-check-table td:nth-child(2) strong { display: block; color: var(--black); font-size: 8px; }
.column-check-table td:nth-child(2) small { display: block; color: var(--muted); font-size: 6.5px; }
.column-check-table td:last-child { min-width: 250px; color: var(--muted); text-align: left; white-space: normal; }
.check-dot { display: block; width: 8px; height: 8px; margin: auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-pale); }
.column-check-table tr.failed { background: #fffafa; }
.column-check-table tr.failed .check-dot { background: var(--danger); box-shadow: 0 0 0 3px #ffe7e7; }
.column-diagrams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 14px 0; }
.diagram-card { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.diagram-card h3 { margin: 0 0 8px; color: var(--black); font-size: 10px; }
.diagram-card svg { display: block; width: 100%; height: 230px; }
.interaction-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; }
.interaction-card { padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.interaction-card h3 { margin: 0 0 8px; color: var(--black); font-size: 11px; }
.interaction-card svg { display: block; width: 100%; height: 240px; }
.interaction-surface { fill: rgb(22 164 118 / 12%); stroke: var(--green-dark); stroke-width: 2; }
.interaction-demand { stroke: #d94848; stroke-width: 2; }
.interaction-point { fill: #d94848; }
.sheet-page { fill: white; stroke: #bdc9c4; stroke-width: 2; }
.sheet-frame { fill: none; stroke: #101715; stroke-width: 2; }
.sheet-title { fill: #101715; font-size: 18px; font-weight: 600 !important; }
.sheet-subtitle { fill: #087f5b; font-size: 10px; font-weight: 600 !important; letter-spacing: .12em; }
.detail-concrete { fill: #edf1ef; stroke: #101715; stroke-width: 2.2; }
.detail-longitudinal { fill: none; stroke: #e5484d; stroke-width: 4.8; }
.detail-tie { fill: none; stroke: #101715; stroke-width: 3.4; }
.detail-cross-tie { fill: none; stroke: #2563eb; stroke-width: 3; }
.detail-hook { fill: none; stroke: #101715; stroke-width: 2; stroke-linecap: round; }
.detail-bar-shape { stroke-linecap: round; stroke-linejoin: round; }
.detail-section-bar { fill: #e5484d; stroke: white; stroke-width: 1.2; }
.detail-dimension { fill: none; stroke: #6b7873; stroke-width: 1; }
.detail-dimension-label { fill: #596760; font-size: 7px; }
.detail-text { fill: #26332f; font-size: 9px; }
.detail-callout { fill: #087f5b; font-size: 9px; font-weight: 600 !important; }
.material-table-frame { fill: white; stroke: #101715; stroke-width: 1.5; }
.material-table-head { fill: #e7f5ef; stroke: none; }
.material-table-line { stroke: #9eada7; stroke-width: 1; }
.material-table-label { fill: #101715; font-size: 8px; font-weight: 650 !important; letter-spacing: .04em; }
.material-table-text { fill: #26332f; font-size: 8px; }

@media (max-width: 1280px) {
  .workspace { grid-template-columns: 310px minmax(0, 1fr); }
  .column-canvas-surface { height: 390px; }
  .topbar { grid-template-columns: 230px minmax(120px, 1fr) auto; }
  .save-state { display: none; }
}