/* =========================================================
   I18N — porta de entrada (3 bandeiras), seletor do cabecalho, caixa em
   Configuracoes e o aviso "traducao do guia em breve" do Livro. Ver i18n.js.
   ========================================================= */

/* bandeira em SVG (emoji de bandeira nao aparece no Windows) */
.bandeira{display:inline-flex;flex:none;width:20px;height:14px;border-radius:3px;overflow:hidden;vertical-align:-2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.bandeira svg{width:100%;height:100%;display:block}
.bandeira.grande{width:66px;height:46px;border-radius:7px;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 6px 18px rgba(0,0,0,.45)}

/* ---------- porta de entrada ---------- */
.porta-idioma{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(234,179,8,.14),transparent 60%),rgba(8,8,8,.96);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  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));
  animation:porta-entra .3s ease-out;overflow:auto}
.porta-idioma.saindo{opacity:0;transition:opacity .2s}
@keyframes porta-entra{from{opacity:0}}
.porta-caixa{width:min(560px,100%);text-align:center;margin:auto}
.porta-raio{display:block;width:84px;height:auto;margin:0 auto 6px;filter:drop-shadow(0 0 18px rgba(234,179,8,.55))}
.porta-marca{font-family:Anton,Impact,sans-serif;font-size:26px;letter-spacing:.5px;color:var(--creme,#EDE7DA)}
.porta-marca b{color:var(--lar,#FF5A2A);font-weight:400}
.porta-caixa h2{font-family:var(--mono,'IBM Plex Mono',monospace);font-weight:600;font-size:13px;letter-spacing:.08em;
  color:var(--muted,#8A857B);margin:10px 0 22px;line-height:1.7}
.porta-caixa h2 span{color:#4a463f}
.porta-bts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.porta-bt{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 8px 16px;border-radius:16px;cursor:pointer;
  background:var(--card,#141412);border:1px solid var(--line,#262624);color:var(--creme,#EDE7DA);
  font-family:Inter,system-ui,sans-serif;font-size:15px;font-weight:600;-webkit-tap-highlight-color:transparent;
  transition:transform .15s,border-color .15s,box-shadow .15s}
.porta-bt:hover,.porta-bt:focus-visible{border-color:var(--lar,#FF5A2A);transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(255,90,42,.18);outline:none}
.porta-bt.sugerida{border-color:color-mix(in srgb,var(--am,#EAB308) 55%,var(--line,#262624))}
.porta-nome{white-space:nowrap}
/* celular em pe estreito: as 3 bandeiras uma embaixo da outra, em linha */
@media(max-width:420px){
  .porta-bts{grid-template-columns:minmax(0,1fr);gap:10px}
  .porta-bt{flex-direction:row;justify-content:flex-start;padding:14px 18px;gap:16px;font-size:16px}
  .porta-bt .bandeira.grande{width:54px;height:38px}
}
/* celular deitado: pouca altura, tudo mais baixo */
@media(orientation:landscape) and (max-height:520px){
  .porta-raio{width:52px;margin-bottom:2px}
  .porta-marca{font-size:20px}
  .porta-caixa h2{margin:6px 0 14px}
  .porta-bt{padding:14px 8px 12px;gap:8px}
}

/* ---------- seletor do cabecalho ---------- */
#btIdioma{display:inline-flex;align-items:center;gap:6px}
#btIdioma .bandeira{width:18px;height:13px}
.menu-idioma{position:fixed;z-index:9700;min-width:170px;padding:6px;border-radius:12px;background:#151513;
  border:1px solid var(--line,#262624);box-shadow:0 14px 40px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px}
.menu-idioma button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid transparent;
  background:none;color:var(--creme,#EDE7DA);font-family:Inter,system-ui,sans-serif;font-size:14px;cursor:pointer;text-align:left}
.menu-idioma button:hover,.menu-idioma button:focus-visible{background:#1d1d1a;outline:none}
.menu-idioma button[aria-checked="true"]{border-color:#4a3c10;color:var(--am,#EAB308);background:rgba(234,179,8,.08)}

/* ---------- caixa em Configuracoes ---------- */
.idioma-opcoes{display:flex;flex-wrap:wrap;gap:8px}
.idioma-op{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:10px;cursor:pointer;
  background:var(--card2,#0f0f0e);border:1px solid var(--line,#262624);color:var(--creme,#EDE7DA);
  font-family:Inter,system-ui,sans-serif;font-size:14px}
.idioma-op:hover{border-color:var(--lar,#FF5A2A)}
.idioma-op[aria-checked="true"]{border-color:var(--am,#EAB308);color:var(--am,#EAB308);background:rgba(234,179,8,.08)}

/* ---------- Livro: o guia ainda nao foi traduzido ---------- */
.aviso-traducao{position:fixed;z-index:40;left:50%;transform:translateX(-50%);top:calc(64px + env(safe-area-inset-top,0px));
  display:flex;align-items:center;gap:8px;max-width:min(560px,calc(100% - 20px));padding:6px 6px 6px 12px;border-radius:99px;
  background:rgba(20,16,10,.92);border:1px solid #4a3c10;color:#d9c58a;font:500 12px/1.35 Inter,system-ui,sans-serif;
  box-shadow:0 6px 20px rgba(0,0,0,.5)}
.aviso-traducao button{flex:none;width:26px;height:26px;border-radius:99px;border:1px solid #4a3c10;background:none;color:#d9c58a;cursor:pointer}
html.modo-foco .aviso-traducao{display:none}
@media(max-width:759px){ .aviso-traducao{top:auto;bottom:calc(var(--alt-ctl,58px) + 12px);border-radius:12px} }
@media(orientation:landscape) and (max-height:520px){
  .aviso-traducao{top:8px;bottom:auto;border-radius:99px;max-width:min(520px,calc(100% - 270px))}
}

/* o rotulo do bloco de prompt do guia vem do CSS (livro.css): por lingua aqui */
html[lang="en"] .fluxo pre.prompt::before{content:"▸ PROMPT · COPY, ADJUST THE [BRACKETS] AND PASTE"}
html[lang="es"] .fluxo pre.prompt::before{content:"▸ PROMPT · COPIA, AJUSTA LOS [CORCHETES] Y PEGA"}

/* Livro deitado: o trilho da esquerda tem 108 px; "PANTALLA COMPLETA" / "FULL SCREEN" nao cabem: fica so o ⤢ */
@media(orientation:landscape) and (max-height:520px){
  html[lang="en"] .pagina-livro .topo .btn-tela-cheia .tc-rot,
  html[lang="es"] .pagina-livro .topo .btn-tela-cheia .tc-rot{display:none}
}
/* Sistema em pe ate ~470 px: "PANTALLA COMPLETA" empurra a linha dos modos 5 px pra fora
   (rolagem lateral a 430x932); o PT/EN ja cabem e so somem abaixo de 410 px (estilo.css) */
@media(max-width:470px){ html[lang="es"] .pagina-sistema .topo .tc-rot{display:none} }
.aviso-traducao.some{opacity:0;transition:opacity .6s;pointer-events:none}