/************************************************************
 * VARIABLES GLOBALES DE TEMA
 ************************************************************/
:root {
    /* Variables del tema claro — primary/accent alineados con global.css (cyan brand) */
    --color-primary: #0891b2;
    --color-secondary: #0f172a;
    --color-accent: #22d3ee;
    --color-bg: #ffffff;
    --color-bg-alt: #f8fafc;
    --color-text: #1e293b;
    --color-text-light: #64748b;

    /* Espaciado */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Bordes */
    --border-radius: 0.5rem;
}

/* Tema oscuro */
[data-theme="dark"] {
    --color-primary: #22d3ee;
    --color-secondary: #f8fafc;
    --color-accent: #06b6d4;
    --color-bg: #0f172a;
    --color-bg-alt: #1e293b;
    --color-text: #f8fafc;
    --color-text-light: #94a3b8;
}

/************************************************************
 * TEMA ARDUINO
 ************************************************************/
/* --- Modo claro (por defecto) --- */
.language-arduino {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-bg-alt);
}

/* Comentarios */
.language-arduino .token.comment,
.language-arduino .token.prolog,
.language-arduino .token.doctype,
.language-arduino .token.cdata {
    color: #008000;
    /* Verde para comentarios */
    font-style: italic;
}

/* Palabras clave (#define, void, int, etc.) */
.language-arduino .token.keyword {
    color: #cc6600;
    /* Naranja Arduino */
}

/* Strings */
.language-arduino .token.string {
    color: #7f7f00;
    /* Marrón/amarillo para cadenas */
}

/* Números, booleanos y constantes */
.language-arduino .token.number,
.language-arduino .token.boolean,
.language-arduino .token.constant {
    color: #00979c;
    /* Azul verdoso */
}

/* Funciones y métodos */
.language-arduino .token.function {
    color: #0000ff;
    /* Azul para funciones */
}

/* Operadores (+, -, =, etc.) */
.language-arduino .token.operator,
.language-arduino .token.punctuation {
    color: var(--color-text);
}

/* Clases y tipos (opcional) */
.language-arduino .token.class-name {
    color: #7d4795;
}

/* --- Modo oscuro --- */
[data-theme="dark"] .language-arduino {
    background: var(--color-bg);
    color: var(--color-text);
}

/* Comentarios */
[data-theme="dark"] .language-arduino .token.comment,
[data-theme="dark"] .language-arduino .token.prolog,
[data-theme="dark"] .language-arduino .token.doctype,
[data-theme="dark"] .language-arduino .token.cdata {
    color: #57a64a;
    font-style: italic;
}

/* Palabras clave */
[data-theme="dark"] .language-arduino .token.keyword {
    color: #ffa657;
    /* Naranja brillante */
}

/* Strings */
[data-theme="dark"] .language-arduino .token.string {
    color: #f3e779;
    /* Amarillo suave */
}

/* Números, booleanos y constantes */
[data-theme="dark"] .language-arduino .token.number,
[data-theme="dark"] .language-arduino .token.boolean,
[data-theme="dark"] .language-arduino .token.constant {
    color: #4cbf99;
    /* Verde azulado */
}

/* Funciones y métodos */
[data-theme="dark"] .language-arduino .token.function {
    color: #87cefa;
    /* Azul claro */
}

/* Operadores y puntuación */
[data-theme="dark"] .language-arduino .token.operator,
[data-theme="dark"] .language-arduino .token.punctuation {
    color: var(--color-text);
}

/* Clases y tipos (opcional) */
[data-theme="dark"] .language-arduino .token.class-name {
    color: #b3b3ff;
}

/************************************************************
 * TEMA PYTHON
 ************************************************************/
/* --- Modo claro (por defecto) --- */
.language-python {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;


}

pre {
    border: 1px solid #d0d0d0;
    padding: 32px;
    border-radius: var(--border-radius);
    overflow-x: auto;
}


/* Comentarios (#, docstrings, etc.) */
.language-python .token.comment,
.language-python .token.prolog,
.language-python .token.doctype,
.language-python .token.cdata {
    color: #6a9955;
    /* Verde suave */
    font-style: italic;
}

/* Palabras clave (def, class, if, else, etc.) */
.language-python .token.keyword {
    color: #3776ab;
    /* Azul Python */
}

/* Strings */
.language-python .token.string {
    color: #c4a000;
    /* Amarillo/mostaza */
}

/* Números, booleanos, constantes */
.language-python .token.number,
.language-python .token.boolean,
.language-python .token.constant {
    color: #0077aa;
    /* Azul marino */
}

/* Funciones y métodos */
.language-python .token.function {
    color: #2f5496;
    /* Azul más oscuro */
}

/* Operadores y puntuación */
.language-python .token.operator,
.language-python .token.punctuation {
    color: var(--color-text);
}

/* Builtins (print, range, etc.) */
.language-python .token.builtin {
    color: #e37933;
    /* Naranja */
}

/* Clases y nombres de tipo */
.language-python .token.class-name {
    color: #c678dd;
    /* Lila */
}

/* --- Modo oscuro --- */
[data-theme="dark"] .language-python {
    background: var(--color-bg);
    color: var(--color-text);
}

/* Comentarios */
[data-theme="dark"] .language-python .token.comment,
[data-theme="dark"] .language-python .token.prolog,
[data-theme="dark"] .language-python .token.doctype,
[data-theme="dark"] .language-python .token.cdata {
    color: #6a9955;
    font-style: italic;
}

/* Palabras clave */
[data-theme="dark"] .language-python .token.keyword {
    color: #569cd6;
    /* Azul claro */
}

/* Strings */
[data-theme="dark"] .language-python .token.string {
    color: #d7ba7d;
    /* Marrón/amarillo */
}

/* Números, booleanos, constantes */
[data-theme="dark"] .language-python .token.number,
[data-theme="dark"] .language-python .token.boolean,
[data-theme="dark"] .language-python .token.constant {
    color: #b5cea8;
    /* Verde grisáceo */
}

/* Funciones y métodos */
[data-theme="dark"] .language-python .token.function {
    color: #dcdcaa;
    /* Amarillo claro */
}

/* Operadores y puntuación */
[data-theme="dark"] .language-python .token.operator,
[data-theme="dark"] .language-python .token.punctuation {
    color: var(--color-text);
}

/* Builtins */
[data-theme="dark"] .language-python .token.builtin {
    color: #4ec9b0;
    /* Verde azulado */
}

/* Clases y tipos */
[data-theme="dark"] .language-python .token.class-name {
    color: #c586c0;
    /* Lila suave */
}