/* ============================================================
   Demo interativa do BuilderTrack (secao "Explore o sistema")
   Um BuilderTrack de mentira: menu lateral, telas e filtros
   funcionam, os dados sao ficticios e as telas que nao foram
   simuladas avisam "Disponivel no produto real".
   As cores seguem o sistema, nao o site: fundo grafite, acento
   ciano e barra amarela nos indicadores.
   ============================================================ */

.dm{
  --bg:#0e141c; --side:#111822; --pan:#131b26; --pan2:#172130; --linha:#232e3d;
  --txt:#e6edf5; --sub:#8b98a8; --fraco:#627085; --acento:#22b5cf; --acento-fundo:rgba(34,181,207,.12);
  --ok:#3fbf7f; --aviso:#e0a640; --alerta:#e5664f; --campo:#0f161f;
  border:1px solid #1D3150; border-radius:14px; overflow:hidden; background:var(--bg);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.95); color:var(--txt); text-align:left;
}
.dm[data-tema="claro"]{
  --bg:#f3f5f8; --side:#ffffff; --pan:#ffffff; --pan2:#f7f9fb; --linha:#e0e5ec;
  --txt:#17212e; --sub:#566476; --fraco:#8592a3; --acento:#0e8fa8; --acento-fundo:rgba(14,143,168,.1);
  --ok:#1f9a5e; --aviso:#b87a12; --alerta:#c9442e; --campo:#ffffff;
}
.dm *{box-sizing:border-box}
.dm button,.dm input,.dm select{font-family:inherit; color:inherit}

/* Barra do navegador: fica sempre escura, como a do site */
.dm__bar{display:flex; align-items:center; gap:6px; padding:0 14px; height:36px; background:#0B1727; border-bottom:1px solid #142338}
.dm__bar i{width:8px; height:8px; border-radius:50%; background:#1E3550; flex:none}
.dm__url{flex:1; display:flex; justify-content:center}
.dm__url span{padding:3px 16px; border-radius:6px; background:#08121E; font-size:11px; color:#6F849C; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dm__selo{font-size:10.5px; color:#6F849C; white-space:nowrap}

.dm__app{display:grid; grid-template-columns:220px minmax(0,1fr); height:640px; font-size:13px; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif}

/* Menu lateral */
.dm__side{background:var(--side); border-right:1px solid var(--linha); display:flex; flex-direction:column; min-height:0}
.dm__logo{display:flex; align-items:center; gap:9px; height:48px; padding:0 16px; border-bottom:1px solid var(--linha); font-weight:700; font-size:13px; flex:none}
.dm__logo img{width:24px; height:24px; border-radius:6px}
.dm__logo em{font-style:normal; color:var(--acento)}
.dm__nav{flex:1; overflow-y:auto; padding:10px 8px 16px; scrollbar-width:thin; scrollbar-color:var(--linha) transparent}
.dm__grupo{display:flex; align-items:center; gap:6px; width:100%; margin-top:8px; padding:7px 8px; border:0; background:none; cursor:pointer; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fraco); text-align:left; border-radius:6px}
.dm__grupo:first-child{margin-top:0}
@media (hover:hover) and (pointer:fine){ .dm__grupo:hover{color:var(--sub)} }
.dm__grupo svg{transition:transform .2s ease; flex:none}
.dm__grupo[aria-expanded="true"] svg{transform:rotate(90deg)}
.dm__grupo.ativo{color:var(--acento)}
.dm__item{position:relative; display:flex; align-items:center; gap:10px; width:100%; padding:7px 10px; border:0; border-radius:6px; background:none; cursor:pointer; font-size:13px; color:var(--sub); text-align:left}
@media (hover:hover) and (pointer:fine){ .dm__item:hover{background:var(--pan2); color:var(--txt)} }
.dm__item[aria-current="page"]{background:var(--pan2); color:var(--txt)}
.dm__item[aria-current="page"]::before{content:""; position:absolute; left:-8px; top:6px; bottom:6px; width:2px; border-radius:2px; background:var(--acento)}
.dm__item[aria-current="page"] svg{color:var(--acento)}
.dm__sub[hidden]{display:none}

/* Area principal */
.dm__main{display:flex; flex-direction:column; min-width:0; min-height:0}
.dm__topo{display:flex; align-items:center; gap:14px; height:48px; padding:0 18px; border-bottom:1px solid var(--linha); background:var(--side); flex:none}
.dm__trilha{flex:1; min-width:0; font-size:13px; color:var(--fraco); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dm__trilha b{font-weight:500; color:var(--txt)}
.dm__trilha i{font-style:normal; margin:0 6px}
.dm__mob{display:none; flex:1; min-width:0; padding:7px 10px; border-radius:7px; border:1px solid var(--linha); background:var(--campo); font-size:13px}
.dm__botao{display:flex; align-items:center; gap:6px; padding:6px 8px; border:0; border-radius:6px; background:none; cursor:pointer; font-size:12.5px; color:var(--sub); white-space:nowrap}
@media (hover:hover) and (pointer:fine){ .dm__botao:hover{background:var(--pan2); color:var(--txt)} }
.dm__user{display:flex; align-items:center; gap:8px; padding-left:12px; border-left:1px solid var(--linha); font-size:11px; line-height:1.25; color:var(--fraco)}
.dm__user b{display:block; font-size:12px; font-weight:600; color:var(--txt)}
.dm__user span:first-child{width:26px; height:26px; border-radius:6px; background:var(--pan2); border:1px solid var(--linha); display:grid; place-items:center; font-size:11px; font-weight:600; color:var(--txt)}

.dm__tela{position:relative; flex:1; overflow-y:auto; padding:22px 22px 30px; scrollbar-width:thin; scrollbar-color:var(--linha) transparent; animation:dm-entra .2s cubic-bezier(0.23,1,0.32,1)}
@keyframes dm-entra{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.dm h3{margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--txt)}
.dm__desc{margin:3px 0 0; font-size:13px; color:var(--sub)}
.dm__cab{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--linha)}

/* Blocos */
.dm-bloco{border:1px solid var(--linha); border-radius:4px; background:var(--pan); margin-bottom:16px; overflow:hidden}
.dm-faixa{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--linha); font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--sub)}
.dm-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Filtros */
.dm-filtros{display:grid; gap:12px; padding:14px; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); align-items:end}
.dm-filtros label{display:flex; flex-direction:column; gap:6px; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--sub)}
.dm input,.dm select{width:100%; padding:7px 9px; border-radius:3px; border:1px solid var(--linha); background:var(--campo); font-size:12.5px; letter-spacing:0; text-transform:none; font-weight:400}
.dm input:focus,.dm select:focus{outline:none; border-color:var(--acento)}
.dm input[type="date"]{color-scheme:dark}
.dm[data-tema="claro"] input[type="date"]{color-scheme:light}
.dm-limpar{padding:7px 9px; border:1px solid var(--linha); border-radius:3px; background:transparent; cursor:pointer; font-size:12.5px; color:var(--sub)}
@media (hover:hover) and (pointer:fine){ .dm-limpar:hover{color:var(--txt); border-color:var(--fraco)} }

/* Indicadores */
.dm-kpis{display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:16px}
.dm-kpi{padding:12px 14px; border:1px solid var(--linha); border-left:2px solid var(--aviso); border-radius:4px; background:var(--pan)}
.dm-kpi u,.dm-kpi2 u{display:block; text-decoration:none; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sub)}
.dm-kpi b,.dm-kpi2 b{display:block; margin-top:6px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:18px; font-weight:700; color:var(--txt); white-space:nowrap}
.dm-kpi b i,.dm-kpi2 b i{font-style:normal; font-size:12px; font-weight:400; color:var(--sub)}
.dm-kpi s{display:block; margin-top:5px; text-decoration:none; font-size:11px; color:var(--sub)}
.dm-kpi s em{font-style:normal; font-family:ui-monospace,monospace; font-size:10px; margin-right:4px}
.dm-kpis2{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--linha)}
.dm-kpi2{padding:12px 14px; border-left:2px solid transparent}
.dm-kpi2+.dm-kpi2{box-shadow:inset 1px 0 0 var(--linha)}
.dm-kpi2--alerta{border-left-color:var(--alerta)}
.dm-kpi2--aviso{border-left-color:var(--aviso)}
.dm-kpi2 b{font-size:17px}

/* Tabela */
.dm-rolagem{overflow-x:auto}
.dm-tab{width:100%; border-collapse:collapse; font-size:12.5px}
.dm-tab th{text-align:left; padding:9px 11px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sub); border-bottom:1px solid var(--linha); white-space:nowrap}
.dm-tab td{padding:9px 11px; border-bottom:1px solid var(--linha); color:var(--txt); white-space:nowrap}
.dm-tab tr:last-child td{border-bottom:0}
@media (hover:hover) and (pointer:fine){ .dm-tab tbody tr:hover td{background:var(--pan2)} }
.dm-tab .num{text-align:right}
.dm-tab .sub{color:var(--sub)}
.dm-tab td.quebra{white-space:normal; min-width:130px; line-height:1.4}
.dm-vazio{padding:26px 14px; text-align:center; color:var(--sub); font-size:12.5px}

.dm-sit{display:inline-block; padding:2px 6px; border-radius:2px; border:1px solid; font-size:11.5px; white-space:nowrap}
.dm-sit--ok{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,transparent); background:color-mix(in srgb,var(--ok) 8%,transparent)}
.dm-sit--aviso{color:var(--aviso); border-color:color-mix(in srgb,var(--aviso) 50%,transparent); background:color-mix(in srgb,var(--aviso) 8%,transparent)}
.dm-sit--alerta{color:var(--alerta); border-color:color-mix(in srgb,var(--alerta) 50%,transparent); background:color-mix(in srgb,var(--alerta) 8%,transparent)}
.dm-sit--neutro{color:var(--sub); border-color:var(--linha)}
.dm-sit .dm-mono{font-size:10px}

.dm-barra{display:inline-block; width:90px; height:5px; border-radius:3px; background:var(--pan2); vertical-align:middle; overflow:hidden; margin-right:8px}
.dm-barra i{display:block; height:100%; border-radius:3px; background:var(--acento)}

/* Graficos */
.dm-graficos{display:grid; gap:16px; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.dm-graficos .dm-bloco{margin-bottom:0}
.dm-graf{padding:12px 14px}
.dm-graf svg{display:block; width:100%; height:auto; overflow:visible}
.dm-graf text{font-size:10px; fill:var(--fraco); font-family:system-ui,sans-serif}
.dm-top{padding:14px; display:grid; gap:11px}
.dm-top div{display:grid; grid-template-columns:62px minmax(0,1fr); align-items:center; gap:10px; font-size:11px; color:var(--sub)}
.dm-top span{text-align:right}
.dm-top i{display:block; height:14px; border-radius:1px; background:var(--acento); opacity:.85; transform-origin:left; animation:dm-barra .7s cubic-bezier(.2,.7,.2,1) both}
@media (hover:hover) and (pointer:fine){ .dm-top div:hover i{opacity:1} }
.dm-top div b{font-weight:400}
@keyframes dm-barra{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* Barra de ferramentas das listas */
.dm-ferr{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--linha)}
.dm-ferr input{max-width:260px}
.dm-ferr .dm-esp{flex:1}
.dm-novo{padding:7px 12px; border:0; border-radius:3px; background:var(--acento); color:#fff !important; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap}
.dm-chip{padding:5px 11px; border:1px solid var(--linha); border-radius:999px; background:none; font-size:12px; color:var(--sub); cursor:pointer}
.dm-chip[aria-pressed="true"]{border-color:var(--acento); color:var(--acento); background:var(--acento-fundo)}
.dm-pag{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-top:1px solid var(--linha); font-size:12px; color:var(--sub)}
.dm-pag div{display:flex; gap:6px}
.dm-pag button{padding:5px 10px; border:1px solid var(--linha); border-radius:3px; background:none; cursor:pointer; font-size:12px}
.dm-pag button:disabled{opacity:.4; cursor:default}

/* Tela que so existe no produto */
.dm-real{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100%; padding:40px 20px; text-align:center}
.dm-real__ico{width:52px; height:52px; border-radius:12px; display:grid; place-items:center; background:var(--acento-fundo); color:var(--acento)}
.dm-real h3{margin-top:16px}
.dm-real p{max-width:420px; margin:8px 0 0; font-size:13px; line-height:1.6; color:var(--sub)}
.dm-real__selo{margin-top:14px; padding:3px 10px; border-radius:999px; border:1px dashed var(--fraco); font-size:11px; color:var(--sub)}
.dm-real a{margin-top:20px; padding:9px 16px; border-radius:6px; background:var(--acento); color:#fff; font-size:13px; font-weight:600}
@media (hover:hover) and (pointer:fine){ .dm-real a:hover{color:#fff; filter:brightness(1.1)} }

/* Aviso que sobe quando a pessoa clica em algo que so existe na conta */
.dm__aviso{position:absolute; left:50%; bottom:18px; z-index:5; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:9px 14px; border-radius:8px; background:#1d2838; border:1px solid #2c3a4f; color:#e6edf5; font-size:12.5px; white-space:nowrap; box-shadow:0 14px 30px -12px rgba(0,0,0,.7); transition:opacity 150ms cubic-bezier(0.23,1,0.32,1), transform 150ms cubic-bezier(0.23,1,0.32,1)}
.dm__aviso.mostra{opacity:1; transform:translate(-50%,0); transition-duration:220ms}
.dm__main{position:relative}

/* Telas medias: indicadores em duas colunas */
@media (max-width:1100px){
  .dm-kpis,.dm-kpis2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-kpi2:nth-child(3){box-shadow:none}
  .dm-kpi2:nth-child(n+3){border-top:1px solid var(--linha)}
  .dm-graficos{grid-template-columns:1fr}
}
@media (max-width:980px){
  .dm__app{grid-template-columns:190px minmax(0,1fr)}
  .dm__user{display:none}
}

/* Celular: o menu lateral vira uma lista de escolha no topo */
@media (max-width:760px){
  /* No dedo, caixa com rolagem propria dentro da pagina prende o scroll: a
     demo cresce com o conteudo e so as tabelas rolam para o lado. */
  .dm__app{grid-template-columns:1fr; height:auto}
  .dm__main{min-height:420px}
  .dm__tela{overflow:visible; animation:none}
  .dm-real{min-height:380px}
  /* O aviso fica preso na tela, acima da barra de acao do celular. */
  .dm__aviso{position:fixed; bottom:calc(92px + env(safe-area-inset-bottom)); z-index:60}
  .dm__side{display:none}
  .dm__trilha{display:none}
  .dm__mob{display:block}
  .dm__botao span{display:none}
  .dm__tela{padding:16px 14px 24px}
  .dm__selo{display:none}
  .dm__aviso{white-space:normal; width:calc(100% - 28px); text-align:center}
}

/* Telas de lista: busca no topo, acoes em texto e a coluna de acoes separada */
.dm-filtros--busca{padding:0; margin-bottom:14px; grid-template-columns:160px minmax(0,1fr)}
.dm-filtros--busca label:only-child{grid-column:1 / -1}
.dm-nota{margin:0 0 14px; font-size:13px; line-height:1.55; color:var(--sub)}
.dm-forte{font-weight:600}
.dm-tab .dm-sep{border-left:1px solid var(--linha)}
.dm-acoes{display:flex; gap:12px; justify-content:flex-end}
.dm-link{padding:0; border:0; background:none; cursor:pointer; font-size:13px; color:var(--acento) !important}
@media (hover:hover) and (pointer:fine){ .dm-link:hover{text-decoration:underline} }
.dm-link--perigo{color:var(--alerta) !important}
.dm-tag{display:inline-block; margin-right:7px; padding:1px 6px; border:1px solid var(--linha); border-radius:2px; background:var(--pan2); font-size:11.5px; color:var(--sub)}
.dm-pag label{display:inline-flex; align-items:center; gap:6px; margin-left:12px}
.dm-pag select{width:auto; padding:4px 6px}
.dm-real p+p{margin-top:4px}
@media (max-width:760px){
  .dm-filtros--busca{grid-template-columns:1fr}
  .dm-pag{flex-direction:column; align-items:stretch}
  .dm-pag label{margin-left:8px}
}

/* Chamada para os modulos que ficaram de fora: no pe do menu e abaixo da demo */
.dm__mais{display:flex; flex-direction:column; gap:2px; margin:16px 2px 0; padding:12px; border-radius:8px; border:1px dashed color-mix(in srgb,var(--acento) 55%,transparent); background:var(--acento-fundo); font-size:11.5px; line-height:1.4; color:var(--sub) !important}
.dm__mais b{font-size:14px; color:var(--txt)}
.dm__mais em{margin-top:6px; font-style:normal; font-weight:600; color:var(--acento)}
@media (hover:hover) and (pointer:fine){ .dm__mais:hover{border-style:solid} }
.dm-fora{margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 20px; text-align:center}
.dm-fora p{margin:0; font-size:13px; line-height:1.5; color:#8497AF}
.dm-fora a{display:inline-block; padding:11px 20px; border-radius:10px; background:#3FC7E0; color:#052029; font-size:14.5px; font-weight:600; white-space:nowrap}
@media (hover:hover) and (pointer:fine){ .dm-fora a:hover{color:#052029; filter:brightness(1.08)} }

/* Botoes da demo respondem ao aperto; o menu lateral, que e navegacao, nao. */
.dm__botao, .dm-limpar, .dm-real a, .dm-fora a, .dm__mais{transition:transform 160ms cubic-bezier(0.23,1,0.32,1)}
.dm__botao:active, .dm-limpar:active, .dm-real a:active, .dm-fora a:active, .dm__mais:active{transform:scale(.97); transition-duration:110ms}

/* Indicadores: cards com o icone no quadradinho, como no sistema. O valor nao e
   monoespacado aqui porque no sistema tambem nao e. */
.dm-cards{display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:16px}
.dm-card{padding:14px 16px 15px; border:1px solid var(--linha); border-radius:4px; background:var(--pan); min-width:0}
.dm-card__ico{width:30px; height:30px; border-radius:6px; display:grid; place-items:center; background:var(--acento-fundo); color:var(--acento)}
.dm-card b{display:block; margin-top:12px; font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--txt); white-space:nowrap}
.dm-card b.alerta{color:var(--alerta)}
.dm-card b.aviso{color:var(--aviso)}
.dm-card u{display:block; margin-top:3px; text-decoration:none; font-size:12.5px; color:var(--sub)}
.dm-card s{display:block; margin-top:5px; text-decoration:none; font-size:11px; line-height:1.4; color:var(--fraco)}
/* Nos Indicadores o titulo do bloco e frase normal, nao a faixa em caixa alta. */
.dm-faixa--titulo{text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--txt)}
.dm-faixa--titulo .dm-link{font-size:12px; font-weight:600}
.dm-legenda{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; padding:0 14px 12px; font-size:11.5px; color:var(--sub)}
.dm-legenda span{display:inline-flex; align-items:center; gap:5px}
.dm-legenda i{width:8px; height:8px; border-radius:50%; flex:none}
.dm-anel svg{max-width:300px; margin:0 auto}
/* No sistema as duas tabelas ficam lado a lado numa tela de 1.650px; dentro da
   demo sao uns 1.000px, e lado a lado a de franquias perdia a coluna Situacao. */
.dm-duas{display:grid; gap:16px; grid-template-columns:minmax(0,1fr); margin-top:16px}
.dm-duas .dm-bloco{margin-bottom:0}
@media (max-width:1100px){
  .dm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}