/* Fundo e aparência geral do bloco */
pre[class*="language-"],
code[class*="language-"] {
  background: #010409; /* cor de fundo */
  color: #f8f8f2;       /* cor padrão do texto */
  padding: 0.4rem 1rem !important; /* espaçamento interno */
  margin: 0.1rem 0;    /* espaçamento externo */
  display: block;      /* exibição em bloco */
  overflow-x: auto;
  font-size: 0.95rem;
  border-radius: 1px;
  line-height: 1.5;
  font-family: 'Fira Code', Consolas, monospace;
}

/* Comentários */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6b7280; /* cinza */
  font-style: italic;
}

/* Palavras-chave (if, for, function...) */
.token.keyword {
  color: #8b5cf6; /* roxo claro */
}

/* Strings */
.token.string {
  color: #4e95e6; /* ciano claro */
}

/* Números */
.token.number {
  color: #f8f8f2; /* branco */
}

/* Funções */
.token.function {
  color: #8b5cf6; /* roxo */
}

/* Pontuação */
.token.punctuation {
  color: #ffbb00; /* laranja */
}

/* Variáveis */
.token.variable {  
  color: #f8f8f2; /* branco */
}

/* Classes */
.token.class-name {
  color: #ffbb00; /* laranja */
}
/* Propriedades e atributos */
.token.property {
  color: #ff00a2; /* branco */
}

/* Tags HTML */
.token.tag {
  color: #ffbb00; /* laranja */
}

/* Operadores e símbolos */
.token.operator {
  color: #ffbb00; /* laranja */
}

/* Destaque de linha opcional */
.line-highlight {
  background: rgba(255, 255, 255, 0.05);
  display: block;
  width: 100%;
}

/*-- Peronização de código --*/
/* 1. Defina uma classe para seu summary (ou estilize diretamente o elemento) */
summary.custom-toggle {
  display: block;        /* só o que for necessário */
  width: fit-content;           /* largura mínima para caber o texto */
  margin: 0;                    /* remove qualquer margem automática */
  cursor: pointer; 
  font-size: 0.9rem;             /* mãozinha no hover */
  font-weight: bold;            /* negrito */
  text-align: center;             /* alinhado à esquerda */
  padding: 0.3rem 0.35rem;       /* espaçamento interno */
  background-color: #1e40af;  /* fundo azul (ajuste à sua paleta) */
  color: #ffffff;             /* texto branco */
  border-radius: 0.25rem;       /* cantos levemente arredondados */
  transition: background 0.3s, border-color 0.3s;

}

/* 2. Mudar cor de fundo e borda ao passar o mouse */
summary.custom-toggle:hover {
  background-color: #010409;
}

/* 3. Opcional: ícone antes do texto */
summary.custom-toggle::before {
  content: "▶"; /* ícone de seta */
  display: inline-block;
  margin-left: 0.2rem;
  transition: transform 0.2s;
}

/* 4. Rotaciona o ícone quando o <details> estiver aberto */
details[open] > summary.custom-toggle::before {
  transform: rotate(90deg);
}