/* Definición de variables en :root */
:root {
    --background: #000000;
    --font-family: monospace, monospace;
    --size: 1;
    --color: #ffffff;
    --link-color: #ffffff;
    --link-decoration: none;
    --animation: terminal-blink;
}

/* Estilos globales para el HTML */
html {
    overflow: hidden;
    background-color: var(--background);
    font-family: var(--font-family);
    font-size: calc(var(--size) * 12px);
    color: var(--color);
}

/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: #000000;
}

/* Loader y barra, usando variable de tamaño */
.loader, .bar {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: pre;
    color: #00b5e2;
    animation: fade-in;
}

/* Terminal */
.terminal {
    max-width: 120ch;
    white-space: pre-wrap;
    color: var(--color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal;
    scrollbar-width: none;
}

/* Estilo para la barra de desplazamiento vertical */
.terminal-scroller::-webkit-scrollbar {
    width: 8px; /* Ajusta el tamaño de la barra de desplazamiento */
    background: transparent; /* Fondo transparente */
}

/* Estilo para el "thumb" (parte que se mueve) */
.terminal-scroller::-webkit-scrollbar-thumb {
    background: transparent; /* Color transparente para el "thumb" */
    border-radius: 10px; /* Borde redondeado */
}

/* Prevenir cambios de color al pasar el ratón por encima */
.terminal-scroller::-webkit-scrollbar-thumb:hover {
    background: transparent !important; /* No cambia de color al pasar el ratón */
}

/* Prevenir que se aplique el cambio de color al hacer clic */
.terminal-scroller::-webkit-scrollbar-thumb:active {
    background: transparent !important; /* Mantener el color transparente al hacer clic */
}

/* Estilo para la barra de desplazamiento horizontal (si se usa) */
.terminal-scroller::-webkit-scrollbar:horizontal {
    height: 8px; /* Ajusta el tamaño de la barra horizontal */
    background: transparent; /* Fondo transparente */
}

/* Firefox */
.terminal-scroller {
    scrollbar-color: transparent transparent; /* Color transparente para la barra (track y thumb) */
    scrollbar-width: thin;  /* Firefox: ancho de la barra */
}

.terminal img {
    max-width: 100%;
}

/* Comandos y prompt */
.cmd, .cmd-prompt {
    color: var(--color);
}

.cmd:not(:focus-within) .cmd-cursor {
    outline: 1px solid var(--color);
}

/* Elementos clickeables: comando, directorio, archivo */
.command, .directory, .file {
    cursor: pointer;
}

.command:hover, .directory:hover, .file:hover {
    background-color: #ffffff;
    color: black;
}

/* Enlaces */
a {
    color: var(--link-color);
    text-decoration: var(--link-decoration);
}

a:hover {
    background-color: #ffffff;
    color: #000000;
}