/* =========================================================
   APP INSTALAVEL — Detonado Claude.OS 1.0
   (1) safe-area: com viewport-fit=cover a pagina vai ate a borda da tela
       (notch, ilha, barra de gestos). Aqui ela devolve esse espaco.
       Fora do iPhone/app instalado, env() vale 0 e nada muda.
   (2) botoes 📲 APP / ❓ TOUR do cabecalho do sistema
   (3) o guia "Instalar como app", o aviso discreto e os passos
   ========================================================= */

/* ---------- (1) safe-area ---------- */
/* o corpo inteiro anda pra dentro da area segura; o fundo continua ate a borda */
body.pagina-sistema,body.pagina-livro{
  padding-top:env(safe-area-inset-top,0px);
  padding-right:env(safe-area-inset-right,0px);
  padding-left:env(safe-area-inset-left,0px)}
/* no Livro a coluna tem a altura da tela (100dvh): o rodape dos controles sobe acima da barra de gestos */
body.pagina-livro{padding-bottom:env(safe-area-inset-bottom,0px)}
/* app instalado no iPhone (barra de status translucida): o que rola nao passa por baixo do relogio */
body.pagina-sistema::before{content:'';position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);
  background:#0D0D0D;z-index:30;pointer-events:none}
@media(min-width:861px){ .pagina-sistema nav.lateral{top:env(safe-area-inset-top,0px)} }
/* elementos fixos nao herdam o padding do corpo: cada um cuida do seu */
.pagina-sistema .barra{
  padding-bottom:calc(11px + env(safe-area-inset-bottom,0px));
  padding-left:calc(16px + env(safe-area-inset-left,0px));
  padding-right:calc(16px + env(safe-area-inset-right,0px))}
.pagina-sistema #conq,.pagina-sistema #compart{
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px))
          max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.pagina-livro .barra-foco{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
@media(orientation:landscape) and (max-height:520px){
  .pagina-livro .barra-foco{bottom:auto;right:calc(8px + env(safe-area-inset-right,0px))}
}

/* ---------- (2) botoes pequenos do cabecalho ---------- */
/* margin-left:auto encosta o grupo nos botoes da direita; no celular em pe ele
   fica na 1a linha, ao lado do logo, e os botoes ORIGINAL/LIVRO/MAPA descem */
.topo-extra{display:flex;gap:6px;margin-left:auto;align-items:center}
.bt-topo{font-family:var(--mono);font-size:11px;letter-spacing:.08em;line-height:1.25;background:none;color:var(--creme);
  border:1px solid var(--line);border-radius:99px;padding:6px 11px;cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent}
.bt-topo:hover{border-color:var(--lar)}
#btApp{border-color:color-mix(in srgb,var(--lar) 50%,var(--line));color:#ffb39a}
#btApp[hidden],.bt-topo[hidden]{display:none!important}
/* celular estreito: so o icone (o title e o aria dizem o resto) */
@media(max-width:420px){
  .pagina-sistema .bt-topo .bt-rot{display:none}
  .pagina-sistema .bt-topo{padding:5px 9px;font-size:12px}
}
/* no Livro os dois botoes moram dentro de .modos e herdam o visual de la */
.pagina-livro .modos #btApp{color:#ffb39a}
@media(max-width:759px) and (orientation:portrait), (max-width:759px) and (min-height:521px){
  .pagina-livro .modos .bt-rot{display:none}
}

/* ---------- (3) guia "Instalar como app" ---------- */
.inst-modal{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;
  background:rgba(5,5,5,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px))
          max(14px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
.inst-modal.on{display:flex;animation:inst-entra .25s ease-out}
@keyframes inst-entra{from{opacity:0}}
.inst-caixa{position:relative;width:min(420px,100%);max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--card,#141412);border:1px solid var(--line,#262624);border-radius:16px;padding:22px 16px 12px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,90,42,.12)}
.inst-logo{display:block;width:64px;height:64px;border-radius:15px;margin:0 auto 10px;box-shadow:0 0 26px rgba(234,179,8,.28)}
.inst-caixa h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:24px;letter-spacing:.02em;line-height:1.1;margin:0 0 2px}
.inst-caixa h2 b{color:var(--lar);font-weight:400}
.inst-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:99px;border:1px solid var(--line);
  background:none;color:var(--creme);font-size:14px;cursor:pointer}
.inst-x:hover{border-color:var(--lar)}
.inst-sub{color:var(--muted);font-size:13.5px;line-height:1.45;margin:6px 0 12px}
.inst-depois{opacity:.75;margin-top:10px}
.inst-botao{font-size:15px;padding:15px 12px;margin:4px 0 6px}
.inst-dica{color:var(--muted);font-size:12.5px;margin:0 0 6px;line-height:1.45}

/* os passos: numero + icone desenhado + texto */
.inst-passos{list-style:none;margin:0 0 10px;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px}
.inst-passo{display:flex;align-items:center;gap:11px;background:var(--card2,#0f0f0e);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.inst-num{flex:none;width:22px;height:22px;border-radius:99px;background:var(--lar);color:#0D0D0D;
  font:600 12px/22px var(--mono);text-align:center}
/* azul do sistema (iOS/Android): o icone parece o que a pessoa vai achar na tela */
.inst-ic{flex:none;width:52px;height:44px;border-radius:11px;background:#1c1c1e;border:1px solid #33302a;
  display:flex;align-items:center;justify-content:center;color:#3E9BFF}
.inst-ic svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.inst-ic svg .ch{fill:currentColor;stroke:none}
.inst-pilula{font:600 9.5px/1 Inter,system-ui,sans-serif;color:#3E9BFF;letter-spacing:0}
.inst-tx{display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.35;min-width:0}
.inst-tx b{font-weight:600;color:var(--creme)}
.inst-tx small{color:var(--muted);font-size:12.5px;line-height:1.4}
.inst-nota{display:flex;gap:10px;align-items:flex-start;text-align:left;font-size:12.5px;line-height:1.45;color:#d9c58a;
  border:1px solid color-mix(in srgb,var(--am) 35%,var(--line));background:rgba(234,179,8,.06);border-radius:10px;padding:9px 11px;margin:0 0 8px}
.inst-nota svg{flex:none;width:20px;height:20px;stroke:var(--am);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.inst-nota b{color:#f0dc9c;font-weight:600}
/* dentro da caixa de Configuracoes o texto alinha a esquerda, como o resto da aba */
.inst-config .inst-sub{margin:0 0 10px}
/* celular deitado (pouca altura): sem o icone grande e os 3 passos lado a lado, tudo numa tela so */
@media(orientation:landscape) and (max-height:520px){
  .inst-caixa{width:min(780px,100%);padding:14px 14px 8px}
  .inst-logo{display:none}
  .inst-caixa h2{font-size:20px;padding:0 40px}
  .inst-modal .inst-sub{margin:2px 0 8px}
  .inst-modal .inst-passos{flex-direction:row;align-items:stretch}
  .inst-modal .inst-passo{flex:1 1 0;flex-wrap:wrap;align-content:flex-start;padding:9px 10px;gap:8px}
  .inst-modal .inst-tx{flex-basis:100%}
  .inst-modal .inst-depois{margin-top:4px;padding:9px}
}

/* ---------- aviso discreto (primeira entrada, depois do tour) ---------- */
.inst-aviso{position:fixed;z-index:20;left:50%;bottom:calc(62px + env(safe-area-inset-bottom,0px));
  width:min(470px,calc(100% - 24px));display:flex;align-items:center;gap:8px;
  background:rgba(20,20,18,.97);border:1px solid color-mix(in srgb,var(--lar) 45%,var(--line));border-radius:14px;
  padding:8px 8px 8px 13px;box-shadow:0 10px 30px rgba(0,0,0,.55);
  opacity:0;transform:translate(-50%,12px);transition:opacity .3s,transform .3s}
.inst-aviso.on{opacity:1;transform:translate(-50%,0)}
.inst-aviso-tx{flex:1;min-width:0;font-size:12.5px;line-height:1.35;color:#d8d2c5}
.inst-aviso-tx b{color:var(--creme)}
.inst-aviso-bt{flex:none;background:var(--lar);color:#0D0D0D;border:0;border-radius:9px;padding:9px 12px;
  font:600 11.5px/1.1 var(--mono);cursor:pointer;white-space:nowrap}
.inst-aviso-x{flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer}
.inst-aviso-x:hover{color:var(--creme);border-color:var(--lar)}
html.modo-foco .inst-aviso{display:none}