:root { --ink:#223a41; --muted:#5a6a73; --line:#d8e0e4; --accent:#236b69; --paper:#f4f6f8; --white:#fff; --amber:#79521d; }
* { box-sizing:border-box; }
html { scroll-padding-top:20px; }
body { margin:0; color:var(--ink); background:var(--paper); font:14px/1.55 'Segoe UI',Arial,sans-serif; }
a { color:inherit; text-underline-offset:3px; }
a:hover { color:#175959; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex='-1']:focus-visible { outline:3px solid #297e87; outline-offset:4px; }
.export-pdf { margin-top:12px; padding:6px 10px; border:1px solid var(--line); border-radius:3px; background:var(--white); color:var(--muted); font:inherit; font-size:11px; cursor:pointer; }
.export-pdf:hover { border-color:var(--accent); color:var(--accent); }
.print-note { display:none; }
[hidden] { display:none !important; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.3; }
p + p { margin-top:12px; }
ul,ol { padding-left:20px; }
li + li { margin-top:8px; }
summary { cursor:pointer; font-weight:600; }
details[open] > summary { margin-bottom:14px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:absolute; top:-100px; left:20px; z-index:10; background:white; padding:12px; }
.skip-link:focus { top:12px; }
.site-header { min-height:66px; padding:16px 28px; display:flex; align-items:center; gap:24px; background:var(--white); border-bottom:1px solid var(--line); }
.brand { text-decoration:none; font-size:22px; font-weight:700; letter-spacing:-.6px; white-space:nowrap; }
.brand span { font-size:14px; font-weight:500; letter-spacing:0; }
nav { display:flex; gap:24px; margin-left:auto; font-size:12px; }
nav a { text-decoration:none; }
nav a:hover { text-decoration:underline; }
.internal-label { color:var(--muted); font-size:9px; letter-spacing:1px; border:1px solid var(--line); padding:4px 7px; border-radius:3px; }
.workspace { display:grid; grid-template-columns:174px minmax(0,1fr) 286px; gap:22px; max-width:1720px; margin:auto; padding:28px 24px 42px; align-items:start; }
.eyebrow { font-size:9px; font-weight:700; letter-spacing:1.4px; color:var(--muted); }
.journey { position:sticky; top:24px; font-size:11px; }
.journey h2 { margin-top:9px; font-size:15px; font-weight:600; }
.journey ol { list-style:none; padding:0; margin:25px 0 20px; }
.journey li { display:flex; gap:12px; padding:13px 9px; margin:0; color:var(--muted); border-left:1px solid #cbd6d9; }
.journey li > span { font-size:10px; color:#6b7c85; flex-shrink:0; }
.journey .current { border-left:3px solid var(--accent); padding-left:7px; background:#e0eeeb; color:#215b57; border-radius:0 4px 4px 0; }
.current strong { display:block; font-size:13px; }
.current small { display:block; letter-spacing:1px; font-size:8px; margin-bottom:4px; }
.current em { display:block; font-size:10px; font-style:normal; margin-top:4px; }
.journey-note { border-top:1px solid var(--line); padding-top:15px; color:var(--muted); font-size:10px; line-height:1.7; }
.journey > a { display:block; margin-top:15px; font-size:10px; }
.landscape-main { min-width:0; }
.view-header { display:flex; justify-content:space-between; gap:12px; align-items:center; }
h1 { font-size:25px; letter-spacing:-.7px; margin-top:5px; font-weight:600; }
.view-status { border:1px solid #dbcaab; background:#faf2e4; padding:5px 9px; border-radius:3px; font-size:10px; color:var(--amber); white-space:nowrap; }
.view-intro { font-size:12px; color:var(--muted); max-width:720px; margin:12px 0 22px; }
.current-status { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:14px; padding:10px 12px; border:1px solid #c8d8d9; border-left:3px solid #337c78; background:#e9f2f1; color:#315d60; font-size:10px; }
.current-status strong { letter-spacing:1.2px; font-size:11px; color:#215d5b; }
.current-status span + span { border-left:1px solid #b4c9ca; padding-left:18px; }
.canvas { background:#fcfdfd; border:1px solid #d1dce0; border-radius:5px; padding:0 18px 15px; }
.layer-title { display:flex; align-items:center; justify-content:space-between; gap:12px; height:44px; }
.layer-title h2 { font-size:11px; text-transform:uppercase; letter-spacing:1px; font-weight:700; }
.layer-title > span { color:var(--muted); font-size:10px; }
.node-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.architecture-node { display:flex; flex-direction:column; gap:8px; padding:15px 14px; border:1px solid #bdcdd2; border-top:3px solid #789f9a; border-radius:3px; text-decoration:none; background:#f1f7f4; min-width:0; }
.architecture-node:hover { background:#e8f2ee; border-color:#508a80; }
.node-type { display:flex; justify-content:space-between; gap:6px; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:#496861; }
.architecture-node strong { font-size:17px; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.node-status { margin-top:auto; font-size:10px; font-weight:600; color:#416458; padding-top:8px; }
.node-note { font-size:10px; line-height:1.5; color:var(--muted); }
.architecture-node[aria-current] { outline:2px solid #246e76; outline-offset:3px; background:#eaf4f6; }
.architecture-node[aria-current]::after { content:'Selecionado'; font-size:9px; color:#23616a; }
.cross-layer-relations { height:200px; position:relative; }
.cross-connectors { position:absolute; inset:0; width:100%; height:200px; overflow:visible; pointer-events:none; }
svg path { fill:none; stroke:#678b94; stroke-width:1.5; vector-effect:non-scaling-stroke; }
svg marker path { fill:#426e76; stroke:none; }
.association-path { stroke:#889ca4; }
.orientation-path { stroke:#377b78; }
.relation-labels { position:absolute; top:24px; left:7%; right:7%; display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.relation-link { display:block; font-size:10px; line-height:1.4; color:#365c65; text-decoration:none; text-align:center; background:#fcfdfd; padding:4px 6px; border:1px solid #d9e3e6; border-radius:3px; }
.relation-link:hover, .relation-link[aria-current] { border-color:#32727b; background:#eaf4f6; }
.relation-endpoints { display:block; font-size:9px; color:var(--muted); margin-bottom:3px; }
.business-layer { position:absolute; top:97px; left:9%; right:9%; background:#f1f3f5; border:1px dashed #c6d1d8; border-radius:3px; padding:10px 12px; color:var(--muted); }
.business-layer h2 { font-size:10px; text-transform:uppercase; letter-spacing:.8px; margin-bottom:5px; }
.business-layer p { font-size:10px; margin:2px 0; }
.state-text { font-weight:600; }
.domain-layer > .layer-title > span { display:none; }
.domain-layer .architecture-node { background:#eef4f8; border-top-color:#7195aa; }
.domain-layer .architecture-node strong { font-size:21px; }
.domain-layer .node-type { color:#416478; }
.domain-layer .node-status { color:#76501c; }
.model-connection { position:relative; height:78px; display:flex; align-items:center; justify-content:center; }
.model-connection svg { position:absolute; top:0; left:50%; width:10px; height:100%; transform:translateX(-50%); }
.model-connection .relation-link { position:relative; max-width:85%; }
.model-expansion { border:1px solid #c7d6df; border-top:0; background:#f8fafb; padding:13px 16px; font-size:12px; }
.model-expansion > summary { display:flex; justify-content:space-between; }
.model-expansion > summary::before { content:'+'; margin-right:8px; }
.model-expansion[open] > summary::before { content:'−'; }
.model-expansion > summary span { margin-left:auto; }
.model-warning { background:#fcf3e4; border-left:2px solid #b7894c; padding:10px 12px; font-size:11px; color:#735124; margin:15px 0; }
.model-body { display:flex; gap:20px; align-items:stretch; padding:8px 0; }
.revisit-bracket { border-left:1px dashed #8ea4ab; border-top:1px dashed #8ea4ab; border-bottom:1px dashed #8ea4ab; width:25px; flex-shrink:0; position:relative; }
.revisit-bracket span { writing-mode:vertical-rl; font-size:10px; color:var(--muted); position:sticky; top:20px; padding:12px 2px; }
.movements { flex:1; list-style:none; padding:0; margin:0; min-width:0; }
.organic-model { flex:1; min-height:250px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; align-items:center; position:relative; padding:20px; background:radial-gradient(circle at center, #e9f1f3 0 2px, transparent 3px), radial-gradient(ellipse at center, transparent 42%, #d7e4e7 43%, transparent 44%); border:1px dashed #c3d2d8; border-radius:50%; }
.organic-model::before { content:'MODELO CONCEITUAL'; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); font-size:9px; letter-spacing:1px; color:#718188; white-space:nowrap; }
.organic-model .movement-node { position:relative; z-index:1; background:#fff; }
.organic-model .movement-node:nth-child(2), .organic-model .movement-node:nth-child(5) { transform:translateY(22px); }
.organic-model .movement-node:nth-child(3), .organic-model .movement-node:nth-child(4) { transform:translateY(-22px); }
.movements li { margin:0; }
.movement-node { display:flex; gap:12px; padding:12px 14px; border:1px solid #c2d1d9; background:white; border-radius:2px; }
.movement-number { display:none; }
.movement-node h3 { font-size:13px; font-weight:600; }
.movement-node summary { list-style:none; }
.movement-node summary::-webkit-details-marker { display:none; }
.movement-node summary::before { content:'+'; display:inline-block; margin-right:7px; color:#557b83; }
.movement-node[open] summary::before { content:'−'; }
.movement-node p { font-size:11px; color:var(--muted); margin-top:5px; }
.sequence-connector { display:flex; align-items:center; gap:10px; padding-left:28px; height:38px; }
.sequence-connector svg { height:36px; width:16px; }
.sequence-connector span { font-size:9px; color:var(--muted); }
.limits { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; }
.scope-note { margin:12px 0 18px; font-size:10px; color:var(--muted); }
.outcomes { font-size:11px; border-top:1px solid var(--line); padding:13px 0; }
.outcomes summary > span { float:right; font-size:9px; font-weight:400; color:var(--muted); }
.future-layers { display:flex; gap:8px; margin-top:12px; }
.future-layers > div { flex:1; display:flex; justify-content:space-between; gap:8px; padding:8px 10px; border:1px dashed #d5dee2; color:#5e6e78; align-items:center; }
.future-layers h2 { font-size:11px; font-weight:600; }
.future-layers span { font-size:10px; }
.provenance-rail { display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:14px; padding-top:12px; }
.provenance-rail a { font-size:10px; color:#456972; text-decoration:none; }
.provenance-rail a:hover { text-decoration:underline; }
.provenance-rail i { font-style:normal; color:#9aaeb4; padding-left:10px; }
.map-note { border-top:1px solid var(--line); padding-top:12px; font-size:10px; color:var(--muted); }
.legend { border-bottom:1px solid var(--line); padding:16px 0; font-size:11px; }
.questions { margin-top:22px; font-size:12px; }
.questions h2 { font-size:15px; }
.questions > p { color:var(--muted); font-size:11px; margin:5px 0 15px; }
.questions details { background:white; border:1px solid var(--line); padding:16px; border-radius:4px; }
.questions h3 { margin-top:18px; font-size:13px; }
.inspector { background:white; border:1px solid #cdd9df; border-radius:4px; font-size:12px; min-width:0; }
.landscape-enhanced .inspector { position:sticky; top:24px; max-height:calc(100vh - 48px); overflow-y:auto; scrollbar-width:thin; }
.inspector header { padding:14px 18px; border-bottom:1px solid var(--line); background:#f7f9fa; }
.inspector header > span { display:block; font-size:10px; color:var(--muted); margin-top:5px; }
.element-detail { padding:18px; border-bottom:1px solid var(--line); }
.element-detail h2 { font-size:17px; font-weight:600; }
.return-link { display:inline-block; font-size:10px; color:var(--muted); margin:8px 0 18px; }
.detail-title { font-weight:600; font-size:15px; margin:0 0 12px; }
.badge { display:inline-block; padding:3px 7px; background:#edf3f4; border:1px solid #d2dfe2; border-radius:3px; font-size:10px; margin-bottom:12px; }
.badge.validation { background:#faf0df; color:#745020; border-color:#e5d4b4; }
.element-detail > p, .element-detail .prose, .element-detail > ul { color:#4f616b; font-size:11px; }
.element-detail h3 { font-size:10px; text-transform:uppercase; letter-spacing:.6px; margin:22px 0 8px; }
.source-link { display:inline-block; font-size:10px; color:#286577; }
.activity { border-top:1px solid var(--line); margin-top:18px; }
.activity a { font-size:11px; }
.activity dl { display:grid; grid-template-columns:1fr 1fr; gap:5px 8px; font-size:10px; margin:14px 0; }
.activity dt { color:var(--muted); }
.activity dd { margin:0; font-weight:600; }
.activity p { font-size:10px; color:var(--muted); }
blockquote { margin:12px 0; padding-left:12px; border-left:2px solid #a6bec3; font-size:11px; color:#4f616b; }
.detail-note { margin-top:18px; }
.site-footer { border-top:1px solid var(--line); padding:18px 28px; display:flex; justify-content:space-between; gap:20px; background:white; }
.footer-brand { text-decoration:none; font-weight:600; font-size:13px; }
.footer-brand span { display:block; font-size:10px; font-weight:400; color:var(--muted); }
.site-footer p { font-size:10px; color:var(--muted); text-align:right; }
.source-page { max-width:900px; padding:30px 24px 60px; margin:auto; }
.source-banner { background:#eaf1f4; border:1px solid var(--line); padding:20px; margin:20px 0 35px; font-size:12px; }
.source-banner code { overflow-wrap:anywhere; font-size:11px; }
.document h1 { font-size:28px; margin-bottom:24px; }
.document h2 { font-size:21px; margin:30px 0 16px; }
.document h3 { font-size:17px; margin:24px 0 14px; }
.document table { border-collapse:collapse; width:100%; font-size:12px; margin:20px 0; }
.document td,.document th { border:1px solid #cbd7dd; padding:10px; text-align:left; overflow-wrap:anywhere; }
.document th { background:#e8eff2; }
.document hr { border:0; border-top:1px solid var(--line); margin:30px 0; }
.document [id]:target { background:#f5ead4; outline:8px solid #f5ead4; }
@media (min-width:1101px) { #inspector-home { align-self:stretch; } }
@media (max-width:1250px) {
  .workspace { grid-template-columns:145px minmax(0,1fr) 260px; gap:16px; padding:24px 18px; }
  .architecture-node { padding:13px 10px; }
  .node-grid { gap:9px; }
  .architecture-node strong { font-size:15px; }
  .internal-label { display:none; }
}
@media (max-width:1100px) {
  .workspace { grid-template-columns:160px minmax(0,1fr); }
  #inspector-home { grid-column:2; }
  .landscape-enhanced #inspector-home { display:none; }
  .landscape-enhanced .inspector { position:static; max-height:none; grid-column:1 / -1; margin:14px 0; }
  .cross-layer-relations:has(.inspector) { height:auto; padding:20px 0; }
  .cross-layer-relations:has(.inspector) .cross-connectors { display:none; }
  .cross-layer-relations:has(.inspector) .relation-labels { position:static; }
  .cross-layer-relations:has(.inspector) .business-layer { position:static; margin-top:15px; }
  .model-connection:has(.inspector) { height:auto; flex-direction:column; padding:12px 0; }
  .model-connection:has(.inspector) svg { display:none; }
  .model-connection .inspector { width:100%; }
  .node-grid:has(.inspector) { grid-template-columns:1fr; }
  .canvas:has(.node-grid .inspector) .cross-connectors { display:none; }
}
@media (max-width:760px) {
  .site-header { padding:16px 18px; flex-wrap:wrap; gap:14px; }
  .brand { font-size:20px; }
  .brand span { font-size:13px; }
  nav { margin:0; gap:20px; font-size:11px; }
  .workspace { grid-template-columns:1fr; gap:20px; padding:20px 14px; }
  .journey { position:static; border:1px solid var(--line); background:#eef3f4; padding:14px; }
  .journey h2 { font-size:13px; }
  .journey ol { display:grid; grid-template-columns:repeat(4,1fr); margin:14px 0; }
  .journey li { font-size:9px; padding:8px; gap:6px; }
  .current strong { font-size:11px; }
  .current em { font-size:9px; }
  .current small { font-size:7px; }
  .journey-note { font-size:10px; }
  .journey-note br { display:none; }
  .journey > a { margin-top:8px; }
  .view-header { align-items:start; }
  h1 { font-size:23px; }
  .view-status { font-size:9px; }
  .eyebrow { font-size:8px; }
  .canvas { padding:0 12px 14px; }
  .layer-title > span { display:none; }
  .node-grid { grid-template-columns:1fr; gap:10px; }
  .architecture-node { padding:15px; }
  .architecture-node strong { font-size:18px; }
  .cross-layer-relations { height:auto; padding:15px 0 0; }
  .cross-connectors { display:none; }
  .relation-labels { position:static; display:grid; grid-template-columns:1fr; gap:10px; }
  .relation-link { font-size:11px; padding:9px; }
  .relation-endpoints { font-size:10px; }
  .business-layer { position:static; margin-top:15px; padding:12px; }
  .business-layer p { font-size:11px; }
  .domain-layer .architecture-node strong { font-size:19px; }
  .model-body { gap:10px; }
  .movement-node { padding:12px; gap:8px; }
  .movement-node h3 { font-size:12px; }
  .model-expansion { padding:12px; }
  .future-layers > div { flex-direction:column; gap:4px; }
  .future-layers { display:block; }
  .future-layers > div + div { margin-top:6px; }
  .organic-model { border-radius:18px; grid-template-columns:1fr 1fr; padding:14px; }
  .organic-model::before { display:none; }
  .organic-model .movement-node:nth-child(n) { transform:none; }
  .current-status { gap:6px 12px; }
  .current-status span + span { padding-left:12px; }
  #inspector-home { grid-column:1; }
  .site-footer { padding:20px; flex-direction:column; }
  .site-footer p { text-align:left; }
  .document table { font-size:11px; }
  .document td,.document th { padding:7px; }
}
@media (max-width:420px) {
  .journey ol { grid-template-columns:repeat(2,1fr); }
  .view-header { flex-wrap:wrap; }
  .model-connection { height:95px; }
}
@media print {
  @page { size:A4 portrait; margin:12mm; }
  body { background:white; color:#223a41; }
  .workspace { display:block; max-width:none; margin:0; padding:0; }
  .site-header, .skip-link, .journey, #inspector-home,
  .landscape-enhanced #inspector-home, .inspector, .export-pdf,
  .interaction-hint, .source-link, .return-link, .node-type > span,
  .limits, .outcomes, .legend, .questions, .footer-brand { display:none !important; }
  .print-note { display:block; margin-top:10px; font-size:10px; color:var(--muted); }
  .view-header { flex-wrap:nowrap; }
  .view-header .eyebrow { font-size:12px; letter-spacing:.5px; }
  .view-intro { margin:10px 0 14px; }
  .canvas { padding:0 12px 12px; background:white; border:0; }
  .node-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .architecture-node { padding:12px; }
  .architecture-node strong { font-size:15px; }
  .domain-layer .architecture-node strong { font-size:18px; }
  .architecture-node[aria-current] { outline:none; background:inherit; }
  .architecture-node[aria-current]::after, .movement-node summary::before { display:none; }
  .relation-link[aria-current] { background:white; border-color:var(--line); }
  a { text-decoration:none; }
  .cross-layer-relations { height:200px; padding:0; break-inside:avoid; }
  .cross-connectors { display:block; }
  .relation-labels { position:absolute; top:24px; left:7%; right:7%; grid-template-columns:1fr 1fr; gap:28px; }
  .business-layer { position:absolute; top:97px; left:9%; right:9%; margin:0; padding:10px 12px; }
  .model-connection { height:78px; }
  .organic-model { grid-template-columns:repeat(3,minmax(0,1fr)); border-radius:50%; padding:20px; min-height:250px; }
  .organic-model::before { display:block; }
  .organic-model .movement-node:nth-child(2), .organic-model .movement-node:nth-child(5) { transform:translateY(22px); }
  .organic-model .movement-node:nth-child(3), .organic-model .movement-node:nth-child(4) { transform:translateY(-22px); }
  .movement-node { display:block; padding:12px; }
  .movement-node > p { display:none; }
  .movement-node[open] > summary { margin:0; }
  summary { list-style:none; }
  summary::-webkit-details-marker { display:none; }
  .revisit-bracket span { position:static; }
  .future-layers { display:flex; }
  .future-layers > div + div { margin-top:0; }
  .architecture-node, .strategy-layer, #modelo, .model-connection,
  .provenance-rail, .future-layers, .current-status, .site-footer { break-inside:avoid; }
  .layer-title, .model-connection { break-after:avoid; }
  .site-footer { display:block; padding:10px 0 0; background:white; }
  .site-footer p { text-align:left; }
}