/* =============================================================================
   STINT · Apresentação Comercial Interativa — INTERFACE (barra, palco, editor)
   ============================================================================= */
html, body { height: 100%; margin: 0; background: #070907; color: #e8efe4; font-family: 'Poppins', Arial, sans-serif; overflow: hidden; }
* { box-sizing: border-box; }
button { font: inherit; }

/* barra superior */
.barra-topo {
  position: fixed; left: 0; right: 0; top: 0; height: 52px; z-index: 50; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; background: rgba(9, 12, 9, .94); border-bottom: 1px solid rgba(255, 255, 255, .07); backdrop-filter: blur(8px);
}
.barra-topo .marca-app { display: flex; align-items: center; gap: 10px; margin-right: 6px; }
.barra-topo .marca-app img { height: 16px; display: block; }
.barra-topo .marca-app span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8aa391; white-space: nowrap; }
.barra-topo .sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .1); margin: 0 4px; }
.barra-topo .esp { flex: 1; }
.bt {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #dfe8da; font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.bt:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.bt:disabled { opacity: .35; cursor: default; }
.bt svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bt.ico { width: 32px; padding: 0; justify-content: center; }
.bt.prim { background: linear-gradient(#86ee1d, #5cc80a); color: #0a1505; border-color: transparent; font-weight: 600; }
.bt.prim:hover { filter: brightness(1.05); }
.bt.ativo { background: rgba(119, 228, 13, .16); border-color: rgba(119, 228, 13, .55); color: #c9f79c; }
#pos { min-width: 64px; text-align: center; font: 600 12px/1 'Poppins', Arial, sans-serif; letter-spacing: .08em; color: #a7bdae; }
.barra-topo select.bt { padding-right: 8px; max-width: 250px; }
.barra-topo select.bt option { background: #111611; color: #dfe8da; }

/* ferramentas de edição (aparecem só no modo de edição) */
.ferramentas-edicao { display: none; align-items: center; gap: 6px; }
body.editando .ferramentas-edicao { display: flex; }
.estado-edicao { font-size: 11.5px; color: #9fb4a6; margin-left: 4px; white-space: nowrap; }
.estado-edicao.pendente { color: #f5c451; }

/* área do slide */
#area { position: fixed; left: 0; right: 0; top: 52px; bottom: 0; overflow: hidden; background: #050605; }
#palco { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
#palco .slide { display: none; }
#palco .slide.ativo { display: block; animation: slideEntra .32s ease both; }
@keyframes slideEntra { from { opacity: 0; } to { opacity: 1; } }

/* tela cheia: somente o slide */
body.tela-cheia .barra-topo, body.tela-cheia .nav-lateral, body.tela-cheia .dica-teclado { display: none !important; }
body.tela-cheia #area { top: 0; background: #000; }
body.tela-cheia #palco { box-shadow: none; }
body.tela-cheia { cursor: none; }
body.tela-cheia.cursor-visivel { cursor: auto; }

/* setas laterais discretas (fora da tela cheia) */
.nav-lateral { position: fixed; top: 50%; z-index: 40; width: 38px; height: 64px; margin-top: -6px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .05); color: #cfe0c8; opacity: .55; display: flex; align-items: center; justify-content: center; }
.nav-lateral:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.nav-lateral svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav-lateral.esq { left: 8px; } .nav-lateral.dir { right: 8px; }
.nav-lateral:disabled { opacity: .15; cursor: default; }

/* aviso (toast) */
.aviso { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); z-index: 90; opacity: 0; pointer-events: none;
  background: #121812; color: #e8f2e1; border: 1px solid rgba(119, 228, 13, .35); border-radius: 10px; padding: 10px 16px; font-size: 13px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45); transition: all .22s ease; max-width: 90vw; }
.aviso.on { opacity: 1; transform: translateX(-50%); }

/* janela de confirmação simples */
.modal-fundo { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, .6); display: none; align-items: center; justify-content: center; padding: 16px; }
.modal-fundo.on { display: flex; }
.modal { width: min(460px, 100%); background: #111611; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 20px 22px; color: #e3ecde; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.modal h3 { margin: 0 0 8px; font: 400 19px/1.25 'Bree Serif', Georgia, serif; color: #fff; }
.modal p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: #b9c8b5; }
.modal .acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .barra-topo .marca-app span, .bt .rot { display: none; }
  .barra-topo { gap: 5px; padding: 0 8px; }
  .barra-topo select.bt { max-width: 120px; }
}
/* barra mais compacta no modo de edição (os botões mantêm a dica no title) */
@media (max-width: 1680px) {
  body.editando .ferramentas-edicao .bt .rot { display: none; }
  body.editando .ferramentas-edicao .bt { width: 32px; padding: 0; justify-content: center; }
  body.editando .barra-topo .marca-app span { display: none; }
}
@media (max-width: 1280px) { body.editando .estado-edicao { display: none; } body.editando .barra-topo select.bt { max-width: 150px; } }
@media (max-width: 640px) {
  .barra-topo .marca-app, .barra-topo .sep, .barra-topo select.bt { display: none; }
  .barra-topo .bt:not(.ico) { width: 34px; padding: 0; justify-content: center; }
  .barra-topo .bt .rot { display: none; }
  .barra-topo .esp { flex: 1; }
  #pos { min-width: 54px; }
  body.editando .estado-edicao { display: none; }
  .nav-lateral { display: none; }
}