:root {
    --text-color: #333333;
    --background-color: #ffffff;
    --primary-color: #0056b3; /* A muted professional blue */
    --accent-color: #e0e0e0; /* Light gray for borders/backgrounds */
    --shadow-color: rgba(0, 0, 0, 0.08); /* Subtle shadow */
    --strong-shadow-color: rgba(0, 0, 0, 0.12); /* Slightly stronger shadow */
    --border-radius: 6px; /* Slightly increased for softer look */
    --heading-color: #2c3e50; /* Darker, sophisticated heading color */
    --light-background: #fdfdfd; /* Very light background for content blocks */
    --secondary-accent: #6cb2eb; /* Complementary blue for highlights */

    /* Specific element backgrounds/colors */
    --block-bg-variant: #f9f9f9;
    --block-border-variant: #e8e8e8;
    --exercise-bg: #eaf6fd;
    --timestamp-color: #777777;
    --proof-qed-color: #888888;
    --link-hover-color: #003d7c;
    --toc-header-bg: #f8f8f8;
    --toc-link-hover-bg: #f0f5f8;
    --toc-link-color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #e0e0e0;
        --background-color: #1e1e1e;
        --primary-color: #87ceeb; /* Lighter blue for links in dark mode */
        --accent-color: #444444; /* Darker gray for borders/backgrounds */
        --shadow-color: rgba(0, 0, 0, 0.25); /* Darker shadows in dark mode */
        --strong-shadow-color: rgba(0, 0, 0, 0.4);
        --heading-color: #ffffff;
        --light-background: #2a2a2a; /* Darker background for content blocks */
        --secondary-accent: #6cb2eb; /* Keep somewhat bright, or another contrasting color */

        /* Specific element backgrounds/colors for dark mode */
        --block-bg-variant: #333333;
        --block-border-variant: #555555;
        --exercise-bg: #213340; /* Dark blueish for exercises */
        --timestamp-color: #aaaaaa;
        --proof-qed-color: #aaaaaa;
        --link-hover-color: #b0e0f5; /* Lighter hover for dark mode links */
        --toc-header-bg: #282828;
        --toc-link-hover-bg: #303e4d;
        --toc-link-color: #bbbbbb;
    }
}

body {
    margin: auto;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1.05rem; /* Base font size */
    line-height: 1.7; /* Increased for better readability */
    color: var(--text-color);
    background-color: var(--background-color);
    max-width: 1000px;
    padding: 20px; /* Add default padding for smaller screens */
    box-sizing: border-box; /* Include padding in width calculation */
}

@media screen and (min-width: 800px) {
    body {
        width: 70%; /* Wider on large screens for better readability */
        padding: 40px 20px; /* More vertical padding */
    }
}

@media screen and (max-width: 800px) {
    body {
        width: 95%; /* More breathing room on smaller screens */
        padding: 15px; /* Adjust padding for mobile */
    }
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    color: var(--heading-color);
    font-weight: 700; /* Bolder headings */
    margin-top: 2em;
    margin-bottom: 0.8em;
    text-rendering: optimizeLegibility; /* Improve font rendering */
}

h1 {
    font-size: 2.2em;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

h2 {
    font-size: 1.8em;
    border-bottom: 1px solid var(--accent-color); /* Subtle separator */
    padding-bottom: 0.3em;
}

h3 {
    font-size: 1.4em;
}

h2, h3 {
    text-align: left;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    padding-bottom: 1px; /* To prevent underline from touching text */
    border-bottom: 1px solid transparent; /* Prepare for subtle underline */
}

a:hover {
    color: var(--link-hover-color); /* Darker blue on hover */
    border-bottom-color: currentColor; /* Underline with link color */
}

#content {
    margin: auto;
    text-align: justify;
    padding-bottom: 3em;
}

@media screen and (max-width: 550px) {
    #content {
        text-align: left;
    }
}

.org-svg {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em auto;
    box-shadow: 0 4px 10px var(--shadow-color); /* Subtle shadow for SVGs */
    border-radius: var(--border-radius);
}

#text-footnotes {
    font-size: 0.85em;
    margin-top: 2.5em;
    padding-top: 1.5em;
    border-top: 1px solid var(--accent-color);
}

.footpara {
    display: inline;
}

.theorem, .lemma, .proposition, .remark, .proof, .definition, .exercise {
    display: block;
    margin: 28px 0; /* More vertical margin */
    padding: 18px 25px; /* Increased padding */
    border: 1px solid var(--accent-color);
    border-radius: var(--border-radius);
    background-color: var(--light-background); /* Consistent light background */
    box-shadow: 0 3px 8px var(--shadow-color); /* Subtle depth */
}

.remark, .proof, .definition {
    font-style: normal;
    background-color: var(--block-bg-variant); /* Slightly different background for normal style */
    border: 1px solid var(--block-border-variant); /* Lighter border */
}

.theorem, .lemma, .proposition {
    font-style: italic;
    border-left: 6px solid var(--primary-color); /* Thicker accent border */
    padding-left: 20px; /* Adjust padding due to border-left */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05); /* Lighter shadow for italic blocks */
}

.exercise {
    font-size: 0.95em; /* Slightly larger relative size */
    background-color: var(--exercise-bg); /* Light blueish background for exercises */
    border-left: 6px solid var(--secondary-accent); /* A complementary blue */
    padding-left: 20px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); /* Distinct shadow */
}

.theorem > p:first-child:before,
.lemma > p:first-child:before,
.proposition > p:first-child:before,
.remark > p:first-child:before,
.definition > p:first-child:before,
.exercise > p:first-child:before {
    font-style: normal;
    font-weight: bold;
    margin-right: 0.6em; /* Space between title and content */
    color: var(--heading-color); /* Darker color for the title */
    display: inline-block; /* Allows vertical alignment/spacing if needed */
}

/* Lang specific content */
.theorem:lang(en) > p:first-child:before { content: "Theorem."; }
.theorem:lang(es) > p:first-child:before { content: "Teorema."; }
.corollary:lang(en) > p:first-child:before { content: "Corollary."; }
.corollary:lang(es) > p:first-child:before { content: "Corolario."; }
.lemma:lang(en) > p:first-child:before { content: "Lemma."; }
.lemma:lang(es) > p:first-child:before { content: "Lema."; }
.proposition:lang(en) > p:first-child:before { content: "Proposition."; }
.proposition:lang(es) > p:first-child:before { content: "Proposición."; }
.proof:lang(en) > p:first-child:before { content: "Proof."; font-style: italic; }
.proof:lang(es) > p:first-child:before { content: "Demostración."; font-style: italic; }
.definition:lang(en) > p:first-child:before { content: "Definition."; }
.definition:lang(es) > p:first-child:before { content: "Definición."; }
.remark:lang(en) > p:first-child:before { content: "Remark."; }
.remark:lang(es) > p:first-child:before { content: "Comentario."; }
.exercise:lang(en) > p:first-child:before { content: "Exercise."; }
.exercise:lang(es) > p:first-child:before { content: "Ejercicio."; }

.proof > p:last-child:after {
    content: "\25A0"; /* Solid black square (more modern than hollow) */
    float: right;
    font-size: 0.85em;
    color: var(--proof-qed-color); /* Muted color for the QED symbol */
    margin-left: 0.6em;
    line-height: 1; /* Ensure symbol aligns well */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em auto;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px var(--shadow-color); /* More pronounced shadow for images */
}

.timestamp {
    color: var(--timestamp-color); /* Softer timestamp color */
    font-size: 0.85em;
    margin-top: 2.5em;
}

.org-ref-bib-h1 {
    display: none;
}

#picme {
    max-width: 25%;
    float: right;
    padding-left: 20px;
    padding-top: -10px;
    border-radius: var(--border-radius);
    --shadow-color: rgba(0, 0, 0, 0.0);
    margin-bottom: 1em; /* Add some space below it */
}

#table-of-contents {
    font-size: 0.9em;
    position: fixed;
    right: 1.5em; /* Further off the edge */
    top: 1.5em; /* Further off the top */
    background: var(--background-color);
    line-height: 1.5; /* Adjusted line-height */
    text-align: right;
    box-shadow: 0 8px 20px var(--strong-shadow-color); /* More prominent shadow */
    border-radius: var(--border-radius);
    max-height: 90vh; /* Use viewport height */
    overflow-y: auto; /* Use overflow-y for better scrolling */
    border: 1px solid var(--accent-color);
    transition: all 0.3s ease-in-out;
    z-index: 1000;
    min-width: 180px; /* Ensure a minimum width */
}

#table-of-contents h2 {
    font-size: 1.1em;
    max-width: none; /* Allow it to take full width */
    border: 0;
    font-weight: 600; /* Bolder font weight */
    padding: 0.8em 1.2em; /* Increased padding */
    margin: 0;
    color: var(--primary-color);
    cursor: pointer;
    text-align: right;
    background-color: var(--toc-header-bg); /* Slightly different background for title */
    border-bottom: 1px solid var(--accent-color);
}

#table-of-contents #text-table-of-contents {
    display: none;
    text-align: left;
    padding: 0.8em 1.2em 1.2em; /* Adjusted padding */
}

#table-of-contents:hover #text-table-of-contents {
    display: block;
    margin-top: 0;
}

#table-of-contents ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#table-of-contents li {
    margin-bottom: 0.4em;
}

#table-of-contents li a {
    display: block;
    padding: 0.3em 0.6em;
    border-radius: calc(var(--border-radius) - 2px); /* Slightly smaller radius for links */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.1s ease-out;
    color: var(--toc-link-color); /* Default link color within TOC */
    border-bottom: none; /* Remove underline from TOC links */
}

#table-of-contents li a:hover {
    background-color: var(--toc-link-hover-bg); /* Light blue background on hover */
    color: var(--primary-color); /* Change text color on hover */
    text-decoration: none;
    transform: translateX(-3px); /* Subtle slide effect */
}