/* === VARIABLES DE COLOR === */

/* :root define variables globales que se reusan en todo el CSS.
   Esto permite cambiar todos los colores del sitio desde un solo lugar */
:root {
    --color-bg: #ffffff;
    --color-text: #1a1a1a;
    --color-text-secondary: #666666;
    --color-border: #e0e0e0;
    --color-link: #1a1a1a;
}

/* Cuando el body tiene la clase "dark", se sobreescriben las variables */
body.dark {
    --color-bg: #1a1a1a;
    --color-text: #e0e0e0;
    --color-text-secondary: #999999;
    --color-border: #333333;
    --color-link: #e0e0e0;
}

/* === ESTILOS GENERALES === */

/* body = todo el contenido visible de la pagina */
body {
    background-color: var(--color-bg);
    font-family: "Courier New", monospace;
    color: var(--color-text);
    max-width: 700px;                /* ancho maximo del contenido */
    margin: 0 auto;                  /* centrar el contenido horizontalmente */
    padding: 40px 20px;              /* espacio interno: arriba/abajo 40px, lados 20px */
    line-height: 1.6;                /* espacio entre lineas (legibilidad) */
}

/* === NAVEGACION === */

nav {
    margin-bottom: 40px;             /* espacio entre nav y contenido */
}

nav a {
    margin-right: 16px;              /* espacio entre cada link */
    text-decoration: none;           /* sin subrayado para que se vea mas limpio */
}

nav a:hover {
    text-decoration: underline;      /* subrayado al pasar el mouse (feedback visual) */
}

/* === TITULOS === */

h1 {
    font-size: 1.8rem;              /* rem = relativo al tamano base del navegador */
    margin-bottom: 8px;
}

h2 {
    font-size: 1.3rem;
    margin-top: 40px;               /* espacio arriba de cada seccion */
}

/* === PARRAFOS === */

p {
    margin-bottom: 16px;
    text-align: justify;
}

/* === LINKS === */

a {
    color: var(--color-link);
    text-decoration: underline;      /* subrayado para que se note que es link */
}

/* === ARTICULOS (blog y portafolio) === */

article {
    margin-bottom: 40px;             /* espacio entre articulos */
    padding-bottom: 24px;            /* espacio interno abajo */
    border-bottom: 1px solid var(--color-border);
}

time {
    font-size: 0.85rem;              /* texto mas chico para la fecha */
    color: var(--color-text-secondary);
    display: block;                  /* que ocupe su propia linea */
    margin-bottom: 12px;
}

/* === LISTAS === */

ul {
    padding-left: 20px;             /* indentacion de la lista */
}

li {
    margin-bottom: 8px;
}

/* === BLOG: LAYOUT DOS COLUMNAS === */

/* El blog necesita mas ancho para acomodar posts + sidebar */
.blog-page {
    max-width: 960px;
}

.blog-layout {
    display: flex;                       /* dos columnas lado a lado */
    gap: 40px;                           /* espacio entre columnas */
    max-width: 900px;                    /* mas ancho que el body normal */
}

/* Columna izquierda: los posts con extracto */
.blog-posts {
    flex: 1;                             /* ocupa todo el espacio disponible */
}

/* Columna derecha: navegador de posts */
.blog-sidebar {
    width: 200px;                        /* ancho fijo para la sidebar */
    flex-shrink: 0;                      /* que no se achique */
}

.blog-sidebar h3 {
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 16px;
}

.blog-sidebar ul {
    list-style: none;                    /* sin bolitas */
    padding-left: 0;
}

.blog-sidebar li {
    margin-bottom: 12px;
}

.blog-sidebar a {
    font-size: 0.85rem;
    text-decoration: none;
}

.blog-sidebar a:hover {
    text-decoration: underline;
}

/* === BOTON DARK MODE === */

.theme-toggle {
    position: fixed;
    bottom: 50px;
    right: 50px;
    line-height: 1;                      /* evita que distintos iconos queden a alturas diferentes */
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.6rem;
    padding: 0;
    cursor: pointer;
}

.theme-toggle:hover {
    opacity: 0.7;
}

/* === TABLAS === */

.table-wrapper {
    overflow-x: auto;                    /* scroll horizontal en pantallas chicas */
}

table {
    width: 100%;
    border-collapse: collapse;           /* bordes compartidos entre celdas */
    margin-bottom: 16px;
}

th, td {
    border: 1px solid var(--color-border);
    padding: 8px 12px;
    text-align: left;
}

th {
    background-color: var(--color-border);
    font-weight: bold;
}

/* === PORTAFOLIO: TARJETAS DE REPOS === */

@keyframes parpadeo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.estado-carga {
    color: var(--color-text-secondary);
    font-style: italic;
    animation: parpadeo 1.5s ease-in-out infinite;
}

.repo-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

/* Tag del lenguaje de programacion */
.repo-lenguaje {
    font-size: 0.8rem;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    color: var(--color-text-secondary);
}

/* === RESPONSIVE: PANTALLAS CHICAS === */

/* Estos estilos solo aplican cuando el ancho de pantalla es menor a 600px (celulares) */
@media (max-width: 600px) {

    body {
        padding: 20px 16px;             /* menos espacio en pantalla chica */
    }

    h1 {
        font-size: 1.4rem;              /* titulo mas chico para que no se corte */
    }

    h2 {
        font-size: 1.1rem;
        margin-top: 28px;
    }

    /* nav pasa de fila a columna para que los links no queden apretados */
    nav {
        display: flex;
        flex-direction: column;          /* los links van uno debajo del otro */
        gap: 8px;                        /* espacio entre cada link */
        margin-bottom: 28px;
    }

    nav a {
        margin-right: 0;                /* ya no necesita margen lateral */
    }

    /* En celular la sidebar baja debajo de los posts */
    .blog-layout {
        flex-direction: column;
    }

    .blog-sidebar {
        width: 100%;                    /* ocupa todo el ancho */
    }
}