/* AdCode Locadora · DEMONSTRAÇÃO — só o que a demo acrescenta. O resto é o visual original do sistema. */

/* Itens da versão completa que não existem na demo */
#view-configuracoes .cfg-tab[data-tab="minha-conta"],
#user-dropdown button[onclick="abrirModalAlterarSenha()"] { display: none !important; }

/* ── Faixa do topo ─────────────────────────────────────────────── */
#demo-faixa {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 16px; min-height: 42px;
  background: linear-gradient(90deg, #0f1f3a 0%, #17305a 100%); color: #e6edf9;
  font-size: 12.5px; border-bottom: 1px solid rgba(255,255,255,.08);
}
#demo-faixa .df-tag { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
#demo-faixa .df-tag i { font-size: 17px; color: #fbbf24; }
#demo-faixa .df-sub { color: #9fb3d6; }
#demo-faixa .df-cont { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
#demo-faixa .df-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px;
  background: rgba(255,255,255,.08); color: #cfdcf2; font-size: 11.5px; white-space: nowrap;
}
#demo-faixa .df-chip i { font-size: 13px; opacity: .8; }
#demo-faixa .df-chip b { color: #fff; font-weight: 700; }
#demo-faixa .df-chip.cheio { background: rgba(251,191,36,.18); color: #fde68a; }
#demo-faixa .df-chip.cheio b { color: #fbbf24; }
#demo-faixa .df-acoes { display: flex; gap: 6px; }
#demo-faixa .df-bt {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff;
  font: 600 12px/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .15s;
}
#demo-faixa .df-bt:hover { background: rgba(255,255,255,.14); }
#demo-faixa .df-bt i { font-size: 15px; }
#demo-faixa .df-bt.wa { background: #16a34a; border-color: #16a34a; }
#demo-faixa .df-bt.wa:hover { background: #15803d; }
#demo-faixa .df-bt.sair:hover { background: rgba(239,68,68,.25); border-color: rgba(239,68,68,.5); }
@media (min-width: 761px) and (max-width: 1500px) { #demo-faixa #demo-bt-vist span { display: none; } #demo-faixa #demo-bt-vist { width: 32px; padding: 0; justify-content: center; } }
@media (max-width: 760px) { #demo-faixa .df-bt.sair { width: auto; padding: 0 10px; } #demo-faixa .df-bt.sair span { display: inline; } }
@media (max-width: 1600px) { #demo-faixa .df-sub { display: none; } }
@media (min-width: 761px) { #demo-faixa { flex-wrap: nowrap; } #demo-faixa .df-cont { flex-wrap: nowrap; overflow: hidden; } }
@media (min-width: 761px) and (max-width: 1250px) { #demo-faixa .df-chip { font-size: 0; gap: 4px; } #demo-faixa .df-chip i, #demo-faixa .df-chip b { font-size: 12px; } }
@media (max-width: 760px) {
  #demo-faixa { gap: 8px; padding: 6px 10px; }
  #demo-faixa .df-cont { order: 3; width: 100%; margin-left: 0; }
  #demo-faixa .df-acoes { margin-left: auto; }
  #demo-faixa .df-bt span { display: none; }
  #demo-faixa .df-bt { width: 34px; padding: 0; justify-content: center; }
}

/* ── Janela da demo ────────────────────────────────────────────── */
.demo-modal-fundo {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15,23,42,.55); backdrop-filter: blur(3px); animation: demoFade .15s ease;
}
@keyframes demoFade { from { opacity: 0; } to { opacity: 1; } }
.demo-modal {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--surface, #fff); color: var(--text, #0f172a); border-radius: 16px; padding: 26px 24px 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.3); font-family: inherit;
}
.demo-modal-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; color: var(--text3, #64748b); cursor: pointer; font-size: 18px; }
.demo-modal-x:hover { background: var(--surface2, #f1f5f9); }
.demo-modal-ic { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 25px; margin-bottom: 12px; background: #dbeafe; color: #1d4ed8; }
.demo-modal-ic.amarelo { background: #fef3c7; color: #b45309; }
.demo-modal-ic.verde { background: #dcfce7; color: #15803d; }
.demo-modal h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; padding-right: 28px; }
.demo-modal-corpo { font-size: 13.5px; line-height: 1.55; color: var(--text2, #334155); }
.demo-modal-corpo p + p, .demo-modal-corpo p + .demo-lims, .demo-modal-corpo p + label { margin-top: 10px; }
.demo-dica { font-size: 12.5px; color: var(--text3, #64748b); }
.demo-lista { margin: 10px 0 0 18px; display: grid; gap: 5px; }
.demo-modal-acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }

.demo-bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border-radius: 10px; border: 1px solid var(--border2, #cbd5e1); background: var(--surface, #fff); color: var(--text, #0f172a);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.demo-bt:hover { background: var(--surface2, #f1f5f9); }
.demo-bt i { font-size: 16px; }
.demo-bt.pri { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; }
.demo-bt.pri:hover { background: var(--accent-dark, #1d4ed8); }
.demo-bt.wa.pri { background: #16a34a; border-color: #16a34a; }
.demo-bt.wa.pri:hover { background: #15803d; }
.demo-bt.perigo { color: #b91c1c; border-color: #fca5a5; }
.demo-bt.perigo:hover { background: #fee2e2; }

.demo-campo { display: block; margin-top: 12px; }
.demo-campo span { display: block; font-size: 11px; font-weight: 700; color: var(--text3, #64748b); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.demo-campo input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--border2, #cbd5e1); border-radius: 9px; font-family: inherit; font-size: 14px; background: var(--surface2, #f8fafc); color: var(--text, #0f172a); outline: none; }
.demo-campo input:focus { border-color: var(--accent, #2563eb); background: var(--surface, #fff); }
.demo-erro { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: #fee2e2; color: #991b1b; font-size: 12.5px; font-weight: 600; }

/* contadores (janela "Dados de teste" e aba Demonstração) */
.demo-lims { display: grid; gap: 7px; }
.demo-lim { display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px; align-items: center; gap: 10px; font-size: 12.5px; }
.demo-lim b { text-align: right; font-variant-numeric: tabular-nums; }
.demo-lim-bar { height: 6px; border-radius: 99px; background: var(--surface2, #eef2f7); overflow: hidden; }
.demo-lim-bar i { display: block; height: 100%; background: var(--accent, #2563eb); border-radius: 99px; }
.demo-lim-bar i.cheio { background: #f59e0b; }

/* aba Demonstração em Configurações */
.demo-cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.demo-cfg-card { background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 12px); padding: 18px; box-shadow: var(--shadow, none); }
.demo-cfg-card h4 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; margin-bottom: 12px; }
.demo-cfg-card h4 i { color: var(--accent, #2563eb); font-size: 18px; }
.demo-cfg-card p { font-size: 13px; color: var(--text2, #334155); line-height: 1.5; }
.demo-cfg-card.destaque { border-color: #86efac; background: linear-gradient(180deg, #f0fdf4, var(--surface, #fff)); }
.demo-cfg-card.destaque h4 i { color: #16a34a; }
.demo-cfg-bts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }