/* PrismJS 1.30.0

https://prismjs.com/download#themes=prism-dark&languages=markup+css+clike+javascript+c+csharp+cpp+css-extras+git+graphql+http+java+javadoclike+json+markup-templating+nginx+php+phpdoc+php-extras+powershell+python+jsx+tsx+sql+typescript&plugins=line-highlight+line-numbers */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css");
/* PrismJS 1.30.0
https://prismjs.com/download#themes=prism-dark&languages=markup+css+clike+javascript+bash+batch+c+csharp+cpp+cobol+csv+diff+docker+git+graphql+java+javadoclike+json+json5+markdown+markup-templating+mongodb+nginx+php+phpdoc+php-extras+powershell+python+jsx+tsx+sql+typescript */
code[class*=language-],pre[class*=language-]{color:#fff;background:0 0;text-shadow:0 -.1em .2em #000;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}:not(pre)>code[class*=language-],pre[class*=language-]{background:#4c3f33}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border:.3em solid #7a6651;border-radius:.5em;box-shadow:1px 1px .5em #000 inset}:not(pre)>code[class*=language-]{padding:.15em .2em .05em;border-radius:.3em;border:.13em solid #7a6651;box-shadow:1px 1px .3em -.1em #000 inset;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#997f66}.token.punctuation{opacity:.7}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.number,.token.property,.token.symbol,.token.tag{color:#d1939e}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#bce051}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f4b73d}.token.atrule,.token.attr-value,.token.keyword{color:#d1939e}.token.important,.token.regex{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.deleted{color:red}

/* Estilo para o container do bloco de código */

/* Nosso CSS Personalizado (Continua aqui) */
/* Nosso CSS Personalizado - ATUALIZADO para ícone fixo e etiqueta de linguagem */
/* Nosso CSS Personalizado (Continua aqui) */
/* CSS DEFINITIVO - Ícone fixo no scroll horizontal */

/* O container principal do bloco de código.
   É o nosso 'scroll container' por causa do 'overflow-x: auto'. */
/* CSS DEFINITIVO - Ícone fixo no scroll horizontal (Versão Corrigida) */

/* 1. O novo "invólucro" que não rola.
   Ele serve como a base de posicionamento para o botão e a etiqueta. */
/* Nosso CSS Personalizado - ATUALIZADO para ícone e etiqueta fixos na tela (sticky) */

/* O container principal do bloco de código.
   Precisa ter 'position: relative' para que os elementos 'sticky' se posicionem corretamente. */
/* CSS DEFINITIVO v2 - Ícone fixo no scroll horizontal (Estrutura com Wrapper) */

/* 1. O "invólucro" (wrapper). Ele é invisível e serve apenas de âncora de posicionamento. */
.bloco-de-codigo-wrapper {
    position: relative; /* ESSENCIAL para posicionar o botão e a etiqueta */
    margin-bottom: 1.5em;
}

/* 2. O botão de cópia. Posicionado de forma absoluta em relação ao wrapper. */
/* Como o wrapper não rola, o botão também não vai rolar. */
.bloco-de-codigo-wrapper .botao-copiar {
    position: absolute;
    top: 10px;      /* Distância do topo do invólucro */
    right: 10px;     /* Distância da direita do invólucro */
    z-index: 10;    /* Garante que ele fique por cima de tudo */
    
    background-color: #555;
    border: 1px solid #777;
    border-radius: 3px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.3s, background-color 0.3s;
    text-indent: -9999px;
    overflow: hidden;
}

/* Ícone dentro do botão */
.bloco-de-codigo-wrapper .botao-copiar::before {
    content: '\f0c5';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    text-indent: 0;
    position: absolute;
    color: white;
}

.bloco-de-codigo-wrapper .botao-copiar:hover {
    opacity: 1;
}

/* Estilos do botão após a cópia */
.bloco-de-codigo-wrapper .botao-copiar.copiado {
    background-color: #008000;
    border-color: #006400;
}

.bloco-de-codigo-wrapper .botao-copiar.copiado::before {
    content: '\f00c';
}

/* 3. A etiqueta da linguagem, também posicionada de forma absoluta no wrapper. */
.bloco-de-codigo-wrapper .etiqueta-linguagem {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 9;

    background-color: #444;
    color: #f1f1f1;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

/* 4. O elemento <pre> que contém o código. ESTE é quem rola. */
.bloco-de-codigo-wrapper .bloco-de-codigo {
    margin: 0;
    background-color: #272822;
    border: 1px solid #444;
    border-radius: 5px;
    padding: 15px;
    padding-top: 45px; /* Espaço para o botão e etiqueta não cobrirem o código */
    font-family: 'Courier New', Courier, monospace;
    overflow-x: auto; /* A BARRA DE ROLAGEM FICA AQUI */
}