/* =========================
   1. FUENTES Y COLORES
========================= */

/* Carga una fuente personalizada desde un archivo local */
@font-face {
    font-family: "ggSans";
    src: url("resources/gg sans Medium.ttf");
    font-weight: normal;                           /* esta versión del archivo es para texto normal */
}

@font-face {
    font-family: "ggSans";
    src: url("resources/gg sans Bold.ttf");
    font-weight: bold; /* esta versión del archivo es para texto normal */
}

/* Variables globales de color; se usan escribiendo var(--nombre) en cualquier parte del CSS */
:root {
    --color-fondo: #121214;                     /* rojo brillante, usado en botones y acentos */
    --color-bordes: #222225;
    --color-chat: #1a1a1e;               /* rojo más oscuro, usado al hacer hover sobre botones */
}

/* =========================
   2. RESET / BASE
========================= */

/* Aplica box-sizing a todos los elementos incluyendo sus pseudo-elementos */
/* border-box hace que padding y border se incluyan dentro del ancho/alto del elemento, no se sumen encima */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Hace que html y body ocupen toda la altura de la ventana, y elimina el margen por defecto del navegador */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* =========================
   3. ESTILOS GLOBALES
========================= */

body {
    font-family: "ggSans", sans-serif;           /* fuente principal; sans-serif es el fallback si NotoSans no carga */
    position: relative;                            /* necesario para que ::before y ::after se posicionen relativo al body */
    color: white;
    display: flex;
    flex-direction: column;
    height: 100vh; /* 👈 importante */
}

/* Altura de línea para mejorar la legibilidad */
p, li {
    line-height: 1.6;                              /* 1.6 significa 160% del tamaño de la fuente */
}

/* Estilos base para todos los enlaces del sitio */
a {
    text-decoration: none;                         /* elimina el subrayado por defecto */
}

    /* Color de los enlaces no visitados */
    a:link {
        color: white;
    }

    /* Color de los enlaces ya visitados */
    a:visited {
        color: white;                               /* gris claro para diferenciarlos de los no visitados */
    }

ul {
    padding-left: 20px;                            /* sangría de la lista */
}

/* =========================
   4. LAYOUT (estructura)
========================= */

/* Contenedor que pone el aside y el main uno al lado del otro */
.caja_principal {
    display: flex; /* activa flexbox */
    flex: 1;          /* 👈 ocupa todo el espacio disponible */
    overflow: hidden; /* 👈 evita que crezca */
}

/* =========================
   5. COMPONENTES
========================= */

header {
    background: var(--color-fondo);
    color: white;
    padding: 15px;
    font-size: 16px;                               /* tamaño base que afecta a los elementos dentro del header */
}

    header h1 {
        margin-top: 0;
        margin-bottom: 25px;                       /* separa el título de los botones de navegación */
    }

main {
    background: #1a1a1e;
    padding: 30px;
    /* flex: 3;*/                                       /* ocupa 3 partes del espacio disponible (el aside ocupa 1) */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);         /* sombra hacia adentro para dar profundidad */
    flex: 1;
    overflow-y: auto; /* 👈 aquí vive el scroll */
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Barra lateral con los enlaces de navegación */
.caja_servidores {
    display: flex;
    flex-direction: column; /* apila los elementos verticalmente */
    background: var(--color-fondo);
    width: 70px;
    color: #ffffff;
    border-right: solid;
    border-color: var(--color-bordes);
    border-right-width: 1px;
}

.botones_servidores a {
    display: inline-block;
    height: 40px;
}

    .botones_servidores a.active {
        border-left: solid 5px;
    }

.caja_canales {
    display: flex;
    flex-direction: column; /* apila los elementos verticalmente */
    height: 100%;
    width: 300px;
    background: var(--color-fondo);
    color: #ffffff;
    padding: 10px 20px;
}

    .caja_canales a {
        display: block;
        font-size: 16px;
        font-weight: bold;
        line-height: 30px;
        padding: 4px 0px;
        margin: -5px 0px;
    }
    
    .caja_canales h4{
        font-size: 12px;
        margin: 0px -10px;
        padding-top: 0px;
        padding-left: 30px;
      }
      
h2[id] {
    scroll-margin-top: 70px; 
}      

.botones_canales a.active {
    background: #2c2c30;
    border-radius: 8px;
}

.titulo {
    position: -webkit-sticky;
    position: sticky;
    top: -30px; /* 👈 TRUCO: Como el main tiene padding 30px, subimos el sticky otros 30px */
    z-index: 100;
    
    background-color: #2c2c30; 
    border-bottom: 2px solid var(--color-bordes);
    
    /* Anulamos los 30px de padding laterales y superior del main */
    margin: -30px -30px 20px -30px; 
    
    /* Le devolvemos el espacio interno para que el texto no toque los bordes */
    padding: 15px 30px; 
    
    /* Esto asegura que ocupe todo el ancho sin salirse */
    width: calc(100% + 60px);
}

.titulo h1 {
    margin: 0; /* Quitamos márgenes del h1 para que no empujen la caja */
    font-size: 20px;
}


/* display: contents hace que el Web Component "desaparezca" del layout */
/* sus hijos pasan a ser hijos directos del flex container, comportándose como si el tag no existiera */
server-box {
    display: contents;
}

footer {
    background: var(--color-fondo);
    text-align: center;
    padding: 5px;
    border-top: solid;

    border-top-width: 1px;
}

    footer p {
        margin: 0;                                 /* el padding del footer ya da el espacio necesario */
    }

/* =========================
   6. IMAGENES
========================= */

.server_pic{
    object-fit: cover;
    height: 40px;
    width: 40px;
    border-radius: 20%;
    margin-left: 13px;
    margin-bottom: 10px;
    
}