:root { --topbar-height: 76px; --side-width: 284px; --right-width: 224px; --site-max: 1500px; --page: #ffffff; --ink: #303542; --subtext: #596475; --thin: #e7e9ed; --surface: #f7f8fa; --brand: #f03c06; --brand-bg: #fff1e8; --teal: #096995; --shadow: 0 15px 45px rgba(18,30,48,.09); }
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:98px}body{margin:0;background:var(--page);color:var(--ink);font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:1.72}a{color:inherit}button,input{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #4fd9ff;outline-offset:2px}.skip{position:absolute;left:8px;top:-100px;padding:8px 14px;background:white;z-index:100}.skip:focus{top:8px}.layout{min-height:100vh}.topbar{height:var(--topbar-height);position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:20px;padding:0 42px;background:#fff;border-bottom:1px solid var(--thin);box-shadow:0 2px 12px rgba(13,24,40,.025)}.logo{display:flex;align-items:center;flex-shrink:0}.logo img{width:109px;height:auto;max-height:50px}.top-divider{height:30px;width:1px;background:#dedfe3}.top-context{display:flex;flex-direction:column;line-height:1.3;gap:3px}.top-context strong{font-family:'Fira Sans',sans-serif;font-size:16px;font-weight:600;letter-spacing:-.25px}.top-context__label,.eyebrow{font-size:10px;letter-spacing:.12em;color:var(--brand);font-weight:800}.top-actions{margin-left:auto;display:flex;align-items:center;gap:13px}.top-search{color:#697489;background:#f8f9fb;border:1px solid #e5e8ed;padding:8px 13px;border-radius:9px;display:flex;align-items:center;gap:11px;min-width:245px;transition:background .15s}.top-search:hover{background:#f2f4f8}.top-search span:first-child{font-size:25px;line-height:1}.top-search kbd{margin-left:auto;font-size:10px;border:1px solid #d6dce4;background:white;border-radius:4px;padding:2px 5px}.release-tag{background:#eaf7f7;border:1px solid #d5eeee;color:#096995;border-radius:999px;padding:2px 11px;font-size:11px;font-weight:800}.sidebar{position:fixed;top:var(--topbar-height);bottom:0;left:0;width:var(--side-width);overflow:auto;background:#fafbfc;border-right:1px solid var(--thin);padding:26px 16px 24px 22px;display:flex;flex-direction:column;z-index:25}.sidebar-info{padding:0 10px 27px;display:flex;flex-direction:column;gap:4px}.sidebar-info strong{font-family:'Fira Sans',sans-serif;font-weight:700;font-size:19px;line-height:1.27;margin-top:4px}.sidebar-client{color:#788396;font-size:12px}.sidebar nav{display:flex;flex-direction:column;gap:21px}.section-label{font-weight:800;letter-spacing:.1em;color:#8c95a4;font-size:10px;line-height:1.3;margin:0 10px 8px}.sidebar-group{display:flex;flex-direction:column}.nav-link{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;text-decoration:none;color:#5c6576;font-weight:600;font-size:12px;line-height:1.38;margin:1px 0;transition:background .15s,color .15s}.nav-link:hover{background:#f0f2f5;color:#222}.nav-link.active{background:#fff0e6;color:#b93305;box-shadow:inset 3px 0 0 #f03c06}.nav-icon{width:17px;text-align:center;opacity:.75;font-size:13px;flex:0 0 17px}.sidebar-footer{margin-top:auto;padding:29px 10px 0;color:#8b94a2;font-size:10px}.status-indicator{width:7px;height:7px;border-radius:100%;background:#16a17c;display:inline-block;margin-right:5px}.main{margin-left:var(--side-width);padding-top:var(--topbar-height);min-height:100vh;display:flex;flex-direction:column}.main-grid{width:100%;max-width:var(--site-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) var(--right-width);gap:46px;padding:38px 51px 65px}.article{width:100%;max-width:822px;min-height:720px}.breadcrumbs{font-size:11px;color:#8d96a3;margin-bottom:30px;display:flex;gap:10px;align-items:center}.breadcrumbs a{text-decoration:none;color:#737f91}.breadcrumbs a:hover{color:var(--brand)}.crumb-chevron{font-size:17px;color:#c6cad0}.hero-label{font-size:11px;font-weight:800;color:var(--teal);letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}.article h1,.article h2,.article h3{font-family:'Fira Sans',sans-serif;color:#27313c;letter-spacing:-.02em}.article h1{font-size:38px;line-height:1.19;margin:0 0 19px;font-weight:700}.article .page-intro{font-size:16px;color:#687385;line-height:1.78;margin:0 0 28px}.article .meta{display:flex;gap:12px;align-items:center;color:#87909f;font-size:11px;padding:0 0 23px;border-bottom:1px solid var(--thin);margin-bottom:35px}.meta .dot{width:3px;height:3px;background:#bfc4cc;border-radius:50%}.article h2{font-size:25px;margin:39px 0 17px;line-height:1.35;scroll-margin-top:110px}.article h3{font-size:19px;margin:25px 0 12px}.article p{margin:0 0 19px;color:#535e6e}.article .lead{font-size:15px;line-height:1.83}.article p em{color:#7b8591}.article code{background:#f2f4f7;padding:2px 6px;border-radius:4px}.callout{border-radius:10px;padding:18px 19px 17px;margin:22px 0 28px;display:flex;gap:12px;border:1px solid #d8eaf5;background:#f1f8fc}.callout.notice{background:#eef8fc;border-color:#d8eff9}.callout.tip{background:#eff9f3;border-color:#d5eadc}.callout.warning{background:#fff8eb;border-color:#ffe4b7}.callout-icon{font-weight:bold;font-size:18px;line-height:1;color:#007caf}.callout.tip .callout-icon{color:#1e8e3e}.callout.warning .callout-icon{color:#b77900}.callout strong{display:block;color:#27313c;margin-bottom:4px}.callout p{font-size:12px;line-height:1.7;margin:0}.steps{list-style:none;counter-reset:steps;padding:0;margin:0 0 27px;display:flex;flex-direction:column;gap:15px}.steps li{counter-increment:steps;display:flex;align-items:flex-start;gap:14px;color:#535e6e}.steps li:before{content:counter(steps);background:#fff0e7;color:#cb3706;width:28px;height:28px;min-width:28px;text-align:center;line-height:28px;font-weight:800;border-radius:50%;font-size:12px}.steps .step-text{padding-top:3px}.figure{margin:26px 0 33px}.figure img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;border:1px solid #e3e6e9;border-radius:10px;box-shadow:0 5px 16px rgba(25,35,50,.04);background:#f6f7f9}.figure figcaption{color:#8b95a3;text-align:center;font-size:11px;margin-top:10px}.table-outer{overflow:auto;width:100%;margin:15px 0 31px;border:1px solid #e5e8ed;border-radius:10px}.doc-table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}.doc-table th{background:#f6f8fa;color:#38475a;font-weight:800;border-bottom:1px solid #e0e5e9}.doc-table td,.doc-table th{padding:14px 15px;vertical-align:top;min-width:110px}.doc-table tr+tr td{border-top:1px solid #eceef1}.doc-table td{color:#626b78}.doc-table tr:nth-child(even) td{background:#fcfcfd}.doc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0 32px}.doc-card{background:#fff;border:1px solid #e3e8ec;border-radius:11px;padding:19px;text-decoration:none;display:flex;gap:10px;flex-direction:column;transition:box-shadow .2s,border-color .2s,transform .2s}.doc-card:hover{box-shadow:0 7px 25px #23304213;border-color:#f4ac88;transform:translateY(-1px)}.doc-card strong{font-family:'Fira Sans',sans-serif;font-size:16px;color:#333e4b}.doc-card span{font-size:12px;color:#7c8695;flex:1}.doc-card b{color:var(--brand);font-size:12px}.flow{display:flex;align-items:stretch;gap:7px;margin:19px 0 35px}.flow-item{background:#fff;border:1px solid #e0e5e9;border-radius:11px;padding:15px 11px;flex:1;min-width:0}.flow-item strong{color:#334052;font-family:'Fira Sans',sans-serif;font-size:13px;display:block}.flow-item span{color:#818c9a;font-size:11px}.flow-arrow{color:#f03c06;align-self:center;font-size:20px;font-weight:800;flex:0 0 auto}.checks{padding:0;list-style:none;margin:0 0 26px;display:grid;gap:12px}.checks label{display:flex;align-items:flex-start;gap:11px;border:1px solid #e3e8ed;border-radius:9px;padding:12px;cursor:pointer;color:#5e6879;font-size:12px}.checks input{accent-color:#f03c06;margin-top:4px;flex-shrink:0}.checks input:checked+span{text-decoration:line-through;color:#a8afb9}.scenario{border:1px solid #e2e7eb;border-radius:10px;margin:18px 0 28px;padding:22px;background:#fff}.scenario p{font-size:13px;margin-bottom:10px}.scenario strong{color:#324455}.scenario .steps{margin-top:14px;margin-bottom:14px}.scenario .steps li{font-size:12px}.scenario .result{border-left:3px solid #14a17c;background:#f4fbf6;padding:10px 14px;font-size:12px;border-radius:3px;margin-top:15px}.page-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border-top:1px solid var(--thin);padding-top:31px;margin-top:50px}.page-nav a{padding:17px 20px;border:1px solid #e4e7ea;border-radius:10px;text-decoration:none;display:flex;flex-direction:column;gap:5px;min-height:88px}.page-nav a:hover{border-color:#f7bca1;background:#fffaf8}.page-nav a small{color:#8b95a2;font-size:11px}.page-nav a strong{font-weight:700;font-size:13px;color:#354150}.page-nav a:last-child{text-align:right;grid-column:2}.page-nav a:first-child:last-child{grid-column:1}.toc{border-left:1px solid #eff0f2}.toc-inner{position:sticky;top:114px;padding-left:22px}.toc-label{font-size:10px;font-weight:800;color:#818a98;letter-spacing:.08em;padding-bottom:12px}.toc nav{display:flex;flex-direction:column;border-left:1px solid #e5e7ea;gap:2px}.toc a{padding:7px 0 7px 13px;font-size:11px;line-height:1.5;color:#86909f;text-decoration:none}.toc a:hover{color:#dd410e;border-left:2px solid #f03c06;margin-left:-1px}.toc-help{margin-top:33px;background:#f6f8fa;padding:17px 16px;border-radius:10px}.toc-help strong{font-size:12px}.toc-help p{color:#8b95a2;font-size:11px;margin:4px 0 0}.footer{margin-top:auto;border-top:1px solid var(--thin);padding:18px 51px;display:flex;justify-content:space-between;color:#929aa6;font-size:11px}.search-dialog{border:1px solid #e4e7ec;border-radius:14px;padding:0;width:min(640px,calc(100% - 30px));max-height:75vh;box-shadow:0 28px 90px rgba(20,30,48,.25);position:fixed;top:15%;margin-top:0}.search-dialog::backdrop{background:rgba(22,30,46,.52)}.search-head{padding:12px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #e5e8ed}.search-head>span{font-size:26px;color:#8a95a4}.search-head input{min-width:0;flex:1;border:none;outline:none;font-size:14px}.search-head button{border:1px solid #e1e5ea;background:#f7f8f9;border-radius:5px;color:#737e8a;padding:3px 9px;font-size:11px}.search-results{max-height:350px;overflow:auto;padding:8px}.search-result{display:flex;align-items:flex-start;gap:10px;padding:13px 12px;border-radius:8px;text-decoration:none}.search-result:hover,.search-result:focus{background:#fff0e6}.search-result-icon{font-size:18px;color:#f03c06}.search-result strong{display:block;font-size:13px;color:#303b48}.search-result span:last-child{display:block;font-size:11px;color:#8992a0}.search-empty{padding:35px;text-align:center;color:#8c95a2;font-size:13px}.search-caption{border-top:1px solid #e9ecef;padding:9px 16px;color:#9aa1ac;font-size:10px}.mobile-only{display:none}.overlay{display:none}@media(max-width:1180px){:root{--side-width:260px;--right-width:180px}.main-grid{gap:25px;padding:33px 30px 65px}.topbar{padding:0 26px}.toc-inner{padding-left:17px}}@media(max-width:970px){:root{--right-width:0px}.main-grid{display:block;max-width:840px}.toc{display:none}.article{max-width:100%}.top-search{min-width:auto}.top-search span:nth-child(2){display:none}.top-search kbd{display:none}}@media(max-width:720px){:root{--topbar-height:67px}.topbar{padding:0 16px;gap:12px}.mobile-only{display:block}.icon-btn{border:none;background:transparent;padding:7px 9px;font-size:22px;color:#364457}.logo img{width:90px}.top-divider{height:25px}.top-context__label{font-size:8px}.top-context strong{font-size:12px}.release-tag{display:none}.top-search{padding:6px 10px}.sidebar{transform:translateX(-103%);transition:transform .2s;width:min(305px,85vw);box-shadow:10px 0 35px rgba(16,22,32,.08)}.sidebar.open{transform:translateX(0)}.overlay.visible{display:block;position:fixed;inset:var(--topbar-height) 0 0;background:rgba(8,22,40,.34);z-index:23}.main{margin-left:0}.main-grid{padding:29px 19px 40px}.breadcrumbs{margin-bottom:23px}.article h1{font-size:30px}.article h2{font-size:23px}.article .page-intro{font-size:14px}.doc-cards{grid-template-columns:1fr}.flow{flex-direction:column}.flow-arrow{transform:rotate(90deg)}.page-nav{gap:7px}.page-nav a{padding:13px 12px}.footer{padding:20px 17px;gap:13px;flex-wrap:wrap}.top-search span:first-child{font-size:22px}}
@media print{.topbar,.sidebar,.toc,.page-nav,.footer{display:none!important}.main{margin:0;padding:0}.main-grid{display:block;padding:0}.article{max-width:100%;min-height:0}.figure img{box-shadow:none}.article h2{break-after:avoid}.figure,.table-outer,.scenario{break-inside:avoid}}

/* ============================================================
   BOA Digital — modo escuro (tokens de variables.css)
   As variantes escuras do Design System são PROPOSTAS no pacote,
   e são adotadas aqui como base do manual.
   ============================================================ */
.theme-toggle {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink);
  transition: background-color .2s ease, transform .15s ease;
}
.theme-toggle:hover { background: var(--surface); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle-icon, .theme-toggle-icon svg { display: block; width: 19px; height: 19px; }
.theme-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
html[data-theme="dark"] {
  --page: var(--neutral-0); --ink: var(--neutral-800);
  --subtext: var(--neutral-600); --thin: var(--neutral-200);
  --surface: var(--neutral-50); --brand: var(--scarlet-500);
  --brand-bg: var(--scarlet-100); --teal: var(--ocean-600);
  --shadow: 0 15px 45px rgba(0,0,0,.25);
}
html[data-theme="dark"] body { color-scheme: dark; }
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .doc-card,
html[data-theme="dark"] .flow-item,
html[data-theme="dark"] .scenario,
html[data-theme="dark"] .search-dialog { background: var(--neutral-0); }
html[data-theme="dark"] .sidebar { background: var(--neutral-50); }
html[data-theme="dark"] .skip { background: var(--neutral-50); color: var(--neutral-800); }
html[data-theme="dark"] .top-divider,
html[data-theme="dark"] .meta .dot { background: var(--neutral-200); }
html[data-theme="dark"] .top-search,
html[data-theme="dark"] .top-search kbd,
html[data-theme="dark"] .search-head button {
  background: var(--neutral-50); border-color: var(--neutral-200); color: var(--neutral-600);
}
html[data-theme="dark"] .top-search:hover,
html[data-theme="dark"] .nav-link:hover { background: var(--neutral-100); color: var(--neutral-800); }
html[data-theme="dark"] .release-tag { background: var(--ocean-50); border-color: var(--ocean-100); color: var(--ocean-600); }
html[data-theme="dark"] .sidebar-client,
html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] .breadcrumbs a,
html[data-theme="dark"] .article .meta,
html[data-theme="dark"] .toc a,
html[data-theme="dark"] .toc-label,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .figure figcaption,
html[data-theme="dark"] .page-nav a small,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .search-caption,
html[data-theme="dark"] .search-result span:last-child,
html[data-theme="dark"] .search-empty,
html[data-theme="dark"] .sidebar-footer,
html[data-theme="dark"] .flow-item span,
html[data-theme="dark"] .doc-card span { color: var(--neutral-400); }
html[data-theme="dark"] .nav-link { color: var(--neutral-600); }
html[data-theme="dark"] .nav-link.active { background: var(--scarlet-100); color: var(--scarlet-700); box-shadow: inset 3px 0 0 var(--scarlet-500); }
html[data-theme="dark"] .article h1,
html[data-theme="dark"] .article h2,
html[data-theme="dark"] .article h3,
html[data-theme="dark"] .callout strong,
html[data-theme="dark"] .doc-card strong,
html[data-theme="dark"] .flow-item strong,
html[data-theme="dark"] .scenario strong,
html[data-theme="dark"] .page-nav a strong,
html[data-theme="dark"] .search-result strong,
html[data-theme="dark"] .toc-help strong { color: var(--neutral-700); }
html[data-theme="dark"] .article p,
html[data-theme="dark"] .article .page-intro,
html[data-theme="dark"] .steps li,
html[data-theme="dark"] .checks label,
html[data-theme="dark"] .doc-table td { color: var(--neutral-600); }
html[data-theme="dark"] .hero-label { color: var(--ocean-600); }
html[data-theme="dark"] .article code { background: var(--neutral-100); color: var(--neutral-800); }
html[data-theme="dark"] .callout.notice,
html[data-theme="dark"] .callout { background: var(--ocean-50); border-color: var(--ocean-100); }
html[data-theme="dark"] .callout.tip { background: var(--color-success-soft); border-color: #26563a; }
html[data-theme="dark"] .callout.warning { background: var(--color-warning-soft); border-color: #6a4c18; }
html[data-theme="dark"] .callout-icon { color: var(--ocean-600); }
html[data-theme="dark"] .callout.tip .callout-icon { color: var(--color-success); }
html[data-theme="dark"] .callout.warning .callout-icon { color: var(--color-warning); }
html[data-theme="dark"] .steps li::before { background: var(--scarlet-100); color: var(--scarlet-700); }
html[data-theme="dark"] .figure img { background: var(--neutral-50); border-color: var(--neutral-200); }
html[data-theme="dark"] .table-outer,
html[data-theme="dark"] .doc-card,
html[data-theme="dark"] .flow-item,
html[data-theme="dark"] .checks label,
html[data-theme="dark"] .scenario,
html[data-theme="dark"] .page-nav a,
html[data-theme="dark"] .search-dialog { border-color: var(--neutral-200); }
html[data-theme="dark"] .doc-table th { background: var(--neutral-100); border-color: var(--neutral-200); color: var(--neutral-700); }
html[data-theme="dark"] .doc-table tr + tr td { border-color: var(--neutral-200); }
html[data-theme="dark"] .doc-table tr:nth-child(even) td { background: var(--neutral-50); }
html[data-theme="dark"] .doc-card:hover,
html[data-theme="dark"] .page-nav a:hover { border-color: var(--scarlet-500); background: var(--scarlet-50); }
html[data-theme="dark"] .doc-card b,
html[data-theme="dark"] .flow-arrow,
html[data-theme="dark"] .search-result-icon { color: var(--scarlet-500); }
html[data-theme="dark"] .checks input:checked + span { color: var(--neutral-400); }
html[data-theme="dark"] .scenario .result { background: var(--color-success-soft); border-color: var(--color-success); color: var(--neutral-700); }
html[data-theme="dark"] .toc,
html[data-theme="dark"] .toc nav,
html[data-theme="dark"] .search-head,
html[data-theme="dark"] .search-caption { border-color: var(--neutral-200); }
html[data-theme="dark"] .toc-help { background: var(--neutral-50); }
html[data-theme="dark"] .toc-help p { color: var(--neutral-400); }
html[data-theme="dark"] .search-head input { background: transparent; color: var(--neutral-800); }
html[data-theme="dark"] .search-head input::placeholder { color: var(--neutral-400); }
html[data-theme="dark"] .search-result:hover,
html[data-theme="dark"] .search-result:focus { background: var(--scarlet-100); }
@media(max-width:720px) {
  .theme-toggle { width: 34px; height: 34px; flex-basis: 34px; }
  html[data-theme="dark"] .icon-btn { color: var(--neutral-800); }
}
@media print {
  html[data-theme="dark"] { color-scheme: light; --page:#fff; --ink:#303542; --thin:#e7e9ed; --surface:#f7f8fa; }
  html[data-theme="dark"] body,
  html[data-theme="dark"] .article { color: #24262d; background: #fff; }
  html[data-theme="dark"] .article h1,
  html[data-theme="dark"] .article h2,
  html[data-theme="dark"] .article h3 { color:#24262d; }
  .theme-toggle { display:none!important; }
}

/* Telas ilustrativas e visualizador de imagens */
.figure-link{display:block;position:relative;text-decoration:none;border-radius:10px;overflow:hidden;cursor:zoom-in}
.figure-link img{width:100%;max-height:none;object-fit:contain;display:block;transition:box-shadow .2s,filter .2s}
.figure-zoom{position:absolute;bottom:12px;right:12px;background:rgba(15,32,51,.87);color:#fff;font-size:11px;font-weight:700;border-radius:7px;padding:7px 10px;opacity:0;transition:opacity .15s}
.figure-link:hover .figure-zoom,.figure-link:focus-visible .figure-zoom{opacity:1}
.figure-link:hover img{box-shadow:0 10px 26px rgba(25,35,50,.12)}
.image-dialog{width:min(98vw,1480px);height:auto;max-height:94vh;padding:0;border:1px solid var(--thin);border-radius:12px;background:var(--page);color:var(--ink);box-shadow:0 30px 90px #04091072}
.image-dialog::backdrop{background:#070d19db}
.image-dialog-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;position:sticky;top:0;background:var(--page);border-bottom:1px solid var(--thin);padding:12px 17px;z-index:1;font-family:'Fira Sans',sans-serif}
.image-dialog-bar>div{display:flex;align-items:center;gap:14px}
.image-dialog-bar a{color:var(--teal);font-size:12px}
.image-dialog-bar button{background:var(--surface);color:var(--ink);border:1px solid var(--thin);width:34px;height:34px;border-radius:8px;font-size:17px}
.image-dialog-content{overflow:auto;max-height:calc(94vh - 140px);padding:12px;display:flex;justify-content:center;background:var(--surface)}
.image-dialog-content img{max-width:100%;height:auto;align-self:flex-start;object-fit:contain}
.image-dialog-caption{padding:9px 17px;margin:0;color:var(--subtext);font-size:12px}
html[data-theme="dark"] .image-dialog{background:var(--page);color:var(--ink)}
@media(max-width:720px){.image-dialog{width:100vw;max-height:96vh}.image-dialog-content{max-height:calc(96vh - 140px)}.figure-zoom{opacity:1;font-size:10px;padding:5px 7px}}
@media print{.figure-zoom,.image-dialog{display:none!important}}