/* A MARKDOWN DOCUMENT IN THE DETAIL (brief AY, 2026-10-09) - core/vk/markdown.php prints it, view/js/vk_md.js runs its two buttons.
 *
 * One block for the panel's detail, the public web's and the client webs': <div class="vkMd-wrap" data-vk-md> holding .vkMd-bar (the buttons «Ver texto» / «Ver formato» and «Copiar»),
 * <article class="vkMd"> (the formatted document) and <pre class="vkMd-src" hidden> (the source as it is). A readable column on a sheet, as a PDF's page is: the stage scrolls, the
 * sheet is never wider than ~760 px. Colours come from the tokens of view/css/vk_theme.css with their light values as fallbacks, so the dark look follows html[data-theme="dark"] by itself
 * and the pages that do not load that file (the public home, the client webs) are light, as ever. His colour is --vk-main, where the brand block defines it. */

.vkMd-wrap{ box-sizing: border-box; width: 100%; text-align: left; }

/* in the panel's detail: where a PDF's pages are - a box of the same height that scrolls, clear of "Expand" at the top and of the buttons at the right */
.watch_item_modal .casing .vkMd-wrap{
    align-self: stretch; height: 700px; overflow-y: auto; overscroll-behavior: contain;
    padding: 76px 76px 32px; background: var(--vk-fieldh-eaeaea, #eaeaea);
}
.watch_item_modal .casing.fullHeight .vkMd-wrap{ height: 100vh; }
.watch_item_modal .vkDetail--strip > .casing .vkMd-wrap{ height: 100%; }
html[data-theme="dark"] .watch_item_modal .casing .vkMd-wrap{ background: var(--vk-page); }

/* the visitor's detail of the public home and the search (search/css/vk_visitor.css .vkVD-view: a box that scrolls and centres what it holds - the document starts at the top, whatever its length) */
.vkVD-view .vkMd-wrap{ align-self: flex-start; margin: 0 auto; padding: 0 0 8px; }
@media (max-width: 800px){
    .vkVD-view .vkMd-wrap{ width: 100%; }
    .vkVD-view .vkMd-bar{ justify-content: flex-start; }      /* the layer's own download button sits at the top right of the stage: the two buttons stay clear of it */
}

/* the client webs' file page (template_premium/parts/detail.php): the stage is a box of a fixed height that does not scroll and does not let a text be selected (it is a picture's frame, a click zooms
   it): the document scrolls inside it, may be selected, and the stage's click handler has nothing to zoom (no #magnifierImage on the page, so the script never starts) */
.magnifier-container .vkb-mdstage{ width: 100%; height: 100%; align-self: stretch; overflow: auto; -webkit-user-select: text; user-select: text; cursor: auto; touch-action: auto; text-align: left; }
.magnifier-container .vkb-mdstage .vkMd-wrap{ padding: 0 0 8px; }
.vkd .magnifier-container .vkb-mdstage{ height: auto; max-height: calc(var(--d-stage) - 116px); }

/* the public webs' dark pages (Biblioteca's .vkb-dark, the designs' .vkd--dark) have their own palette: the sheet takes it - the tokens are redefined here and every rule above reads them */
.vkb-dark .vkMd-wrap, .vkd--dark .vkMd-wrap{
    --vk-surface: #202026; --vk-text: #f2f2f5; --vk-soft: #a5a5b2; --vk-faint: #8c8b9a; --vk-line: #2c2c34; --vk-line-strong: #3d3d49;
    --vk-field: #2a2a32; --vk-fieldh: #34343e; --vk-raised: #24242b; --vk-ok: #4cc38a;
}
.vkb-dark .vkMd-btn, .vkd--dark .vkMd-btn{ box-shadow: none; }

.vkMd-bar{ max-width: 760px; margin: 0 auto 10px; display: flex; justify-content: flex-end; gap: 8px; }
.vkMd-btn{
    appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0;
    font: 600 12px/1 'Montserrat', 'Segoe UI', sans-serif; letter-spacing: .01em;
    padding: 9px 15px; border-radius: 99px; border: 1px solid var(--vk-line-strong, #cfcdd9);
    background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    box-shadow: 0 1px 2px rgba(22, 22, 26, .08);
}
.vkMd-btn:hover{ background: var(--vk-fieldh, #e9e8ee); }
.vkMd-btn:focus-visible{ outline: 2px solid var(--vk-main, #0f52ff); outline-offset: 2px; }
.vkMd-btn.is-done{ border-color: var(--vk-ok, #2f9e6b); color: var(--vk-ok, #2f9e6b); }
.vkMd-wrap.is-src .vkMd-toggle{ background: var(--vk-text, #16161a); color: var(--vk-surface, #ffffff); border-color: var(--vk-text, #16161a); }

/* the sheet */
.vkMd, .vkMd-src{
    box-sizing: border-box; max-width: 760px; margin: 0 auto; padding: 44px 52px 52px;
    background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    border-radius: 6px; box-shadow: 0 2px 12px rgba(22, 22, 26, .16);
}
.vkMd[hidden], .vkMd-src[hidden]{ display: none; }
.vkMd{
    font: 400 15.5px/1.7 'Montserrat', 'Segoe UI', system-ui, sans-serif; overflow-wrap: anywhere;
}
.vkMd > :first-child{ margin-top: 0; }
.vkMd > :last-child{ margin-bottom: 0; }

.vkMd h1, .vkMd h2, .vkMd h3, .vkMd h4, .vkMd h5, .vkMd h6{ font-weight: 700; line-height: 1.3; margin: 1.7em 0 .55em; color: var(--vk-text, #16161a); }
.vkMd h1{ font-size: 1.9em; margin-top: 0; padding-bottom: .3em; border-bottom: 1px solid var(--vk-line, #e4e3ea); }
.vkMd h2{ font-size: 1.45em; padding-bottom: .25em; border-bottom: 1px solid var(--vk-line, #e4e3ea); }
.vkMd h3{ font-size: 1.2em; }
.vkMd h4{ font-size: 1.05em; }
.vkMd h5{ font-size: .95em; }
.vkMd h6{ font-size: .88em; color: var(--vk-soft, #5f5e6b); }
/* style.css gives every <p> of the detail's layer a centred text, 1.15em and padding (.watch_item_modal p): a document's paragraphs are none of that */
.vkMd-wrap .vkMd p{ margin: 0 0 1em; padding: 0; font-size: 1em; text-align: left; }
.vkMd a{ color: var(--vk-main, #0f52ff); text-decoration: underline; text-underline-offset: 2px; }
.vkMd strong{ font-weight: 700; }
.vkMd del{ color: var(--vk-soft, #5f5e6b); }
.vkMd hr{ border: 0; border-top: 1px solid var(--vk-line-strong, #cfcdd9); margin: 1.8em 0; }

.vkMd ul, .vkMd ol{ margin: 0 0 1em; padding-left: 1.6em; }
/* the public designs reset every list (no markers): a document's lists keep theirs */
.vkMd-wrap .vkMd ul{ list-style: disc outside; }
.vkMd-wrap .vkMd ul ul{ list-style: circle outside; }
.vkMd-wrap .vkMd ul ul ul{ list-style: square outside; }
.vkMd-wrap .vkMd ol{ list-style: decimal outside; }
.vkMd-wrap .vkMd li.vkMd-task{ list-style: none; }
.vkMd li{ margin: .25em 0; }
.vkMd li > ul, .vkMd li > ol{ margin: .3em 0 .3em; }
.vkMd li > p{ margin: .4em 0; }
.vkMd li.vkMd-task{ list-style: none; margin-left: -1.3em; }
.vkMd .vkMd-box{ display: inline-block; width: 1.3em; font-size: 1.05em; line-height: 1; color: var(--vk-soft, #5f5e6b); }
.vkMd li.vkMd-task.is-done .vkMd-box{ color: var(--vk-ok, #2f9e6b); }

.vkMd blockquote{ margin: 0 0 1em; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--vk-line-strong, #cfcdd9); color: var(--vk-soft, #5f5e6b); }
.vkMd blockquote > :last-child{ margin-bottom: 0; }

.vkMd code{
    font: 400 .88em/1.5 ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
    padding: .15em .4em; border-radius: 4px; background: var(--vk-field, #efeef4);
}
.vkMd pre{
    margin: 0 0 1.1em; padding: 14px 16px; border-radius: 6px; background: var(--vk-field, #efeef4);
    overflow-x: auto; tab-size: 4; position: relative;
}
.vkMd pre code{ display: block; padding: 0; background: none; font-size: 13px; line-height: 1.55; white-space: pre; overflow-wrap: normal; word-break: normal; }
.vkMd pre.vkMd-code[data-lang]::before{
    content: attr(data-lang); position: absolute; top: 4px; right: 10px;
    font: 600 10px/1 'Montserrat', 'Segoe UI', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--vk-faint, #9a99a6);
}
.vkMd pre.vkMd-front{ background: var(--vk-fieldh, #e9e8ee); color: var(--vk-soft, #5f5e6b); padding: 10px 14px; }
.vkMd pre.vkMd-front code{ font-size: 12px; }

.vkMd .vkMd-tablewrap{ overflow-x: auto; margin: 0 0 1.2em; }
.vkMd table{ border-collapse: collapse; min-width: 50%; font-size: .93em; }
.vkMd th, .vkMd td{ border: 1px solid var(--vk-line-strong, #cfcdd9); padding: 7px 12px; vertical-align: top; overflow-wrap: normal; }
.vkMd th{ background: var(--vk-field, #efeef4); font-weight: 700; text-align: left; }
.vkMd tbody tr:nth-child(even) td{ background: var(--vk-raised, #fbfafd); }
.vkMd-wrap .vkMd .vkMd-r{ text-align: right; }
.vkMd-wrap .vkMd .vkMd-c{ text-align: center; }
.vkMd-wrap .vkMd .vkMd-l{ text-align: left; }

/* an image is never loaded: its alt text, marked as a picture's place */
.vkMd .vkMd-img{ font-style: italic; color: var(--vk-soft, #5f5e6b); }
.vkMd .vkMd-img::before{ content: '\25A3\00a0'; font-style: normal; color: var(--vk-faint, #9a99a6); }

/* the source as it is */
.vkMd-src{
    margin-top: 0; margin-bottom: 0; overflow-x: auto; tab-size: 4;
    font: 400 13px/1.6 ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.vkMd-cut{ max-width: 760px; margin: 12px auto 0; font: 600 12px/1.5 'Montserrat', 'Segoe UI', sans-serif; color: var(--vk-soft, #5f5e6b); }

@media (max-width: 700px){
    .watch_item_modal .casing .vkMd-wrap{ padding: 64px 58px 16px 8px; height: 75vh; }      /* the right-hand column of buttons (link, download, edit...) stays over the stage: the document stops short of it */
    .vkMd, .vkMd-src{ padding: 22px 18px 26px; border-radius: 4px; }
    .vkMd{ font-size: 15px; }
    .vkMd h1{ font-size: 1.55em; }
    .vkMd h2{ font-size: 1.3em; }
}