:root {
    --navy: #123047;
    --navy-2: #1d425d;
    --blue: #1677a8;
    --sky: #eaf5fa;
    --orange: #e8792e;
    --green: #21845a;
    --red: #c43d3d;
    --amber: #a96913;
    --ink: #24313a;
    --muted: #667681;
    --line: #d3dbe1;
    --paper: #ffffff;
    --panel-bg: #f4f7f9;
    --cad-bg: #101d27;
    --shadow: 0 8px 24px rgba(17, 48, 71, .08);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0; color: var(--ink); background: #e7edf0;
    font-family: Inter, "Segoe UI", Arial, sans-serif; line-height: 1.4;
    height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
sub { font-size: .72em; }

/* ===== RIBBON ===== */
.ribbon { flex: 0 0 auto; background: linear-gradient(#fbfcfd, #eef2f5); border-bottom: 1px solid #b9c5cc; }
.ribbon-tabs { display: flex; align-items: center; gap: 2px; padding: 4px 8px 0; background: var(--navy); }
.ribbon-brand { display: flex; align-items: center; gap: 7px; color: #fff; font-weight: 800; letter-spacing: .02em; padding: 0 14px 4px 4px; }
.ribbon-mark { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid rgba(255,255,255,.6); border-radius: 7px; font-size: .72rem; }
.ribbon-tab { padding: 7px 16px; border: 0; border-radius: 7px 7px 0 0; color: #c8dae6; background: transparent; font-weight: 700; font-size: .85rem; }
.ribbon-tab:hover { color: #fff; background: rgba(255,255,255,.08); }
.ribbon-tab.active { color: var(--navy); background: var(--ribbon-pane-bg, #eef2f5); }
.ribbon-body { min-height: 80px; padding: 7px 10px; }
.ribbon-pane { display: none; gap: 8px; align-items: stretch; }
.ribbon-pane.active { display: flex; flex-wrap: wrap; }
.rb-group { display: grid; grid-template-rows: 1fr auto; gap: 4px; padding: 4px 10px 2px; border: 1px solid #d7dee3; border-radius: 6px; background: #fff; }
.rb-btns { display: flex; align-items: center; gap: 4px; }
.rb-btns.chips { flex-wrap: wrap; max-width: 360px; }
.rb-label { text-align: center; color: #62727c; font-size: .68rem; font-weight: 700; }
.rb-btn { display: grid; place-items: center; gap: 2px; min-width: 58px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; color: #234; background: transparent; }
.rb-btn b { font-size: 1.15rem; font-weight: 800; color: var(--blue); line-height: 1; }
.rb-btn span { font-size: .68rem; color: #4a5a64; text-align: center; line-height: 1.1; }
.rb-btn:hover { background: #eef7fc; border-color: #c5e0ee; }
.layer-chip { padding: 5px 9px; border: 1px solid #c6d0d6; border-radius: 99px; color: #6a7a84; background: #f6f8fa; font-size: .72rem; font-weight: 700; }
.layer-chip.on { color: #fff; border-color: var(--orange); background: var(--orange); }
.rb-btn.rb-future { opacity: .55; border: 1px dashed #b9c5cc; cursor: help; }
.rb-btn.rb-future b { color: #8a9aa4; }

/* ===== ÁREA DE TRABALHO (3 colunas) ===== */
.work { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 266px minmax(0, 1fr) 432px; }
.work > * { min-height: 0; }
.col-left { overflow-y: auto; padding: 12px; background: #eef2f5; border-right: 1px solid var(--line); }
.col-right { overflow-y: auto; padding: 12px; background: #eef2f5; border-left: 1px solid var(--line); }
.col-center { display: flex; flex-direction: column; overflow: hidden; background: var(--cad-bg); }

.viewport-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: #16313f; border-bottom: 1px solid #0b1820; }
.vt-title { color: #cddbe4; font-size: .82rem; font-weight: 700; }
.vt-spacer { flex: 1 1 auto; }
.vt-btn { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #2c4a5c; border-radius: 6px; color: #dce8ee; background: #1d3a4a; font-size: .95rem; }
.vt-btn:hover { background: #265066; }
.vt-btn.vt-wide { width: auto; padding: 0 10px; font-size: .74rem; font-weight: 700; }
.vt-sep { width: 1px; height: 20px; background: #2c4a5c; margin: 0 4px; }
.vt-toggle { opacity: .5; }
.vt-toggle.on { opacity: 1; border-color: var(--orange); color: #ffd9b0; }
.cad-wrap { flex: 1 1 auto; min-height: 0; }
#drawing { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
#drawing:active { cursor: grabbing; }
#wall3d { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#wall3d:active { cursor: grabbing; }

/* ===== Painéis laterais ===== */
.notice { margin-bottom: 12px; padding: 9px 11px; border-left: 4px solid var(--amber); border-radius: 6px; color: #674516; background: #fff5df; font-size: .78rem; }
details { margin-bottom: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); overflow: hidden; }
summary { padding: 10px 12px; color: var(--navy); font-weight: 800; cursor: pointer; user-select: none; background: #f7fafb; font-size: .86rem; }
details[open] summary { border-bottom: 1px solid var(--line); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 11px; }
.col-left .fields { grid-template-columns: 1fr 1fr; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 3px; color: #40515c; font-size: .72rem; font-weight: 700; }
.input-wrap { position: relative; }
.input-wrap input, .input-wrap select, .field > input {
    width: 100%; height: 34px; padding: 6px 32px 6px 8px; border: 1px solid #bdcbd3; border-radius: 6px;
    color: var(--ink); background: white; outline: none; font-size: .85rem;
}
.input-wrap input:focus, .input-wrap select:focus, .field > input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,119,168,.12); }
.unit { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); color: var(--muted); font-size: .7rem; pointer-events: none; }
.check-field { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.check-field input { width: 16px; height: 16px; accent-color: var(--blue); }
.check-field label { margin: 0; font-size: .76rem; font-weight: 700; color: #40515c; }

.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.metric { position: relative; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); overflow: hidden; }
.metric::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--blue); }
.metric.ok::before { background: var(--green); }
.metric.fail::before { background: var(--red); }
.metric.warn::before { background: var(--amber); }
.metric-label { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.metric-value { display: block; margin-top: 4px; color: var(--navy); font-size: 1.35rem; font-weight: 850; }
.metric-foot { font-size: .72rem; color: var(--muted); }

.panel { margin-bottom: 0; border: 1px solid var(--line); border-radius: 0 0 10px 10px; background: var(--paper); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; color: var(--navy); font-size: .92rem; }
.legend { display: flex; gap: 12px; color: var(--muted); font-size: .7rem; }
.legend i { display: inline-block; width: 12px; height: 8px; margin-right: 4px; border-radius: 2px; }
.diag-wrap { background: var(--cad-bg); padding: 6px; }
#diagrams { width: 100%; height: 320px; display: block; }

.tab-shell { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.tabbar { display: flex; gap: 3px; padding: 7px 7px 0; border-bottom: 1px solid var(--line); background: linear-gradient(#f9fbfc, #eef3f6); overflow-x: auto; }
.tab-btn { min-height: 34px; padding: 7px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0; color: #40515c; background: transparent; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.tab-btn.active { color: var(--navy); border-color: var(--line); background: var(--paper); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.checks { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px; }
.check-card { padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; }
.check-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.check-card h3 { margin: 0; color: var(--navy); font-size: .85rem; }
.badge { padding: 3px 8px; border-radius: 99px; color: white; font-size: .66rem; font-weight: 800; }
.badge.ok { background: var(--green); } .badge.fail { background: var(--red); } .badge.warn { background: var(--amber); }
.progress { height: 6px; margin: 10px 0 7px; border-radius: 9px; background: #dfe7eb; overflow: hidden; }
.progress span { display: block; height: 100%; max-width: 100%; background: var(--green); }
.check-card p { margin: 4px 0 0; color: var(--muted); font-size: .74rem; }

.bim-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.steel-list { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px; }
.steel-item { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfe; }
.steel-item strong { display: block; color: var(--navy); font-size: .85rem; }
.steel-item span { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; }

.btn { min-height: 34px; padding: 7px 12px; border: 1px solid transparent; border-radius: 7px; font-weight: 700; font-size: .85rem; }
.btn-primary { color: white; background: var(--orange); }
.btn-secondary { color: var(--navy); border-color: var(--line); background: #fff; }
.btn-light { color: var(--navy); border-color: var(--line); background: white; }
.btn-ghost { color: var(--blue); border-color: #b8d8e8; background: #f3fbff; }
.btn-sm { min-height: 28px; padding: 4px 9px; font-size: .78rem; }

/* ===== STATUS BAR ===== */
.statusbar { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 5px 14px; background: var(--navy); color: #c9dbe6; font-size: .76rem; }
.statusbar b { color: #fff; }
.st-pill { padding: 2px 10px; border-radius: 99px; background: #2a4a5e; color: #fff; font-weight: 800; }
.st-pill.ok { background: var(--green); } .st-pill.fail { background: var(--red); }
.st-spacer { flex: 1 1 auto; }

/* ===== Memorial ===== */
.report { padding: 26px 32px 36px; }
.report-cover { padding-bottom: 18px; border-bottom: 3px solid var(--navy); }
.rc-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rc-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--navy); border-radius: 9px; color: var(--navy); font-weight: 800; }
.rc-brand strong { color: var(--navy); font-size: 1rem; }
.rc-brand span:not(.rc-mark):not(.report-status) { color: var(--muted); font-size: .74rem; }
.rc-brand .report-status { margin-left: auto; }
.report-cover h1 { margin: 0 0 14px; color: var(--navy); font-size: 1.5rem; }
.rc-id { width: 100%; border-collapse: collapse; font-size: .8rem; }
.rc-id th, .rc-id td { padding: 7px 10px; border: 1px solid #ced8de; text-align: left; }
.rc-id th { width: 15%; color: var(--navy); background: #eef3f6; font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; }
.rc-id td { width: 35%; color: var(--ink); }
.report-status { padding: 9px 12px; border-radius: 7px; color: white; font-size: .74rem; font-weight: 850; white-space: nowrap; }
.report-status.ok { background: var(--green); } .report-status.fail { background: var(--red); }
.report-toc { margin: 18px 0 6px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfd; }
.report-toc h2 { margin: 0 0 8px; color: var(--navy); font-size: .95rem; border: 0; padding: 0; }
.report-toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 40px; color: var(--ink); font-size: .8rem; }
.report-toc li { margin: 2px 0; break-inside: avoid; }
.report-foot { margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; }
.report h2 { margin: 22px 0 9px; color: var(--navy); font-size: 1.02rem; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.report p, .report li { font-size: .82rem; }
.report .rep-note { padding: 9px 11px; border-radius: 6px; background: #fff5df; color: #674516; }
.report table { width: 100%; border-collapse: collapse; margin: 9px 0 15px; font-size: .77rem; }
.report th, .report td { padding: 6px 8px; border: 1px solid #ced8de; text-align: right; }
.report th { color: white; background: var(--navy-2); }
.report th:first-child, .report td:first-child { text-align: left; }
.report .rep-total th, .report .rep-total td { background: #eaf1f5; color: var(--navy); }
.formula { padding: 9px 12px; border-left: 3px solid var(--blue); background: var(--sky); font-family: "Cambria Math", Consolas, Georgia, serif; font-size: .83rem; }
.rep-fig { margin: 10px 0 16px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.rep-fig figcaption { margin-top: 6px; color: var(--muted); font-size: .76rem; text-align: center; }
.conclusion { padding: 13px; border-radius: 7px; font-weight: 700; }
.conclusion.ok { color: #155e3e; border: 1px solid #a8d9c2; background: #eaf8f1; }
.conclusion.fail { color: #852929; border: 1px solid #e5b0b0; background: #fff0f0; }
.signature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 50px; }
.signature { padding-top: 7px; border-top: 1px solid #53636d; text-align: center; font-size: .76rem; }
.screen-only { visibility: visible; }

/* ===== Modais ===== */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(18, 48, 71, .62); }
.modal.open { display: flex; }
.modal-card { width: min(1120px, 100%); max-height: min(92vh, 980px); overflow: hidden; border-radius: 14px; background: var(--paper); box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.modal-card.config-card { width: min(840px, 100%); }
.modal-card.tool-card { width: min(680px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: white; background: linear-gradient(120deg, var(--navy), var(--navy-2)); }
.modal-head h2 { margin: 0; font-size: 1rem; }
.modal-body { max-height: calc(92vh - 64px); overflow: auto; }
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.config-intro { margin: 0; padding: 13px 16px; color: var(--muted); border-bottom: 1px solid var(--line); background: #f8fbfd; font-size: .84rem; }
.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 16px; }
.config-field { display: grid; gap: 5px; }
.config-field.full { grid-column: 1 / -1; }
.config-field.check { display: flex; align-items: center; gap: 8px; }
.config-field label { color: #40515c; font-size: .78rem; font-weight: 800; }
.config-field input, .config-field select { width: 100%; height: 38px; padding: 7px 10px; border: 1px solid #bdcbd3; border-radius: 8px; background: white; outline: none; }
.config-field input[type=checkbox] { width: 18px; height: 18px; }
.config-field .input-wrap { width: 100%; }
.config-footer { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: #f8fafb; }

/* ferramentas */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; }
.tool-grid label { display: grid; gap: 5px; font-size: .8rem; font-weight: 700; color: #40515c; }
.tool-grid select, .tool-grid input { height: 38px; padding: 7px 10px; border: 1px solid #bdcbd3; border-radius: 8px; }
.tool-result { grid-column: 1 / -1; padding: 12px; border-radius: 8px; background: var(--sky); color: var(--navy); font-size: 1.05rem; }
.tool-result b { font-size: 1.2rem; }
.calc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; }
.calc-card { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfe; }
.calc-card h3 { margin: 0 0 9px; color: var(--navy); font-size: .9rem; }
.calc-card label { display: grid; gap: 4px; margin-bottom: 8px; font-size: .76rem; font-weight: 700; color: #40515c; }
.calc-card input, .calc-card select { height: 34px; padding: 6px 9px; border: 1px solid #bdcbd3; border-radius: 7px; }
.calc-card p { margin: 6px 0 0; color: var(--ink); font-size: .84rem; }

/* ===== abas da área de trabalho (estrutural / drenagem) ===== */
.work-tabs { flex: 0 0 auto; display: flex; gap: 4px; padding: 6px 12px 0; background: #dde5ea; border-bottom: 1px solid var(--line); }
.work-tab { padding: 7px 18px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; color: #40515c; background: transparent; font-weight: 800; font-size: .85rem; }
.work-tab:hover { color: var(--navy); background: #e7edf1; }
.work-tab.active { color: var(--navy); background: #eef2f5; border-color: var(--line); }

/* painéis por modo */
.pane-drenagem, .pane-3d, .pane-simulacao { display: none; }
body.mode-drenagem .pane-estrutural { display: none; }
body.mode-drenagem .pane-drenagem { display: block; }
.col-center > .pane-estrutural { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.col-center > .pane-drenagem, .col-center > .pane-3d, .col-center > .pane-simulacao { flex-direction: column; height: 100%; min-height: 0; }
body.mode-drenagem .col-center > .pane-estrutural { display: none; }
body.mode-drenagem .col-center > .pane-drenagem { display: flex; }
/* modo 3D: só o viewport central muda; parâmetros e resultados continuam visíveis */
body.mode-3d .col-center > .pane-estrutural { display: none; }
body.mode-3d .col-center > .pane-3d { display: flex; }
/* modo simulação: as três colunas trocam de conteúdo (como a drenagem) */
body.mode-simulacao .pane-estrutural { display: none; }
body.mode-simulacao .pane-simulacao { display: block; }
body.mode-simulacao .col-center > .pane-estrutural { display: none; }
body.mode-simulacao .col-center > .pane-simulacao { display: flex; }
.vt-stage { color: var(--muted); font-size: .78rem; font-weight: 700; margin: 0 4px 0 10px; }
#simStage { width: 140px; accent-color: var(--navy); }
#simField { font-size: .78rem; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); }

.drain-wrap { flex: 1 1 auto; min-height: 0; background: #fbfdfe; display: flex; }
.drain-wrap #drainage { width: 100%; height: 100%; }
.drain-results { padding: 12px; display: grid; gap: 10px; }
.drain-card { padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdfe; }
.drain-card strong { display: block; color: var(--navy); font-size: .85rem; }
.drain-card span { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; }
.drain-card.ok { border-left: 4px solid var(--green); }
.drain-card.warn { border-left: 4px solid var(--amber); }

.toast { position: fixed; right: 20px; bottom: 40px; z-index: 200; padding: 11px 15px; color: white; background: var(--navy); border-radius: 8px; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1180px) {
    body { height: auto; overflow: auto; }
    .work { grid-template-columns: 1fr; }
    .col-left, .col-right { overflow: visible; max-height: none; }
    .col-center { height: 70vh; }
    .summary-grid { grid-template-columns: 1fr 1fr; }
    .tool-grid, .calc-cards { grid-template-columns: 1fr; }
}

@media print {
    body { height: auto; overflow: visible; display: block; }
    .ribbon, .statusbar, .work, .work-tabs, .toast, .modal-head { display: none !important; }
    .modal, .modal-card, .modal-body { position: static; display: block !important; max-height: none; padding: 0; overflow: visible; background: white; box-shadow: none; }
    .report { padding: 0; }
    .report h2 { break-after: avoid; }
    .report table, .formula, .conclusion, .rep-fig, .rc-id, .report-toc { break-inside: avoid; }
    .report-toc { break-after: page; }
    .rep-fig { background: #fff !important; }
    .report th, .rc-id th, .report-status, .conclusion, .rep-note, .formula {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    @page { size: A4; margin: 14mm; }
}