:root {
    --link-color: #0a1fc8;             /* Uso: color de los enlaces normales */
    --link-hover-color: #000e66;       /* Uso: color al pasar el cursor sobre un enlace */

    --code-background: #f4f4f4;        /* Uso: fondo de los bloques de código */
    --code-text: #0b1017;              /* Uso: texto dentro del código */

    --admonition-background: #eef2f6;  /* Uso: fondo general de bloques tipo nota, advertencia, etc. */
    --admonition-border: #001e36;      /* Uso: borde izquierdo común de los bloques informativos */

    --table-border-color: rgb(0, 0, 0); /* Uso: bordes de tablas (líneas entre celdas) */
}

/* Enlaces */
article a {
    color: var(--link-color);          /* Uso: color base del enlace */
}

article a:hover {
    color: var(--link-hover-color);    /* Uso: color del enlace al pasar el cursor */
    text-decoration: underline;
}

/* Código */
code, pre {
    background-color: var(--code-background);  /* Uso: fondo del bloque o línea de código */
    color: var(--code-text);                   /* Uso: texto de código */
}

pre {
    overflow-x: auto;
    padding: 1em;
}

/* Tablas */
article th, article td {
    border: 1px solid var(--table-border-color);  /* Uso: color de borde de las celdas */
}

/* Admoniciones generales */
.admonition {
    background-color: var(--admonition-background); /* Uso: fondo común para admoniciones */
    border-left: 4px solid var(--admonition-border); /* Uso: borde izquierdo general */
}

/* Tipos de admoniciones */
.admonition.note {
    border-left-color: rgba(0, 30, 54, 0.46);       /* Uso: borde para notas */
    background-color: #eef2f6;        /* Uso: fondo para notas (igual que general) */
}

.admonition.warning {
    border-left-color: rgba(102, 0, 12, 0.78); /* Uso: borde para advertencias (color rojizo) */
    background-color: #817137;                /* Uso: fondo para advertencias (amarillo dorado) */
}

.admonition.tip {
    border-left-color: #092e22;       /* Uso: borde para consejos (verde oscuro) */
    background-color: #e6f4f1;        /* Uso: fondo para consejos */
}

.admonition.important {
    border-left-color: #5f0066;       /* Uso: borde para info importante (morado oscuro) */
    background-color: #0b1017;        /* Uso: fondo para info importante (azul muy oscuro) */
}

/* Tarjetas */
.card {
    background: white;                                /* Uso: fondo de la tarjeta */
    box-shadow: 0 4px 8px rgba(11, 16, 23, 0.42);             /* Uso: sombra suave debajo */
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.9);               /* Uso: sombra más fuerte al pasar el cursor */
}

.card span {
    color: #040609;                                       /* Uso: color del texto dentro de la tarjeta */
}

/* Acordeón */
.accordion details {
    border: 2px solid rgba(11, 16, 23, 0.62); /* Uso: borde del contenedor de detalle */
}

.accordion summary {
    color: #050505;                          /* Uso: color del texto resumen (blanco) */
}

.accordion li a {
    color: #05070b;                          /* Uso: color del enlace dentro de lista */
}

.accordion li a:hover {
    color: rgba(0, 0, 0, 0.45);                             /* Uso: color del enlace al pasar el cursor (negro) */
}