/* Blocos de codigo. As classes tk-* vem do realce feito no servidor. */

.codigo{
  background:#1b1f23;
  color:#e6edf3;
  border-radius:var(--raio);
  padding:18px 20px;
  overflow-x:auto;
  font-size:14.5px;
  line-height:1.55;
  position:relative;
  -webkit-overflow-scrolling:touch;
}
.codigo code{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  white-space:pre;
  display:block;
}

/* Rotulo da linguagem no canto */
.codigo::before{
  content:attr(data-lang);
  position:absolute;top:8px;right:12px;
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:#8b949e;pointer-events:none;
}
.codigo[data-lang="texto"]::before{content:none}

/* Cores dos tokens — contraste verificado sobre #1b1f23 */
.tk-com{color:#8b949e;font-style:italic}
.tk-str{color:#a5d6ff}
.tk-num{color:#79c0ff}
.tk-key{color:#ff7b72}
.tk-var{color:#ffa657}
.tk-atr{color:#7ee787}

/* Botao de copiar (js/codigo.js insere) */
.copiar{
  position:absolute;top:6px;right:6px;
  background:rgba(255,255,255,.08);color:#e6edf3;
  border:1px solid rgba(255,255,255,.15);border-radius:4px;
  font-size:12px;padding:4px 10px;cursor:pointer;
  opacity:0;transition:opacity .15s;font-family:inherit;
}
.codigo:hover .copiar,.copiar:focus{opacity:1}
.copiar:hover{background:rgba(255,255,255,.16)}
.copiar[data-copiado="1"]{color:#7ee787}

/* Com o botao visivel, o rotulo da linguagem sai da frente */
.codigo:hover::before{opacity:0}

@media (max-width:767px){
  /* Fonte e respiro menores: com 14.5px, uma linha de 48 caracteres
     ocupa ~418px e forcaria rolagem horizontal ja numa tela de 360px.
     O overflow-x continua como rede de seguranca para linhas longas. */
  .codigo{font-size:13px;padding:16px 14px;border-radius:0;
          margin-left:calc(-1 * var(--recuo));margin-right:calc(-1 * var(--recuo));}
  .codigo::before{font-size:10px;top:6px;right:10px}
  /* No toque nao existe hover: o botao de copiar fica sempre visivel. */
  .copiar{opacity:1}
}