body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
}

.site-header, .site-footer {
  padding: 1rem;
  max-width: 960px;
  margin: 0 auto;
}

.content {
  padding: 1rem;
  max-width: 960px;
  margin: 0 auto;
}

nav a {
  margin-right: .75rem;
  text-decoration: none;
}

h1, h2, h3 {
  line-height: 1.25;
}

.summary {
  color: #444;
}

/* ==== Code blocks (Jekyll + Rouge) ==== */
.content .highlight {
  background: #f6f8fa;         /* gris suave */
  border: 1px solid #e5e7eb;    /* borde sutil */
  border-radius: 8px;
  padding: 0.85rem 1rem;
  overflow: auto;
  margin: 1rem 0;
}
.content .highlight pre {
  background: transparent;
  margin: 0;
}

/* tipografía del código */
.content pre, .content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* inline code `así` */
.content p code, .content li code {
  background: #f6f8fa;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
}

/* (opcional) etiqueta con el lenguaje en la esquina */
.content .highlight { position: relative; }
.content .highlight pre[class*="language-"]::after {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6b7280;
  content: attr(class);
}
/* versiones “bonitas” por lenguaje (sobrescriben el content anterior) */
.content .highlight pre.language-r::after { content: "R"; }
.content .highlight pre.language-python::after { content: "PY"; }
.content .highlight pre.language-bash::after { content: "SH"; }

/* ==== Copy button in code blocks ==== */
.content .highlight { position: relative; }
.content .highlight .copy-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  line-height: 1;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}
.content .highlight .copy-btn:hover {
  background: #f3f4f6;
}
.content .highlight .copy-btn.copied {
  background: #e6ffed;
  border-color: #34d399;
}

/* Evitar superposición con la etiqueta de lenguaje */
.content .highlight pre[class*="language-"]::after {
  left: 8px;
  right: auto;
}

/* ---- Fix: solo contenedor con estilo, no el <pre> ---- */
.content div.highlight,
.content figure.highlight {
  background: #f6f8fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  position: relative;
  overflow: auto;
  margin: 1rem 0;
}

.content pre.highlight {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Mantener tipografía del código */
.content div.highlight pre,
.content figure.highlight pre {
  background: transparent;
  margin: 0;
}

/* --- Normaliza Rouge interno para evitar bordes/fondos duplicados --- */
.content .highlight { background: transparent !important; border: 0 !important; padding: 0 !important; }
.content .highlight pre { background: transparent !important; margin: 0 !important; }

/* --- Estilo SOLO para el contenedor externo marcado por JS --- */
.content .codebox {
  background: #f6f8fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  position: relative;
  overflow: auto;
  margin: 1rem 0;
}

/* Botón copiar */
.content .codebox .copy-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.content .codebox .copy-btn:hover { background: #f3f4f6; }
.content .codebox .copy-btn.copied { background: #e6ffed; border-color: #34d399; }

/* (opcional) mostrar etiqueta con lenguaje si Rouge añade clases language-* */
.content .codebox pre[class*="language-"]::after {
  position: absolute;
  top: 6px; left: 8px;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6b7280;
  content: attr(class);
}
.content .codebox pre.language-r::after { content: "R"; }
.content .codebox pre.language-python::after { content: "PY"; }
.content .codebox pre.language-bash::after { content: "SH"; }

/* ==== Code blocks: contenedor externo con cuadro gris SIEMPRE ==== */
.content figure.highlight,
.content div.highlight {
  background: #f6f8fa !important;   /* gris suave */
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 0.85rem 1rem !important;
  position: relative !important;
  overflow: auto !important;
  margin: 1rem 0 !important;
}

/* No bordes/fondo en los <pre> internos (evita “doble borde”) */
.content pre.highlight {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tipografía del código */
.content figure.highlight pre,
.content div.highlight pre {
  background: transparent;
  margin: 0;
}

/* Botón copiar: funciona con o sin .codebox */
.content figure.highlight .copy-btn,
.content div.highlight .copy-btn,
.content .codebox .copy-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.content figure.highlight .copy-btn:hover,
.content div.highlight .copy-btn:hover,
.content .codebox .copy-btn:hover { background: #f3f4f6; }

/* === Cuadro gris robusto para Rouge === */
/* Aplica al contenedor interno .highlight que está DENTRO del wrapper .highlighter-rouge */
.content [class^="language-"].highlighter-rouge > .highlight,
.content .highlighter-rouge > .highlight {
  background: #f6f8fa !important;     /* gris suave */
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 0.85rem 1rem !important;
  position: relative !important;       /* para el botón Copiar */
  overflow: auto !important;
  margin: 1rem 0 !important;
}

/* Evita “doble borde/fondo” en el <pre> interior */
.content [class^="language-"].highlighter-rouge > .highlight > pre.highlight,
.content .highlighter-rouge > .highlight > pre.highlight {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tipografía del código */
.content .highlighter-rouge pre { background: transparent; margin: 0; }

/* Botón Copiar (funciona con o sin numeración de líneas) */
.content .highlighter-rouge > .highlight .copy-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.content .highlighter-rouge > .highlight .copy-btn:hover { background: #f3f4f6; }

/* === Cuadro gris solo en el contenedor Rouge correcto === */
.content .highlighter-rouge > .highlight {
  background: #f6f8fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 0.85rem 1rem !important;
  position: relative !important;
  overflow: auto !important;
  margin: 1rem 0 !important;
}

/* Evita el “doble borde” en el <pre> interno */
.content .highlighter-rouge > .highlight > pre.highlight {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}