/*
 * openscad.css
 * Generated with AI assistance by Claude (claude-sonnet-4-6), Anthropic.
 * Date: February 24, 2026
 * https://claude.ai
 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,600;1,400&display=swap');

/* ---------- Variables de tema ---------- */
:root {
  --scad-bg:            #0d1117;
  --scad-surface:       #161b22;
  --scad-border:        #30363d;
  --scad-gutter:        #1c2128;
  --scad-line-hover:    rgba(99, 179, 237, 0.05);
  --scad-line-num:      #484f58;
  --scad-text:          #c9d1d9;
  --scad-comment:       #8b949e;
  --scad-keyword:       #ff7b72;      /* module, function, for, if, else… */
  --scad-builtin:       #d2a8ff;      /* translate, rotate, difference… */
  --scad-number:        #79c0ff;      /* literales numéricos */
  --scad-string:        #a5d6ff;
  --scad-operator:      #ff9a3c;      /* + - * / = */
  --scad-punctuation:   #8b949e;      /* () [] {} ; , */
  --scad-variable:      #ffa657;
  --scad-parameter:     #e3b341;
  --scad-accent:        #58a6ff;
  --scad-radius:        10px;
  --scad-font:          'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ---------- Contenedor principal ---------- */
pre:has(code[class*="language-openscad"]),
pre:has(code.has-line-data) {
  position: relative;
  background: var(--scad-bg);
  border: 1px solid var(--scad-border);
  border-radius: var(--scad-radius);
  margin: 1.5rem 0;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 8px 32px rgba(0,0,0,0.6),
    0 2px 8px rgba(0,0,0,0.4);
  font-size: 0;              /* evita espacio extra */
}

/* Barra de título estilo editor */
pre:has(code[class*="language-openscad"])::before,
pre:has(code.has-line-data)::before {
  content: "⬤  ⬤  ⬤";
  display: flex;
  align-items: center;
  font-family: var(--scad-font);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--scad-comment);
  background: var(--scad-gutter);
  border-bottom: 1px solid var(--scad-border);
  padding: 0.55rem 1rem;
}

/* ---------- El bloque <code> ---------- */
pre code.has-line-data,
pre code[class*="language-openscad"] {
  display: block;
  font-family: var(--scad-font);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--scad-text);
  background: transparent;
  padding: 1.25rem 1.5rem 1.25rem 1rem;
  overflow-x: auto;
  tab-size: 4;
  white-space: pre;

  /* Scroll elegante */
  scrollbar-width: thin;
  scrollbar-color: var(--scad-border) transparent;
}

pre code.has-line-data::-webkit-scrollbar      { height: 6px; }
pre code.has-line-data::-webkit-scrollbar-track { background: transparent; }
pre code.has-line-data::-webkit-scrollbar-thumb {
  background: var(--scad-border);
  border-radius: 3px;
}

/* ---------- Resaltado sintáctico via clases CSS
   Funciona con Prism.js, Highlight.js o clases manuales.
   Si usas Prism, añade el lenguaje "openscad" (o usa "clike").
   Si no usas ninguna librería, el bloque igual se ve bonito.
   ---------------------------------------------------------- */

/* Keywords: module, function, for, if, else, let, use, include */
.token.keyword,
.hljs-keyword,
.scad-keyword { color: var(--scad-keyword); font-weight: 600; }

/* Funciones/módulos propios de OpenSCAD */
.token.function,
.hljs-title.function_,
.scad-builtin { color: var(--scad-builtin); }

/* Números */
.token.number,
.hljs-number,
.scad-number { color: var(--scad-number); }

/* Strings */
.token.string,
.hljs-string,
.scad-string { color: var(--scad-string); font-style: italic; }

/* Comentarios */
.token.comment,
.hljs-comment,
.scad-comment {
  color: var(--scad-comment);
  font-style: italic;
}

/* Operadores */
.token.operator,
.hljs-operator,
.scad-operator { color: var(--scad-operator); }

/* Puntuación / delimitadores */
.token.punctuation,
.scad-punctuation { color: var(--scad-punctuation); }

/* Variables / parámetros */
.token.parameter,
.scad-parameter { color: var(--scad-parameter); }

/* Constantes (true, false, undef) */
.token.boolean,
.token.constant,
.hljs-literal,
.scad-constant { color: var(--scad-number); font-weight: 600; }

/* ---------- Botón "Copiar" ---------- */
pre:has(code.has-line-data) {
  /* Necesario para posicionar el botón */
  position: relative;
}

/* Si añades un <button class="scad-copy"> dentro del <pre>: */
.scad-copy {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  background: transparent;
  border: 1px solid var(--scad-border);
  border-radius: 5px;
  color: var(--scad-comment);
  font-family: var(--scad-font);
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  z-index: 10;
}

.scad-copy:hover {
  color: var(--scad-accent);
  border-color: var(--scad-accent);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  pre code.has-line-data,
  pre code[class*="language-openscad"] {
    font-size: 0.78rem;
    padding: 1rem 0.75rem;
  }
}