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

/* Carga una fuente personalizada desde un archivo local */
@font-face {
    font-family: "Balatro";                        /* nombre con el que se usará en el CSS */
    src: url("resources/fonts/m6x11plus.ttf");     /* ruta al archivo de la fuente */
}

@font-face {
    font-family: "NotoSans";
    src: url("resources/fonts/NotoSans-Regular.ttf");
    font-weight: normal;                           /* esta versión del archivo es para texto normal */
}

@font-face {
    font-family: "NotoSans";
    src: url("resources/fonts/NotoSans-Bold.ttf");
    font-weight: bold;                             /* esta versión del archivo es para texto en negritas */
}

/* Variables globales de color; se usan escribiendo var(--nombre) en cualquier parte del CSS */
:root {
    --color-primario: #e81123;                     /* rojo brillante, usado en botones y acentos */
    --color-primario-hover: #9e2722;               /* rojo más oscuro, usado al hacer hover sobre botones */
    --color-header: #1e2c2f;                       /* gris oscuro, fondo del header */
    --color-aside: #374e50;                        /* gris verdoso, fondo del aside */
}

/* =========================
   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;
}

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

body {
    font-family: "NotoSans", 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 */
}

    /* Pseudo-elemento que crea la imagen de fondo con filtro */
    /* Se usa ::before en lugar de poner el fondo directamente en body para poder aplicarle filter sin afectar al contenido */
    body::before {
        content: "";                               /* obligatorio para que el pseudo-elemento exista */
        position: fixed;                           /* se queda fijo aunque el usuario haga scroll */
        inset: 0;                                  /* shorthand de top/right/bottom/left: 0; cubre toda la pantalla */
        background-image: url("resources/images/balatro_low.png");
        background-size: cover;                    /* escala la imagen para cubrir toda el área sin deformarla */
        background-repeat: no-repeat;              /* evita que la imagen se repita en mosaico */
        background-position: center;               /* centra la imagen */
        filter: contrast(1.1) brightness(1.1);     /* aumenta ligeramente el contraste y brillo */
        z-index: -1;                               /* lo pone detrás de todo el contenido */
    }

    /* Pseudo-elemento que crea el efecto de líneas de escáner estilo monitor CRT */
    body::after {
        content: "";                               /* obligatorio para que el pseudo-elemento exista */
        position: fixed;                           /* se queda fijo aunque el usuario haga scroll */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;                              /* cubre toda la pantalla */
        pointer-events: none;                      /* hace que el mouse "atraviese" este elemento para no bloquear clics */
        z-index: 9999;                             /* se pone por encima de absolutamente todo */
        /* crea líneas horizontales semitransparentes que simulan las líneas de un monitor CRT */
        background: repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.15) 0px,                  /* línea oscura de 1px */
            rgba(0,0,0,0.15) 1px,
            transparent 1px,                       /* espacio transparente de 2px */
            transparent 3px
        );
        animation: scanlines 50s linear infinite;  /* aplica la animación definida en la sección 6 */
    }

/* Fuente pixel art para todos los títulos */
h1, h2, h3 {
    font-family: "Balatro", serif;
    margin-top: 0;                                 /* elimina el margen superior por defecto del navegador */
    margin-bottom: 0;                              /* elimina el margen inferior por defecto del navegador */
}

/* Espacio alrededor de los h3 dentro de main para separarlos del contenido */
main h3 {
    margin-top: 20px;
    margin-bottom: 15px;
}

/* 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 */
    padding: 6px 10px;                             /* 6px arriba/abajo, 10px izquierda/derecha */
    border-radius: 5px;                            /* esquinas redondeadas */
    transition: background-color 0.3s ease, transform 0.3s ease; /* animación suave al cambiar color o posición */
}

    /* 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 */
    }

/* Sobreescribe el color de los enlaces dentro de main para que sean legibles sobre fondo blanco */
main a:link {
    color: black;
    text-decoration: underline;                    /* restaura el subrayado para que sean reconocibles */
}
main a:visited {
    color: black;
    text-decoration: underline;
}

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

li {
    margin-bottom: 8px;                            /* espacio entre cada elemento de la lista */
}

    /* Los enlaces dentro de listas no deben tener el padding de los botones */
    li a {
        padding: 0;
    }

    /* Cambia el color del bullet de las listas al rojo del sitio */
    li::marker {
        color: #e81123;
    }


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

/* Contenedor principal que agrupa toda la página */
.caja_externa {
    margin: 40px auto;                             /* auto en izquierda/derecha centra el elemento horizontalmente */
    border-radius: 20px;                           /* esquinas redondeadas */
    overflow: hidden;                              /* recorta el contenido que sobresalga de las esquinas redondeadas */
    box-shadow: 0 0 30px rgba(0,0,0,0.6);          /* sombra difusa alrededor de la caja */
    max-width: 85%;                                /* nunca ocupa más del 85% del ancho de la pantalla */
}

/* Contenedor que pone el aside y el main uno al lado del otro */
.caja_principal {
    display: flex;                                 /* activa flexbox */
    gap: 5px;                                      /* espacio entre el aside y el main */
}

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

header {
    background: var(--color-header);
    color: white;
    padding: 15px;
    font-size: 30px;                               /* 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 */
    }

/* El enlace dentro del h1 (el título que lleva al home) */
h1 a {
    padding: 0;                                    /* elimina el padding que hereda de la regla general "a" */
    background: none;                              /* elimina el fondo que podría heredar de nav a */
    color: white;
    font-family: "Balatro", serif;                 /* mantiene la fuente pixel art aunque sea un enlace */
    line-height: 1;                                /* evita que el line-height de "a" agregue espacio extra */
}

    h1 a:visited {
        color: white;                              /* el título siempre blanco, nunca gris de visitado */
    }

nav {
    display: flex;
    justify-content: space-between;               /* empuja el primer grupo al extremo izquierdo y el último al derecho */
}

    nav a {
        background: var(--color-primario);
        padding: 8px 20px;
        border: none;
        border-radius: 8px;
        cursor: pointer;                           /* muestra el cursor de mano */
        font-size: 16px;
        transition: background-color 0.3s ease;
        transform: translateY(0);                  /* posición inicial para la animación de hover */
        line-height: 3;                            /* aumenta la altura del botón */
    }

        nav a:hover {
            background: var(--color-primario-hover);
            transform: translateY(-2px);           /* sube el botón 2px dando sensación de presión */
        }

/* Contenedor de los grupos de botones dentro del nav */
.botones_nav {
    display: flex;
    flex-direction: row;
    gap: 12px;                                     /* espacio entre cada botón */
    align-items: center;                           /* centra los botones verticalmente */
}

/* Estilo específico para los botones de íconos (Instagram, YouTube) */
.botones_nav a {
    line-height: 1;                                /* reduce la altura para que no sea tan grande como los botones de texto */
    padding: 10px;                                 /* padding uniforme en todos los lados */
}

.botones_nav a i {
    font-size: 18px;                               /* tamaño de los íconos de Bootstrap */
}

main {
    background: #ffffff;
    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 */
}

/* Barra lateral con los enlaces de navegación */
.caja_enlaces {
    display: flex;
    flex-direction: column;                        /* apila los elementos verticalmente */
    gap: 8px;
    flex: 1;                                       /* ocupa 1 parte del espacio disponible */
    background: var(--color-aside);
    color: #ffffff;
    padding: 10px;
    max-width: 200px;                              /* nunca más ancho que 200px */
}

.caja_enlaces h2 {
    margin-top: 10px;
}

/* Títulos de los menús desplegables en el aside */
details summary {
    cursor: pointer;
    list-style: none;                              /* quita el triángulo por defecto del navegador */
    padding: 4px 0;
    color: white;
    font-weight: bold;
}

    details summary:hover {
        color: var(--color-primario);
    }

/* Sobreescribe el summary cuando está dentro de main (fondo blanco) */
main details summary {
    cursor: pointer;
    list-style: none;
    padding: 4px 0;
    color: black;                                  /* negro para ser legible sobre fondo blanco */
    font-weight: bold;
}

details ul {
    margin: 4px 0 4px 10px;                        /* sangría para que se vea como submenú */
    padding: 0;
}

/* 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 */
mi-aside {
    display: contents;
}

footer {
    background: #eee;
    text-align: center;
    padding: 5px;
}

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

/* =========================
   6. EFECTOS (CRT)
========================= */

/* Mueve las líneas del efecto CRT hacia abajo lentamente para simular el refresco de un monitor antiguo */
@keyframes scanlines {
    from {
        background-position: 0 0;                  /* posición inicial */
    }

    to {
        background-position: 0 100px;              /* se movió 100px hacia abajo al terminar la animación */
    }
}

/* =========================
   7. RESPONSIVO
   Estos estilos solo se aplican cuando la pantalla tiene 768px de ancho o menos (móvil y tablet)
   Para probar: F12 en el navegador → ícono de dispositivo móvil
========================= */

@media (max-width: 768px) {

    /* La caja principal ocupa casi toda la pantalla y tiene menos margen */
    .caja_externa {
        margin: 10px auto;                         /* menos margen arriba/abajo en pantallas pequeñas */
        max-width: 98%;                            /* ocupa casi todo el ancho disponible */
        border-radius: 10px;                       /* esquinas menos redondeadas para ganar espacio */
    }

    /* El aside y el main pasan de estar en columnas a estar apilados verticalmente */
    .caja_principal {
        flex-direction: column;                    /* cambia la dirección de fila (row) a columna (column) */
    }

    /* El aside ocupa todo el ancho en lugar de estar limitado a 200px */
    .caja_enlaces {
        max-width: 100%;                           /* elimina el límite de 200px */
        flex: none;                                /* anula el flex: 1 para que no compita con el main */
    }

    /* El header reduce su tamaño de fuente base */
    header {
        font-size: 20px;                           /* más pequeño que los 30px del escritorio */
        padding: 10px;                             /* menos padding para ganar espacio */
    }

    /* El título h1 tiene menos margen inferior en móvil */
    header h1 {
        margin-bottom: 15px;
    }

    /* Los botones de nav tienen menos padding para que quepan en pantalla pequeña */
    nav a {
        padding: 6px 10px;                         /* reduce el padding horizontal de 20px a 10px */
        font-size: 14px;                           /* fuente más pequeña */
    }

    /* El main tiene menos padding interno en móvil */
    main {
        padding: 15px;                             /* reduce el padding de 30px a 15px */
    }

}