/* ============================================================
   📘 MentorSync — Markdown Renderer (Light/Dark Compatible)
   - Headings
   - Lists
   - Quotes
   - Code Blocks
   - Tips / Notes / Warnings
   - Tables
============================================================ */

.msync-markdown {
    font-size: 0.88rem;
    line-height: 1.55;
    word-break: break-word;
}

/* ------------------------------------------------------------
   HEADINGS
------------------------------------------------------------ */
.msync-markdown h1,
.msync-markdown h2,
.msync-markdown h3 {
    margin-top: 0.8rem;
    margin-bottom: 0.45rem;
    font-weight: 600;
}

.msync-markdown h1 { font-size: 1.15rem; }
.msync-markdown h2 { font-size: 1.08rem; }
.msync-markdown h3 { font-size: 1rem; }

/* ------------------------------------------------------------
   PARAGRAPHS
------------------------------------------------------------ */
.msync-markdown p {
    margin: 0.55rem 0;
}

/* ------------------------------------------------------------
   LISTS
------------------------------------------------------------ */
.msync-markdown ul,
.msync-markdown ol {
    padding-left: 1.2rem;
    margin: 0.5rem 0;
}

.msync-markdown li {
    margin: 0.3rem 0;
}

/* ------------------------------------------------------------
   BLOCKQUOTE
------------------------------------------------------------ */
.msync-markdown blockquote {
    border-left: 4px solid;
    padding-left: 0.8rem;
    margin: 0.6rem 0;
    font-style: italic;
}

/* Light mode */
html[data-theme="light"] .msync-markdown blockquote {
    border-color: rgba(0,0,0,0.25);
    color: #444;
}

/* Dark mode */
html[data-theme="dark"] .msync-markdown blockquote {
    border-color: rgba(255,255,255,0.35);
    color: #cbd5e1;
}

/* ------------------------------------------------------------
   INLINE CODE
------------------------------------------------------------ */
.msync-markdown code {
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.82rem;
}

/* Light */
html[data-theme="light"] .msync-markdown code {
    background: rgba(0,0,0,0.07);
    color: #111;
}

/* Dark */
html[data-theme="dark"] .msync-markdown code {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* ------------------------------------------------------------
   CODE BLOCKS
------------------------------------------------------------ */
.msync-markdown pre {
    padding: 0.8rem;
    border-radius: 0.75rem;
    font-size: 0.83rem;
    overflow-x: auto;
    border: 1px solid transparent;
}

/* Light */
html[data-theme="light"] .msync-markdown pre {
    background: #f3f4f6;
    color: #111;
    border-color: rgba(0,0,0,0.1);
}

/* Dark */
html[data-theme="dark"] .msync-markdown pre {
    background: rgba(15,23,42,0.65);
    color: #f8fafc;
    border-color: rgba(148,163,184,0.25);
}

/* ------------------------------------------------------------
   IMÁGENES
------------------------------------------------------------ */
.msync-markdown img {
    max-width: 100%;
    border-radius: 0.65rem;
    margin: 0.6rem 0;
}

/* ------------------------------------------------------------
   TABLES
------------------------------------------------------------ */
.msync-markdown table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.8rem 0;
    font-size: 0.83rem;
}

.msync-markdown th,
.msync-markdown td {
    padding: 0.55rem;
    border: 1px solid transparent;
    text-align: left;
}

/* Light */
html[data-theme="light"] .msync-markdown th {
    background: #e5e7eb;
    color: #111;
    border-color: rgba(0,0,0,0.1);
}
html[data-theme="light"] .msync-markdown td {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    color: #111;
}

/* Dark */
html[data-theme="dark"] .msync-markdown th {
    background: rgba(255,255,255,0.08);
    border-color: rgba(148,163,184,0.25);
    color: #fff;
}
html[data-theme="dark"] .msync-markdown td {
    background: rgba(255,255,255,0.05);
    border-color: rgba(148,163,184,0.18);
    color: #e2e8f0;
}

/* ------------------------------------------------------------
   HORIZONTAL RULE
------------------------------------------------------------ */
.msync-markdown hr {
    border: none;
    border-top: 1px solid transparent;
    margin: 1rem 0;
}

/* Light */
html[data-theme="light"] .msync-markdown hr {
    border-color: rgba(0,0,0,0.1);
}

/* Dark */
html[data-theme="dark"] .msync-markdown hr {
    border-color: rgba(255,255,255,0.15);
}

/* ------------------------------------------------------------
   TIP / NOTE / WARNING BLOCKS (Notion Style)
------------------------------------------------------------ */
.msync-tip,
.msync-note,
.msync-warning {
    padding: 0.75rem 0.9rem;
    border-radius: 0.7rem;
    border-left: 4px solid;
    margin: 0.9rem 0;
}

/* ----- TIP ----- */
.msync-tip {
    border-color: #3b82f6;
}

/* Light */
html[data-theme="light"] .msync-tip {
    background: rgba(59,130,246,0.12);
    color: #0f172a;
}

/* Dark */
html[data-theme="dark"] .msync-tip {
    background: rgba(59,130,246,0.18);
    color: #dbeafe;
}

/* ----- NOTE ----- */
.msync-note {
    border-color: #10b981;
}

/* Light */
html[data-theme="light"] .msync-note {
    background: rgba(16,185,129,0.12);
    color: #0f172a;
}

/* Dark */
html[data-theme="dark"] .msync-note {
    background: rgba(16,185,129,0.18);
    color: #d1fae5;
}

/* ----- WARNING ----- */
.msync-warning {
    border-color: #f59e0b;
}

/* Light */
html[data-theme="light"] .msync-warning {
    background: rgba(245,158,11,0.15);
    color: #111;
}

/* Dark */
html[data-theme="dark"] .msync-warning {
    background: rgba(245,158,11,0.25);
    color: #fff;
}