/* Aplica a cualquier contenedor que termine en -code-container */
[class$="-code-container"] {
  position: relative;
  max-width: 80dvh;
}

/* Botón copiar */
[class$="-code-container"] .copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(40, 40, 40, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

[class$="-code-container"]:hover .copy-btn {
  opacity: 1;
}

[class$="-code-container"] .copy-btn:hover {
  background: rgba(70, 70, 70, 0.9);
  color: #fff;
}

[class$="-code-container"] .copy-btn.copied {
  color: #4caf50;
  border-color: rgba(76, 175, 80, 0.4);
}



.python-code-container {
  position: relative;
}

/* Botón flotante
.python-code-container .copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(40, 40, 40, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
} */

/* Mostrar solo al hover */
.python-code-container:hover .copy-btn {
  opacity: 1;
}

.python-code-container .copy-btn:hover {
  background: rgba(70, 70, 70, 0.9);
  color: #fff;
}

/* Estado copiado */
.python-code-container .copy-btn.copied {
  color: #4caf50;
  border-color: rgba(76, 175, 80, 0.4);
}
/* Base */
[class$="-code-container"] {
  background: rgba(255, 255, 255, 0);
  position: relative;
  height: auto;
  resize: vertical;          /* 🔥 RESIZE */
  overflow: auto;            /* scroll interno */
}

/* Mantener el pre dentro del contenedor */
[class$="-code-container"] pre {
  margin: 0 !important;
  /* min-height: 30dvh; */
}

/* Evitar que el botón se desplace */
[class$="-code-container"] .copy-btn {
  position: sticky;
  top: 8px;
  float: right;
  z-index: 2;
}

/* Contenedores de código */
[class$="-code-container"] {
  background: #1e1e1e;          /* mismo fondo base */
  border: 1px solid #2a2a2a;
  border-radius: 6px;
}

/* Ajuste fino del pre */
[class$="-code-container"] pre {
  background: transparent;     /* deja que el contenedor mande */
  /* padding: 12px; */
  margin: 0 !important;
}

/* Scroll discreto */
[class$="-code-container"]::-webkit-scrollbar {
  width: 1px;
  height: 0;
}
[class$="-code-container"]::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

pre[class*="language-"] {
  height: 60rem !important;
  /* max-width: 80dvh; */
  resize: vertical;
  padding: 0px !important;
  margin: 0px !important;
}

nue-code-viewer, nue-python-code-viewer{
  display: flex;
  justify-content: center;
}