/* Demonstração aberta: só a moldura em volta do painel. As cores vêm das variáveis do assets/estilo.css. */
body.demo { --demo-trilho: 350px; }
@media (min-width: 1500px) { body.demo { --demo-trilho: 390px; } }
/* segurança e custo são para ler: com o celular escondido, o cartão pode ser mais largo */
@media (min-width: 1400px) { body.demo-aba-cheia { --demo-trilho: 460px; } }

/* ---- tela de entrada ------------------------------------------------------------------------ */
.demo-na-entrada { height: auto; min-height: 100%; }
.demo-entrada {
  min-height: 100dvh; box-sizing: border-box; max-width: 1080px; margin: 0 auto; padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center;
}
.demo-marca { margin: 0 0 1.5rem; font-weight: 700; color: var(--marca-texto); letter-spacing: .01em; }
.demo-entrada h1 { margin: 0; font-size: clamp(2rem, 4.4vw, 3.15rem); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.demo-lide { margin: 1.25rem 0 0; font-size: 1.1rem; line-height: 1.55; color: var(--suave); max-width: 34rem; }
.demo-garantias { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .55rem; }
.demo-garantias li { display: flex; align-items: center; gap: .6rem; }
.demo-garantias li::before { content: "✓"; flex: none; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 50%; background: var(--marca-suave); color: var(--marca-texto); font-size: .8rem; font-weight: 700; }
.demo-papeis { display: grid; gap: .85rem; }
.demo-papeis h2 { margin: 0 0 .15rem; font-size: 1rem; font-weight: 600; color: var(--suave); }
.demo-papel {
  position: relative; display: grid; gap: .35rem; width: 100%; padding: 1.2rem 1.3rem; text-align: left; font: inherit; color: var(--texto); cursor: pointer;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra-1); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.demo-papel strong { font-size: 1.3rem; letter-spacing: -.01em; }
.demo-papel-texto { color: var(--suave); }
.demo-papel ul { margin: .4rem 0 .2rem; padding-left: 1.1rem; display: grid; gap: .15rem; }
.demo-papel-acao { font-weight: 600; color: var(--marca-texto); margin-top: .2rem; }
.demo-papel.destaque { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca), var(--sombra-2); }
.demo-papel.destaque .demo-papel-acao { justify-self: start; padding: .55rem 1.05rem; border-radius: 8px; background: var(--marca); color: var(--sobre-marca); }
.demo-papel:focus-visible { outline: 3px solid var(--marca-anel); outline-offset: 2px; }
.demo-selo { position: absolute; top: 1.15rem; right: 1.2rem; padding: .15rem .55rem; border-radius: 999px; background: var(--marca-suave); color: var(--marca-texto); font-size: .78rem; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .demo-papel:hover { border-color: var(--marca); transform: translateY(-1px); box-shadow: var(--sombra-2); } }
@media (max-width: 820px) { .demo-entrada { grid-template-columns: minmax(0, 1fr); align-items: start; } .demo-marca { margin-bottom: 1rem; } }

.demo-nota { margin: 1rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--suave); }
.demo-links { display: grid; gap: .4rem; margin: .9rem 0 0; }
.demo-outra { display: inline-block; justify-self: start; font-weight: 600; color: var(--marca-texto); }

/* ---- moldura do painel ---------------------------------------------------------------------- */
body.demo-no-painel {
  height: 100%; display: grid; overflow: hidden;
  grid-template: "barra barra" auto "faixa faixa" auto "app trilho" minmax(0, 1fr) / minmax(0, 1fr) var(--demo-trilho);
}
.demo-no-painel #app { grid-area: app; min-width: 0; min-height: 0; height: 100%; }
.demo-no-painel .avisos { right: var(--demo-trilho); }
.demo-barra { grid-area: barra; display: flex; align-items: center; gap: .7rem; padding: .4rem .9rem; background: var(--toast); color: var(--toast-texto); font-size: .88rem; min-width: 0; }
.demo-etiqueta { flex: none; padding: .1rem .5rem; border-radius: 5px; background: var(--marca); color: var(--sobre-marca); font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.demo-barra-texto { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .85; }
.demo-barra-acoes { margin-left: auto; display: flex; align-items: center; gap: .55rem; flex: none; }
.demo-segmento { display: flex; padding: 2px; border-radius: 7px; background: color-mix(in srgb, var(--toast-texto) 14%, transparent); }
.demo-segmento button { padding: .18rem .6rem; border: 0; border-radius: 5px; background: transparent; color: inherit; font: inherit; font-size: .84rem; cursor: pointer; opacity: .8; }
.demo-segmento button.ativo { background: var(--toast-texto); color: var(--toast); opacity: 1; font-weight: 600; }
.demo-link { padding: .2rem .4rem; border: 0; background: transparent; color: inherit; font: inherit; font-size: .84rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; opacity: .85; }
.demo-cta { padding: .24rem .7rem; border-radius: 6px; background: var(--marca); color: var(--sobre-marca); font-weight: 600; font-size: .84rem; text-decoration: none; white-space: nowrap; }
.demo-botao-celular, .demo-trilho-fechar { display: none; }
.demo-faixa { display: none; }

/* ---- trilho: guia e celular ----------------------------------------------------------------- */
.demo-trilho { grid-area: trilho; min-height: 0; display: flex; flex-direction: column; gap: .7rem; padding: .7rem; overflow-y: auto; background: var(--fundo); border-left: 1px solid var(--borda); box-sizing: border-box; }
.demo-guia { flex: none; padding: .85rem .95rem; background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-1); }
.demo-guia h2 { margin: .1rem 0 .3rem; font-size: 1.08rem; line-height: 1.25; letter-spacing: -.01em; }
.demo-guia p { margin: 0; }
.demo-passo-n { color: var(--suave); font-size: .8rem; }
.demo-progresso { height: 4px; margin-bottom: .6rem; border-radius: 3px; overflow: hidden; background: var(--borda); }
.demo-progresso-valor { display: block; height: 100%; background: var(--marca); transition: width .3s ease; }
.demo-guia-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .65rem; }
.demo-guia-acoes .primario, .demo-guia-acoes .secundario, .demo-guia-acoes .discreto { font-size: .85rem; }
.demo-reabrir { width: 100%; padding: .35rem; border: 0; background: transparent; color: var(--marca-texto); font: inherit; font-weight: 600; cursor: pointer; }

.demo-celular { flex: 1 0 400px; min-height: 0; display: flex; flex-direction: column; gap: .5rem; }
.demo-celular-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .15rem; }
.demo-celular-topo h2 { margin: 0; font-size: .9rem; font-weight: 600; color: var(--suave); }
.demo-novo { font-size: .8rem; padding: .25rem .55rem; }
.demo-aparelho { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 5px solid #1e2732; border-radius: 22px; background: var(--conversa); box-shadow: var(--sombra-2); }
.demo-aparelho-topo { flex: none; display: grid; padding: .5rem .75rem; background: #075e54; color: #fff; }
.demo-aparelho-topo strong { font-size: .92rem; }
.demo-aparelho-topo span { font-size: .72rem; opacity: .85; }
.demo-tela { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; padding: .6rem; }
.demo-bolha { max-width: 86%; padding: .32rem .52rem; border-radius: 9px; font-size: .86rem; line-height: 1.32; box-shadow: var(--bolha); overflow-wrap: anywhere; display: grid; gap: .1rem; }
.demo-bolha.minha { align-self: flex-end; background: var(--saida); }
.demo-bolha.deles { align-self: flex-start; background: var(--painel); }
.demo-bolha small { color: var(--marca-texto); font-size: .7rem; font-weight: 600; }
.demo-bolha img { width: 100%; border-radius: 6px; display: block; }
.demo-bolha-texto { white-space: pre-wrap; }
.demo-hora { justify-self: end; font-size: .66rem; color: var(--suave); }
.demo-digitando { font-style: italic; color: var(--suave); }
.demo-atalhos { flex: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: .4rem .5rem 0; border-top: 1px solid var(--borda); background: var(--painel); }
.demo-atalhos button { padding: .28rem .6rem; border: 1px solid var(--marca); border-radius: 999px; background: var(--painel); color: var(--marca-texto); font: inherit; font-size: .8rem; cursor: pointer; text-align: left; }
@media (hover: hover) and (pointer: fine) { .demo-atalhos button:hover { background: var(--marca-suave); } }
.demo-escrever { flex: none; display: flex; gap: .35rem; padding: .45rem .5rem; background: var(--painel); }
.demo-escrever input { flex: 1; min-width: 0; }
.demo-escrever button { flex: none; padding: .3rem .65rem; }

/* ---- abas do cartão: passo a passo, segurança e custo ---------------------------------------- */
.demo-abas { display: flex; gap: .15rem; margin: -.25rem -.3rem .7rem; padding: 2px; border-radius: 8px; background: var(--painel-2); }
.demo-abas button { flex: 1; padding: .3rem .2rem; border: 0; border-radius: 6px; background: transparent; color: var(--suave); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.demo-abas button.ativo { background: var(--painel); color: var(--marca-texto); box-shadow: var(--sombra-1); }
.demo-aba-cheia .demo-celular { display: none; }
.demo-aba-cheia .demo-trilho-fechar { position: sticky; top: -.7rem; z-index: 1; background: var(--fundo); }
.demo-guia h3 { margin: .9rem 0 .35rem; font-size: .9rem; }
.demo-seguranca { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .6rem; }
.demo-seguranca li { display: grid; gap: .15rem; padding-bottom: .6rem; border-bottom: 1px solid var(--borda); font-size: .88rem; line-height: 1.4; }
.demo-seguranca li:last-child { border-bottom: 0; padding-bottom: 0; }
.demo-seguranca strong { font-size: .92rem; }
.demo-seguranca span { color: var(--suave); }
.demo-item-acao { margin-top: .3rem; display: grid; gap: .35rem; justify-items: start; }
.demo-item-acao .secundario { font-size: .82rem; padding: .25rem .6rem; }
.demo-resultado { margin: 0; font-size: .84rem; color: var(--texto); }
.demo-resultado.bloqueado { color: var(--erro); font-weight: 600; }
.demo-categorias { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: .84rem; line-height: 1.4; }
.demo-categorias li { display: grid; gap: .1rem; justify-items: start; padding-bottom: .55rem; border-bottom: 1px solid var(--borda); color: var(--suave); }
.demo-categorias li:last-child { border-bottom: 0; padding-bottom: 0; }
.demo-categoria-topo { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; width: 100%; color: var(--texto); font-size: .92rem; }
.demo-categoria-preco { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.demo-categoria-meta { font-size: .76rem; }
.demo-etiqueta-wap { margin-top: .2rem; padding: .05rem .45rem; border-radius: 999px; background: var(--painel-2); font-size: .74rem; font-weight: 600; }
.demo-etiqueta-wap.no-wap { background: var(--marca-suave); color: var(--marca-texto); }
.demo-uso-modelos { display: flex; flex-wrap: wrap; gap: .3rem; }
.demo-uso-modelos .secundario { font-size: .8rem; padding: .22rem .55rem; }
.demo-uso-modelos .secundario.ativo { border-color: var(--marca); background: var(--marca-suave); color: var(--marca-texto); font-weight: 600; }
.demo-uso { display: grid; gap: .35rem; margin-top: .6rem; }
.demo-uso-linha { display: grid; grid-template-columns: minmax(0, 1fr) 5.4rem 5.2rem; align-items: center; gap: .45rem; font-size: .85rem; }
.demo-uso-linha input { width: 100%; box-sizing: border-box; min-width: 0; font-variant-numeric: tabular-nums; }
.demo-uso-subtotal { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.demo-uso-total { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; margin-top: .55rem; padding-top: .45rem; border-top: 2px solid var(--borda-forte); font-size: .84rem; }
.demo-uso-total-valor { font-size: 1.12rem; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.demo-jornada { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .83rem; line-height: 1.35; }
.demo-jornada li:not(.demo-jornada-regra) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .6rem; padding: .3rem .5rem; border-radius: 8px; background: var(--painel-2); }
.demo-jornada li.enviada { background: var(--marca-suave); }
.demo-jornada-tipo { grid-column: 1; font-size: .72rem; font-weight: 600; color: var(--suave); }
.demo-jornada-texto { grid-column: 1; overflow-wrap: anywhere; }
.demo-jornada-preco { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .78rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-jornada-regra { padding: .1rem .5rem; text-align: center; font-size: .78rem; font-style: italic; color: var(--suave); }
.demo-jornada-soma { margin-top: .45rem !important; font-size: .86rem; font-weight: 600; }
.demo-dica { margin: .25rem 0 0; font-size: .82rem; color: var(--suave); }
.demo-fatos { margin: .8rem 0 0; padding-left: 1.05rem; display: grid; gap: .3rem; font-size: .84rem; line-height: 1.4; }

/* ---- o chamado como ficaria no GLPI ---------------------------------------------------------- */
.demo-glpi-corpo { display: grid; gap: .55rem; padding: 1.3rem; max-height: min(82dvh, 720px); overflow-y: auto; box-sizing: border-box; }
.demo-glpi-corpo .demo-etiqueta { justify-self: start; margin: 0; }
.demo-glpi-corpo h2, .demo-glpi-corpo h3 { margin: 0; }
.demo-glpi-corpo h3 { font-size: .92rem; margin-top: .4rem; }
.demo-glpi-titulo { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.demo-glpi-corpo dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .7rem; margin: 0; font-size: .86rem; }
.demo-glpi-corpo dt { color: var(--suave); }
.demo-glpi-corpo dd { margin: 0; overflow-wrap: anywhere; }
.demo-glpi-corpo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .86rem; }
.demo-glpi-corpo li { display: grid; gap: .1rem; padding: .45rem .6rem; border-radius: 8px; background: var(--painel-2); overflow-wrap: anywhere; }
.demo-glpi-corpo small { color: var(--suave); }
.demo-glpi-corpo .primario { justify-self: end; }

/* O que o passo pede: um anel que pulsa em volta do botão. */
.demo-alvo { outline: 3px solid var(--marca) !important; outline-offset: 2px; animation: demo-pulso 1.5s ease-out infinite; position: relative; z-index: 2; }
@keyframes demo-pulso { 0% { box-shadow: 0 0 0 0 var(--marca-anel); } 80%, 100% { box-shadow: 0 0 0 11px transparent; } }
@media (prefers-reduced-motion: reduce) { .demo-alvo { animation: none; } .demo-papel, .demo-progresso-valor { transition: none; } }

.demo-aviso { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 30; width: min(30rem, calc(100vw - 2rem)); box-sizing: border-box; padding: .7rem .9rem; border-radius: 10px; background: var(--toast); color: var(--toast-texto); box-shadow: var(--sombra-3); }

/* ---- telas estreitas: o painel ocupa tudo; guia e celular sobem como uma folha ----------------- */
@media (max-width: 1239px) {
  body.demo-no-painel { grid-template: "barra" auto "faixa" auto "app" minmax(0, 1fr) / minmax(0, 1fr); }
  .demo-no-painel .avisos { right: 0; }
  .demo-barra { padding: .35rem .6rem; gap: .4rem; }
  .demo-barra-texto { display: none; }
  .demo-barra-acoes { gap: .3rem; }
  .demo-botao-celular { display: block; padding: .2rem .55rem; border: 0; border-radius: 6px; background: var(--marca); color: var(--sobre-marca); font: inherit; font-size: .82rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
  .demo-faixa:not([hidden]) { grid-area: faixa; display: flex; align-items: center; gap: .5rem; width: 100%; padding: .4rem .7rem; border: 0; border-bottom: 1px solid var(--borda); background: var(--marca-suave); color: var(--texto); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
  .demo-faixa span:not(.demo-faixa-mais) { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .demo-faixa-mais { flex: none; color: var(--marca-texto); font-weight: 600; }
  .demo-trilho { position: fixed; inset: auto 0 0 0; height: min(86dvh, 680px); z-index: 20; border-left: 0; border-top: 1px solid var(--borda-forte); border-radius: 16px 16px 0 0; box-shadow: var(--sombra-3); transform: translateY(102%); visibility: hidden; transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility .22s; padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px)); }
  .demo-trilho-aberto .demo-trilho { transform: none; visibility: visible; }
  .demo-trilho-fechar { display: block; flex: none; padding: .35rem; border: 0; background: transparent; color: var(--marca-texto); font: inherit; font-weight: 600; cursor: pointer; }
  .demo-celular { flex: 1 0 340px; }
}
@media (max-width: 1239px) and (prefers-reduced-motion: reduce) { .demo-trilho { transition: none; } }
/* celular: a barra precisa caber em 320 px; "Recomeçar" vira só o símbolo (o nome continua no aria-label) */
@media (max-width: 760px) { .demo-cta { display: none; } }
@media (max-width: 520px) {
  .demo-barra-acoes { margin-left: 0; width: 100%; justify-content: space-between; }
  .demo-etiqueta { display: none; }
  .demo-link { font-size: 0; text-decoration: none; padding: .1rem .35rem; opacity: 1; }
  .demo-link::after { content: "↺"; font-size: 1.2rem; line-height: 1; }
}