/* =========================================================
   EDUCATIONAL CONTENT SYSTEM
   Global stylesheet for educational documents
   ========================================================= */

/* ---------- BASE ---------- */

.edu-content {
    --primary: #8b2020;
    --primary-light: #f6eeee;

    --blue: #2d6fa3;
    --blue-dark: #174a7e;
    --blue-light: #f4f8fb;

    --green: #3d8060;
    --green-light: #eef6f1;

    --gold: #8b6500;
    --gold-light: #fff8e8;

    --red: #a32626;
    --red-light: #fff1f1;

    --text: #263238;
    --muted: #687780;

    --border: #dce5ec;
    --border-dark: #c5d2da;

    font-family: "Segoe UI", Arial, sans-serif;
    max-width: 900px;
    margin: 0 auto;
    color: var(--text);
    font-size: 16px;
    line-height: 1.65;
}


/* ---------- HEADINGS ---------- */

.edu-content h1 {
    color: var(--primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: 600;
    margin: 30px 0 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--primary);
}

.edu-content h2 {
    color: var(--primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-style: italic;
    font-weight: 600;
    margin: 18px 0 8px;
    padding-bottom: 9px;
    border-bottom: 2px solid #e2d4d4;
}

.edu-content h3 {
    color: var(--blue-dark);
    font-size: 20px;
    font-weight: 700;
    margin: 24px 0 12px;
}

.edu-content h4 {
    color: var(--text);
    font-size: 17px;
    font-weight: 700;
    margin: 20px 0 10px;
}


/* ---------- PARAGRAPHS ---------- */

.edu-content p {
    margin: 10px 0 16px;
}

.edu-content .lead {
    font-size: 18px;
    line-height: 1.75;
}

.edu-content .small-text {
    font-size: 14px;
    color: var(--muted);
}


/* =========================================================
   CONTENT BOXES
   ========================================================= */


/* Definition */

.edu-content .definition {
    background: var(--blue-light);
    border-left: 5px solid var(--blue);
    border-radius: 0 9px 9px 0;
    padding: 16px 20px;
    margin: 18px 0 22px;
}

.edu-content .definition-title {
    color: var(--blue-dark);
    font-weight: 700;
    margin-bottom: 5px;
}


/* Key idea */

.edu-content .key-idea {
    background: var(--green-light);
    border-left: 5px solid var(--green);
    border-radius: 0 9px 9px 0;
    padding: 16px 20px;
    margin: 22px 0;
}

.edu-content .key-title {
    color: #216a4a;
    font-weight: 700;
    margin-bottom: 5px;
}


/* Remember */

.edu-content .remember {
    background: var(--gold-light);
    border: 1px solid #ead49a;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 22px 0;
}

.edu-content .remember-title {
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 5px;
}


/* Important */

.edu-content .important {
    background: var(--red-light);
    border-left: 5px solid var(--red);
    border-radius: 0 9px 9px 0;
    padding: 16px 20px;
    margin: 22px 0;
}

.edu-content .important-title {
    color: var(--red);
    font-weight: 700;
    margin-bottom: 5px;
}


/* Note */

.edu-content .note {
    background: #f7f9fb;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 15px 20px;
    margin: 20px 0;
}

.edu-content .note-title {
    color: var(--blue-dark);
    font-weight: 700;
    margin-bottom: 5px;
}


/* =========================================================
   EXAMPLES
   ========================================================= */

.edu-content .example {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 17px 20px;
    margin: 20px 0;
}

.edu-content .example-title {
    color: var(--blue-dark);
    font-weight: 700;
    font-style: italic;
    margin-bottom: 10px;
}

.edu-content .example-step {
    padding: 7px 0;
}

.edu-content .example-result {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-weight: 700;
}


/* Mathematical expression */

.edu-content .formula {
    text-align: center;
    background: #f7f9fb;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 15px;
    margin: 20px 0;
    font-size: 20px;
}


/* =========================================================
   LISTS
   ========================================================= */

.edu-content ul,
.edu-content ol {
    margin: 12px 0 20px;
    padding-left: 30px;
}

.edu-content li {
    margin: 7px 0;
}


/* Custom numbered list */

/* LISTAS NUMERADAS CON CÍRCULOS */

.edu-content .numbered-list {
    list-style: none;
    counter-reset: item;
    padding: 0;
    margin: 20px 0;
}

.edu-content .numbered-list li {
    counter-increment: item;
    position: relative;
    padding: 13px 18px 13px 58px;
    margin: 12px 0;
    background: #ffffff;
    border: 1px solid #dbe5ec;
    border-radius: 10px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.05);
    align-items: flex-start;
}

.edu-content .numbered-list li::before {
    content: counter(item);
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);

    width: 30px;
    height: 30px;
    line-height: 30px;

    background: #2d6fa3;
    color: white;
    text-align: center;

    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
}


/* Bullet list */

.edu-content .bullet-list {
    list-style: none;
    padding-left: 0;
    margin-left: 3%;
}

.edu-content .bullet-list li {
    position: relative;
    padding-left: 25px;
}

.edu-content .bullet-list li::before {
    content: "•";
    position: absolute;
    left: 5px;
    color: var(--blue);
    font-weight: 700;
}


/* =========================================================
   DIFFERENT LEVELS OF INFORMATION
   ========================================================= */

.edu-content .level-1 {
    font-size: 18px;
    font-weight: 600;
}

.edu-content .level-2 {
    font-size: 16px;
}

.edu-content .level-3 {
    font-size: 14px;
    color: var(--muted);
}


/* Highlight */

.edu-content .highlight {
    color: var(--blue-dark);
    font-weight: 700;
}

.edu-content .positive {
    color: #216a4a;
    font-weight: 700;
}

.edu-content .negative {
    color: var(--red);
    font-weight: 700;
}

.edu-content .important-word {
    color: var(--primary);
    font-weight: 700;
}


/* =========================================================
   TABLES
   ========================================================= */

.edu-content .table-wrapper {
    overflow-x: auto;
    margin: 22px 0;
}

.edu-content table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
}

.edu-content th {
    background: var(--blue);
    color: white;
    font-weight: 700;
    text-align: left;
    padding: 12px 14px;
}

.edu-content td {
    padding: 11px 14px;
    border-top: 1px solid var(--border);
}

.edu-content tr:nth-child(even) td {
    background: #f8fafc;
}

.edu-content tr:hover td {
    background: var(--blue-light);
}


/* Centered table */

.edu-content .table-center th,
.edu-content .table-center td {
    text-align: center;
}


/* =========================================================
   CARDS / RULES
   ========================================================= */

.edu-content .card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 15px 18px;
    margin: 10px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.edu-content .rule {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 13px 18px;
    margin: 10px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.edu-content .rule::before {
    content: "•";
    color: var(--blue);
    font-weight: bold;
    margin-right: 10px;
}


/* =========================================================
   EXERCISES
   ========================================================= */

.edu-content .exercise {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 20px 0;
}

.edu-content .exercise-title {
    color: var(--blue-dark);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.edu-content .question {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 9px 0;
}

.edu-content .question-number {
    color: var(--blue-dark);
    font-weight: 700;
    margin-right: 8px;
}


/* Answer line */

.edu-content .answer-line {
    display: inline-block;
    min-width: 100px;
    height: 20px;
    border-bottom: 1px solid #7b8a93;
    margin: 0 5px;
}


/* Large answer space */

.edu-content .answer-space {
    min-height: 80px;
    background: white;
    border: 1px dashed var(--border-dark);
    border-radius: 8px;
    margin-top: 12px;
}


/* =========================================================
   TRUE / FALSE
   ========================================================= */

.edu-content .true-false {
    background: white;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 13px 18px;
    margin: 10px 0;
}

.edu-content .true-false-answer {
    float: right;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}


/* =========================================================
   COMPARISON
   ========================================================= */

.edu-content .comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 20px 0;
}

.edu-content .comparison > div {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 15px;
}

.edu-content .comparison-title {
    color: var(--blue-dark);
    font-weight: 700;
    margin-bottom: 8px;
}


/* =========================================================
   QUOTES / STATEMENTS
   ========================================================= */

.edu-content .statement {
    background: #f7f9fb;
    border-left: 4px solid var(--primary);
    padding: 14px 20px;
    margin: 20px 0;
    font-style: italic;
}


/* =========================================================
   IMAGES
   ========================================================= */

.edu-content .image-box {
    text-align: center;
    margin: 22px 0;
}

.edu-content .image-box img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.edu-content .image-caption {
    color: var(--muted);
    font-size: 14px;
    margin-top: 7px;
    font-style: italic;
}


/* =========================================================
   SYMBOLS / NOTATION
   ========================================================= */

.edu-content .notation {
    text-align: center;
    background: #f7f9fb;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 16px;
    margin: 20px 0;
    font-size: 21px;
}


/* =========================================================
   SEPARATORS
   ========================================================= */

.edu-content .separator {
    height: 1px;
    background: var(--border);
    margin: 32px 0;
}

.edu-content .space {
    height: 20px;
}


/* =========================================================
   BADGES / LABELS
   ========================================================= */

.edu-content .badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--blue-light);
    color: var(--blue-dark);
    font-size: 13px;
    font-weight: 700;
}

.edu-content .badge-green {
    background: var(--green-light);
    color: var(--green);
}

.edu-content .badge-gold {
    background: var(--gold-light);
    color: var(--gold);
}


/* =========================================================
   TWO / THREE COLUMNS
   ========================================================= */

.edu-content .columns-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 20px 0;
}

.edu-content .columns-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 20px 0;
}

.edu-content .column-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 16px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .edu-content {
        font-size: 15px;
        padding: 0 12px;
    }

    .edu-content h1 {
        font-size: 27px;
    }

    .edu-content h2 {
        font-size: 22px;
    }

    .edu-content .comparison,
    .edu-content .columns-2,
    .edu-content .columns-3 {
        grid-template-columns: 1fr;
    }

    .edu-content .true-false-answer {
        float: none;
        display: block;
        margin-top: 7px;
    }

    .edu-content table {
        font-size: 14px;
    }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

    .edu-content {
        max-width: none;
        font-size: 12pt;
    }

    .edu-content .card,
    .edu-content .definition,
    .edu-content .example,
    .edu-content .exercise,
    .edu-content .question,
    .edu-content .key-idea,
    .edu-content .remember,
    .edu-content .important {
        break-inside: avoid;
    }

    .edu-content h1,
    .edu-content h2,
    .edu-content h3 {
        break-after: avoid;
    }
}