/* OPERVEXA — identidade aprovada. Manter os fluxos e os estados semânticos. */
:root{
 --brand:#4338CA;--brand-hover:#3730A3;--action:#007F99;--action-hover:#006B81;
 --navy:#172033;--blue:var(--action);--bg:#F5F5FC;--text:#172033;
 --line:#DFE2EF;--muted:#5D657C;--card:#fff;--brand-soft:#EEECFC;
 --brand-focus:#8B83ED;
}
a{color:var(--brand)}
.top{background:#fff;color:var(--text);border-top:4px solid var(--brand);border-bottom:1px solid var(--line)}
.bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand nav logout";max-width:none;align-items:center;gap:12px;padding:18px 20px}
.bar>.brand{grid-area:brand}
.brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;color:var(--brand);text-decoration:none}
.brand:hover{text-decoration:none}
.brand-emblem{display:block;width:56px;height:56px;object-fit:contain;flex-shrink:0}
/* Recorte apenas na apresentação: o PNG aprovado permanece intacto. */
.brand-wordmark{display:block;width:282px;height:38px;position:relative;overflow:hidden}
.brand-wordmark img{position:absolute;display:block;width:100%;height:auto;left:0;top:50%;transform:translateY(-50%)}
.bar nav{grid-area:nav;min-width:0;width:auto;margin:0;justify-content:flex-end;gap:1px;flex-wrap:nowrap;overflow:visible;padding:0}
.bar nav a{color:var(--muted);padding:8px 5px;border-radius:9px;font-weight:600;font-size:13px;white-space:nowrap;flex-shrink:0;transition:background .15s,color .15s}
.bar nav a:hover{background:var(--bg);color:var(--brand);text-decoration:none}
.bar nav a[aria-current=page]{background:var(--brand-soft);color:var(--brand)}
.bar>.inline{grid-area:logout;margin-left:0}
.bar .quiet{color:var(--brand);background:#fff;border:1px solid var(--line);min-height:40px}
.bar .quiet:hover{background:var(--brand-soft);border-color:var(--brand-focus)}
button.primary,.button.primary{background:var(--action);border-color:var(--action);color:#fff;transition:background .15s,border-color .15s}
button.primary:hover,.button.primary:hover{background:var(--action-hover);border-color:var(--action-hover)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--brand-focus);outline-offset:3px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-focus);outline-offset:2px;border-color:var(--brand)}
input[type=checkbox]{accent-color:var(--brand)}
.eyebrow{color:var(--brand)}
.card,.metric{box-shadow:0 4px 18px #17203305}
.metric strong{color:var(--navy)}
.notice:not(.error){background:#EFEEFC;border-color:#DAD6F6;color:#37306E}
.pill:not(.pending):not(.approved):not(.void){background:var(--brand-soft);color:var(--brand)}
.page-btn.selected{background:var(--brand);border-color:var(--brand);color:#fff}
.page-btn{color:var(--brand)}
.help-popover summary{color:var(--brand);background:var(--brand-soft);border-color:#C8C3ED}
.chart-panel .chart-stat{background:#F5F4FD;border-color:var(--line)}
.chart-stage{background:#FAFAFE;border-color:var(--line)}
.chart-plot-grid span{background:#E3E3F1}
.viz-bar,.chart-panel .viz-chart-dates .viz-bar{background:linear-gradient(180deg,var(--action),var(--brand));box-shadow:none}
.chart-panel .viz-chart-dates .viz-bar.empty{background:#DAD8EB}
.chart-panel .viz-chart-dates .viz-bar span{color:var(--muted)}
.auth{border-radius:20px;padding:32px;margin-top:32px;border-color:var(--line);box-shadow:0 12px 40px #4338CA09}
.auth-identity{display:flex;align-items:center;flex-direction:column;gap:18px;text-align:center;margin-bottom:26px}
.auth-identity img{display:block;width:64px;height:64px;object-fit:contain}
.auth-identity .eyebrow{text-transform:none;letter-spacing:0;font-size:14px;font-weight:600}
.auth h1{font-size:28px;letter-spacing:-.6px}
.auth>.muted{font-size:14px}
.auth input{min-height:46px}
.auth button.primary{min-height:46px;border-radius:10px}
footer{color:var(--muted)}
.footer-brand{color:var(--brand);font-weight:700;letter-spacing:.06em}
.offline-brand{margin-bottom:26px}
.offline-actions{flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.offline-actions #draft-counter{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
@media(min-width:1000px) and (max-width:1249px){
 .bar{padding:16px 12px;gap:8px}.brand{gap:10px}.brand-wordmark{width:240px;height:33px}.brand-emblem{width:48px;height:48px}
 .bar nav a{font-size:12px;padding:8px 4px}.bar .quiet{padding:8px 10px}
}
@media(min-width:1000px) and (max-width:1099px){
 .brand{gap:8px}.brand-wordmark{width:200px;height:28px}.brand-emblem{width:44px;height:44px}
 .bar nav a{padding:8px 2px}
}
@media(max-width:999px){
 .bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand logout" "nav nav";padding:14px;gap:14px 10px}
 .bar nav{width:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:4px}
 .bar nav a{white-space:nowrap;flex-shrink:0;font-size:13px;padding:9px 10px}
 .brand-wordmark{width:162px;height:23px}
 .brand-emblem{width:36px;height:36px}
 .auth{margin-top:22px}
}
@media(max-width:380px){
 .brand{gap:8px}.brand-wordmark{width:145px;height:21px}
 .bar .quiet{padding:8px 10px}
 .auth{padding:22px}.auth h1{font-size:25px}
}
@media(prefers-reduced-motion:reduce){.bar nav a,button.primary,.button.primary{transition:none}}
@media print{.top,footer{display:none}}