/* Salpes Corretor · versão de demonstração
   Faixas de atenção fixas (topo e rodapé) com a mensagem correndo na horizontal + aviso de licença. */
:root{--demo-tape:30px}
body.demo-mode{padding-top:var(--demo-tape)!important;padding-bottom:var(--demo-tape)!important;box-sizing:border-box}
body.demo-mode .app-frame{min-height:calc(100vh - (var(--demo-tape) * 2))}
body.demo-mode .sidebar{top:calc(var(--demo-tape) + 16px)!important;max-height:calc(100vh - (var(--demo-tape) * 2) - 32px)!important;height:calc(100vh - (var(--demo-tape) * 2) - 32px)!important}
body.demo-mode .topbar{top:var(--demo-tape)!important}
body.demo-mode .login-shell{min-height:calc(100vh - (var(--demo-tape) * 2))}
body.demo-mode .event-alert-stack{bottom:calc(var(--demo-tape) + 18px)}
body.demo-mode .alert-nudge{bottom:calc(var(--demo-tape) + 16px)}
body.demo-mode .toast-stack,body.demo-mode .toast{margin-top:var(--demo-tape)}

.demo-tape{position:fixed;left:0;right:0;height:var(--demo-tape);z-index:2147483000;overflow:hidden;pointer-events:none;
  background:repeating-linear-gradient(-45deg,#f6c21c 0 22px,#141414 22px 44px);background-size:62.2px 62.2px;
  animation:demo-tape-stripes 1.6s linear infinite;box-shadow:0 2px 10px rgba(0,0,0,.28)}
.demo-tape-top{top:0;transform:rotate(-.25deg) translateY(-1px)}
.demo-tape-bottom{bottom:0;transform:rotate(.25deg) translateY(1px);box-shadow:0 -2px 10px rgba(0,0,0,.28)}
.demo-tape::before,.demo-tape::after{content:"";position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%,rgba(255,255,255,.3))}
.demo-tape::before{top:0}.demo-tape::after{bottom:0;opacity:.5}
.demo-tape-track{position:absolute;inset:3px 0;display:flex;width:max-content;animation:demo-tape-run 48s linear infinite}
.demo-tape-bottom .demo-tape-track{animation-direction:reverse;animation-duration:54s}
.demo-tape-run{display:flex;align-items:center;flex:0 0 auto}
.demo-tape-run span,.demo-tape-run b{display:inline-flex;align-items:center;height:calc(var(--demo-tape) - 8px);padding:0 18px;margin-right:10px;border-radius:3px;
  font:900 12.5px/1 "Inter","Segoe UI",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.demo-tape-run span{background:#141414;color:#f6c21c}
.demo-tape-run b{background:#f6c21c;color:#141414;box-shadow:inset 0 0 0 2px #141414}
@keyframes demo-tape-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes demo-tape-stripes{from{background-position:0 0}to{background-position:62.2px 0}}
@media (prefers-reduced-motion:reduce){.demo-tape,.demo-tape-track{animation-duration:0s!important;animation:none!important}}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Login da demonstração */
.story-logo{height:46px;width:auto;display:block}
.demo-login-contact a{color:#1b5b90;font-weight:700;text-decoration:none}
.demo-login-contact a:hover{text-decoration:underline}
.login-logo-wrap img[src*="salpes-logo"]{max-width:240px;height:auto}

/* Marca na barra lateral */
.sidebar-logo img[src*="salpes-symbol"]{width:34px!important;height:auto!important;object-fit:contain;background:transparent!important;border-radius:0!important;box-shadow:none!important;padding:0!important}

/* Aviso de licença */
.demo-backdrop{position:fixed;inset:0;z-index:2147482000;display:grid;place-items:center;padding:18px;background:rgba(9,22,38,.55);backdrop-filter:blur(5px);opacity:0;transition:opacity .2s}
.demo-backdrop.open{opacity:1}
.demo-modal{position:relative;width:min(500px,100%);background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 40px 90px rgba(5,18,34,.45);transform:translateY(14px) scale(.97);transition:transform .28s cubic-bezier(.2,.9,.3,1.2)}
.demo-backdrop.open .demo-modal{transform:none}
.demo-modal-tape{height:14px;background:repeating-linear-gradient(-45deg,#f6c21c 0 14px,#141414 14px 28px)}
.demo-modal-body{padding:24px 26px 22px;text-align:center}
.demo-modal-body img{height:42px;width:auto;margin:4px auto 14px;display:block}
.demo-modal-kicker{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#fff6d6;color:#8a6200;font:800 11px "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.demo-modal h3{margin:12px 0 8px;font:800 22px/1.25 "Inter",system-ui,sans-serif;color:#0b3157}
.demo-modal p{margin:0 auto;max-width:400px;font:500 14px/1.55 "Inter",system-ui,sans-serif;color:#3d5469}
.demo-modal-actions{display:grid;gap:10px;margin-top:20px}
.demo-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 18px;border-radius:14px;font:800 14.5px "Inter",system-ui,sans-serif;text-decoration:none;transition:transform .15s,box-shadow .15s}
.demo-cta:hover{transform:translateY(-1px)}
.demo-cta svg{width:20px;height:20px;flex:0 0 auto}
.demo-cta.wa{background:#1fa855;color:#fff;box-shadow:0 10px 22px rgba(31,168,85,.3)}
.demo-cta.mail{background:#eef4fa;color:#0b3157;border:1px solid #d6e3ef}
.demo-cta.site{background:#0b3157;color:#fff}
.demo-cta small{font-weight:600;opacity:.85}
.demo-continue{margin-top:14px;background:none;border:0;color:#55697d;font:700 13px "Inter",system-ui,sans-serif;cursor:pointer;text-decoration:underline}
.demo-modal-x{position:absolute;top:22px;right:14px;width:32px;height:32px;border-radius:10px;border:0;background:#f1f5f9;color:#55697d;font-size:20px;cursor:pointer}
.demo-note{display:block;margin-top:10px;font:600 11.5px "Inter",system-ui,sans-serif;color:#8a9bac}
/* Dica da senha do Cofre na demonstração */
.demo-vault-hint{margin-top:6px;font-size:12px;color:#8a6200;background:#fff6d6;border-radius:8px;padding:4px 10px;display:inline-block}
@media (max-width:640px){:root{--demo-tape:24px}.demo-tape-run span,.demo-tape-run b{font-size:10.5px;padding:0 12px}}
/* Logo inteiro no cartão de login e valores grandes sem corte nos indicadores */
.login-logo-wrap{width:auto!important;height:auto!important;overflow:visible!important;background:none!important;margin:0 auto 18px!important}
.login-logo-wrap img{width:230px!important;height:auto!important;max-width:100%}
.kpi-chip strong{font-size:clamp(15px,1.25vw,20px)!important;white-space:nowrap;overflow:visible!important;text-overflow:clip!important}
