/* Importar Samsung Sans */
@font-face {
    font-family: 'Samsung Sans';
    src: url('https://fonts.cdnfonts.com/s/17674/SamsungSans-Regular.woff') format('woff'),
         url('https://fonts.cdnfonts.com/s/17674/SamsungSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* Centrar y alinear los botones del sub-header en una sola fila */
.sub-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
    background-color: rgba(1, 5, 36, 0.5);
}

.sub-header a {
    display: flex;
    align-items: center;
}

.sub-header a:not(:last-child) {
    border-right: 1px solid #888;
    margin-right: 0.7em;
    padding-right: 0.7em;
}

.sub-header button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.6em;
    padding: 0.3em 0.7em;
    border-radius: 0;
    margin: 0;
    gap: 0;
    box-shadow: none;
    transition: color 0.2s;
}

.sub-header button:hover {
    color: #8cf;
}

.sub-header button, .sub-header a {
    text-decoration: none !important;
}

/* Modo todo negro */
.all-black-mode {
    --color-header-bg: #000;
    --color-header-text: #fff;
    --color-body-bg: #000;
    --color-body-text: #fff;
    /* Más variables si es necesario */
}

/* Modo todo rosa */
.all-pink-mode {
    --color-header-bg: #ff69b4;
    --color-header-text: #fff;
    --color-body-bg: #ff69b4;
    --color-body-text: #fff;
    /* Más variables si es necesario */
}
/* Variables de color para modo por defecto */
:root {
    --color-header-bg: rgba(1, 5, 36, 0.5);
    --color-header-text: #fff;
    --color-body-bg: #060E45;
    --color-body-text: #fff;
    /* Agrega aquí más variables según tu diseño actual */
}

/* Variables para modo alternativo (todo blanco) */
.all-white-mode {
    --color-header-bg: #fff;
    --color-header-text: #000;
    --color-body-bg: #fff;
    --color-body-text: #000;
    /* Más variables si es necesario */
}

body {
    background: var(--color-body-bg);
    color: var(--color-body-text);
}

header {
    display: flex;
    font-size: 2em;
    color: white;
    flex-direction: column;
    background: none;
    margin: 0;
    padding: 0;
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #060E45;
    color: white;
}


html {
    background-color: #060E45;
    background-size: cover;
    height: 100%;
    color: white;
}

.sup-header {
    display: flex;
    justify-content: space-between; /* El logo y el login */
    padding: 0.5em; /* Separación entre sup-header y los bordes */
    align-items: center; /* Centra verticalmente los elementos */
    padding-right: 3em;  /* Separación entre el botón de login y el borde */
    padding-left: 3em;   /* Separación entre el logo y el borde */
    background-color: #060E45;
    margin: 0;
}

.sup-left {
    display: flex;
    align-items: center;
    gap: 1em; /* Espacio entre logo y buscador */
}

.logo img {
    width: 200px; /* Ajusta el tamaño según lo que necesites */
    height: auto;
}

.navegacion {
    display: flex;
    gap: 0;
}

.navegacion a {
    margin: 0;
}

.navegacion button {
    font-family: 'Samsung Sans', Arial, sans-serif;
    font-size: 0.7em;
    border-radius: 10px;
    color: white;
    background: transparent;
    border: none;
    padding: 0.2em 0.6em;
    margin: 0;
}

.navegacion button:hover{
    background-color: rgba(9, 23, 110);
    transition: background-color 0.3s ease;
}

.low-header {
    background-color: #0a1523;
    display: flex;
    justify-content: center;   /* Centra los elementos hijos */
    gap: 0.5em; /* Espacio entre los elementos hijos */
    padding: 0.2em;
}

.login {
    display: flex;
    align-items: center;
    gap: 1em;
}

.login img {
    width: 50px;
}

/* Botón color-mode */
.color-mode-btn img {
    width: 50px !important;
    height: 50px !important;
}

.login-boton {
    display: inline-flex;
    align-items: center;
    background-color: #5865F2;
    color: #fff;
    font-size: 1.0em;
    padding: 0.3em;
    border-radius: 20px;
}

.discord-login-btn {
    display: inline-flex;
    align-items: center;
    background-color: #5865F2;
    color: #fff;
    padding: 0.7em 1.2em;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 500;
    transition: background 0.2s;
    margin-top: 1.5em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.discord-login-btn:hover {
    background-color: #4752c4;
}