.codebox {
  background-color: transparent;
  border-color: transparent;
  width: 700px;
  margin: auto;
  font-size:0.8em;"
}

.codebox p {border-bottom-color: transparent; display: none;}
.toolbar {top:5px; right:5px;}
.toolbar::before, div.toolbar::after {content: ''; display: table; clear: both; }
.toolbar {margin: 25 0 0 5px;}

/* Elimina el efecto de sombra curva (pseudoelementos) */
pre[class*="language-"]:before, pre[class*="language-"]:after {display: none !important;}

pre[class*="language-"] {
/* Aplica una sombra inferior recta y estándar */
    box-shadow: 0 12px 10px -10px rgba(0, 0, 0, 0.7) !important;
    /* Opcional: añade definición al borde */
    border-bottom: 1px solid #ddd; 
   /* Fondo: un gris muy suave para que el código resalte */
    background-color: #f8f9fa !important;    
}

/* 1. Contenedor de cada botón: Separación entre ellos */
div.code-toolbar > .toolbar .toolbar-item {
    margin-left: 15px !important; /* Más separación entre botones */
    display: inline-block;
}

/* 2. Estilo de los botones: Tamaño, colores y bordes */
div.code-toolbar > .toolbar .toolbar-item button,
div.code-toolbar > .toolbar .toolbar-item span {
    padding: 8px 15px !important;    /* Más grandes */
    font-size: 14px !important;      /* Texto más legible */
    color: #ffffff !important;       /* Texto blanco */
    background: #007acc !important;  /* Fondo azul (puedes cambiarlo) */
    border-radius: 6px !important;   /* Bordes redondeados */
    border: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; /* Pequeño relieve */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 3. Efecto al pasar el ratón (Hover) */
div.code-toolbar > .toolbar .toolbar-item button:hover {
    background: #005fa3 !important;  /* Color más oscuro al pasar el ratón */
    transform: translateY(-2px);    /* Efecto de elevación */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}