/* FOLDER CARDS IN THE GRID (brief 7A, 2026-10-16; core/vk/folder_cards.php, view/js/vk_folders.js).
 *
 * HIS DRAWING, AS HE DREW IT (data/test-tools/design/foto3-carpetas-zip.webp, the card «Web motion»; his words, 2026-10-16 evening: "si te envio un diseño es perque quiero ese"). Measured on his picture
 * pixel by pixel: 280 x 215 in his units, a column of the grid wide - so the card keeps that shape (aspect-ratio) and every measure inside it is in his units, `--u` = the card's width / 280, which on his
 * screen gives his picture back and on any other the same drawing at another size. The shape is the SVG of vk_fc_shape_svg(); its colours are the tokens below: his dark look as he drew it, and a light one
 * in the same build for the light theme. Text: the size in Departure Mono, the name in Montserrat bold, «N archivos» in Departure Mono; the «⋯» three small dots; his row of four - open, the green pin,
 * link, download - at the bottom left. The connectors of his picture are not drawn ("esto no hace falta ok?").
 *
 * The outer element is a Packery item (a card of the grid), which Packery moves with `transform`: nothing is painted on it. His own stylesheet paints every `.containernews .capsaitem` (a gradient, a border
 * on three sides, padding, a radius - view/custom/mi-estilo.css): all of that is taken off this one here, with !important and his selector's weight (the «borde arriba a la derecha imperfecto» was his border
 * on the box around the drawing).
 *
 * Linked after vk_dark.css and before his mi-estilo.css (inc/header.php).
 * THE VISITORS' WEB draws the same card (brief CW, 2026-10-16: core/vk/landing_demo.php vk_ld_folders_html(), its keys in search/js/vk_demo.js) and loads this sheet in the same place (the demo's
 * 'cssAfterDark', parts/landing.php): nothing in it is the panel's alone.
 */

/* the box: a column wide, his shape; no paint of its own */
.containernews .capsaitem.vkFolder,
html[data-theme="dark"] .containernews .capsaitem.vkFolder{
    height: auto;
    aspect-ratio: 280 / 215;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0;
    overflow: visible;
    opacity: 1 !important;              /* «select all» fades every .capsaitem (style.css .checkedOK): a folder is no file to pick */
}

/* HIS DARK LOOK - the colours of his picture */
.containernews .capsaitem.vkFolder, .containernews .capsaitem.vkArc{          /* the archive card of brief 7B wears the same material (view/css/vk_archive.css) */
    --vkF-base: #22222c;
    --vkF-glow0: #5c5d68; --vkF-glow1: #46454f; --vkF-glow2: #2c2b35;
    --vkF-rim0: #a2a4aa; --vkF-rim1: #8a8b94; --vkF-rim2: #3d3e48; --vkF-rim3: #34353f;
    --vkF-edge: #33343e;
    --vkF-tl0: #3e3f4b; --vkF-tl1: #3a3b46; --vkF-tl2: #2c2d37;
    --vkF-band: #3c3d49;
    --vkF-face0: #25232f; --vkF-face1: #2d2b39; --vkF-face2: #383845;
    --vkF-lip0: #45454f; --vkF-lip1: #42424d; --vkF-lip2: #5f5e6a; --vkF-lip3: #4a4955; --vkF-lip4: #6d6e77;
    --vkF-foot: #41414c;
    --vkF-size: #c1c6dd;
    --vkF-name: #fffdff;
    --vkF-count: #bbbcd0;
    --vkF-dots: #8f8d99;
    --vkF-icon: #f6f6fa;
    --vkF-pin: #4fdeab;
    --vkF-off: #7d7b89;
    --vkF-aim: var(--vk-violet, #ba93f5);
    --vkF-shadow: rgba(0, 0, 0, .42);
}
/* the light theme: the same drawing in light material (his picture is the dark one) */
html:not([data-theme="dark"]) .containernews .capsaitem.vkFolder, html:not([data-theme="dark"]) .containernews .capsaitem.vkArc{
    --vkF-base: #d9d8e2;
    --vkF-glow0: #fbfbfd; --vkF-glow1: #ecebf2; --vkF-glow2: #dedde6;
    --vkF-rim0: #ffffff; --vkF-rim1: #f6f6fa; --vkF-rim2: #d6d5df; --vkF-rim3: #cfced9;
    --vkF-edge: #cecdd8;
    --vkF-tl0: #eeedf3; --vkF-tl1: #e8e7ef; --vkF-tl2: #dddce5;
    --vkF-band: #e9e8ef;
    --vkF-face0: #ffffff; --vkF-face1: #fbfbfd; --vkF-face2: #f2f1f6;
    --vkF-lip0: #ffffff; --vkF-lip1: #fdfdfe; --vkF-lip2: #ffffff; --vkF-lip3: #f4f3f8; --vkF-lip4: #ffffff;
    --vkF-foot: #dcdbe4;
    --vkF-size: #6f6d80;
    --vkF-name: #16161a;
    --vkF-count: #8a8995;
    --vkF-dots: #a6a4b3;
    --vkF-icon: #16161a;
    --vkF-pin: #13a874;
    --vkF-off: #a6a4b3;
    --vkF-aim: var(--vk-violet, #6e1fd1);
    --vkF-shadow: rgba(30, 20, 60, .16);
}

.vkFold{
    position: relative;
    width: 100%;
    height: 100%;
    container-type: inline-size;
    --u: calc(100cqw / 280);            /* one unit of his drawing, worked out in each piece inside against this box (it is their container) */
    transition: transform .18s ease;
    will-change: transform;
}
.vkFolder:hover .vkFold, .vkFolder.is-menu .vkFold{ transform: translateY(-2px); }

/* the drawing */
.vkFold-shape{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    overflow: visible;
    pointer-events: none;
    transition: filter .18s ease;
}
.vkFolder:hover .vkFold-shape, .vkFolder.is-menu .vkFold-shape, .vkFolder.is-carried .vkFold-shape{ filter: drop-shadow(0 8px 12px var(--vkF-shadow)); }
.vkFold-aimline{ stroke: transparent; transition: stroke .15s ease; }
.vkFold:has(.vkFold-main:focus-visible) .vkFold-aimline{ stroke: var(--vkF-aim); }

/* what the card says - over the whole card, so a click anywhere on it opens the place (the actions and the «⋯» sit above it); a drag anywhere on it carries it (view/js/script.js vkFoldDrag) */
.containernews .capsaitem .vkFold-main{
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: calc(81 * var(--u)) calc(30 * var(--u)) 0 calc(18 * var(--u));
    text-decoration: none !important;
    outline: none !important;
    cursor: pointer;
    -webkit-user-drag: none;
}
.vkFolder[data-vk-place] .vkFold-main{ cursor: pointer; }
.vkFolder.is-carried .vkFold-main{ cursor: grabbing; }
.containernews .capsaitem .vkFold-main.is-static{ cursor: default; }
.containernews .capsaitem .vkFold-size{
    display: block;
    font-family: var(--vk-departure, 'Departure Mono', ui-monospace, Menlo, Consolas, monospace) !important;
    font-synthesis: none;
    font-weight: 400;
    font-size: calc(11.4 * var(--u)); line-height: 1;
    letter-spacing: 0;
    color: var(--vkF-size);
}
.containernews .capsaitem .vkFold-name{
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    max-width: 100%;
    margin: calc(18.9 * var(--u)) 0 0 0;
    font-family: 'Montserrat', sans-serif !important;
    font-size: calc(12.2 * var(--u)); font-weight: 700; line-height: 1.2;
    color: var(--vkF-name);
    overflow-wrap: anywhere;
}
.containernews .capsaitem .vkFold-count{
    display: block;
    margin: calc(10.6 * var(--u)) 0 0 0;
    font-family: var(--vk-departure, 'Departure Mono', ui-monospace, Menlo, Consolas, monospace) !important;
    font-synthesis: none;
    font-weight: 400;
    font-size: calc(8.5 * var(--u)); line-height: 1;
    color: var(--vkF-count);
}

/* «⋯»: his three small dots at the top right of the front */
.containernews .capsaitem .vkFold-more{
    position: absolute; z-index: 2;
    left: calc(226 * var(--u)); top: calc(41 * var(--u));
    width: calc(32 * var(--u)); height: calc(28 * var(--u));
    min-width: 0; padding: 0 !important; margin: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: calc(2.5 * var(--u));
    border: 0 !important; border-radius: calc(8 * var(--u)) !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .15s ease;
}
.vkFold-dot{
    display: block; flex: none;
    width: calc(3.5 * var(--u)); height: calc(3 * var(--u));
    border-radius: 1px;
    background: var(--vkF-dots);
    transition: background-color .15s ease;
    pointer-events: none;
}
.containernews .capsaitem .vkFold-more:hover, .containernews .capsaitem .vkFold-more[aria-expanded="true"]{ background: rgba(255, 255, 255, .07) !important; }
html:not([data-theme="dark"]) .containernews .capsaitem .vkFold-more:hover, html:not([data-theme="dark"]) .containernews .capsaitem .vkFold-more[aria-expanded="true"]{ background: rgba(22, 22, 26, .06) !important; }
.vkFold-more:hover .vkFold-dot, .vkFold-more[aria-expanded="true"] .vkFold-dot{ background: var(--vkF-name); }
.containernews .capsaitem .vkFold-more:focus-visible{ outline: 2px solid var(--vkF-aim) !important; outline-offset: 1px; }

/* his row of four: open, the pin, link, download - the pin green while the folder is at the front (view/js/vk_folders.js) */
.containernews .capsaitem .vkFold-acts{
    position: absolute; z-index: 2;
    left: calc(15 * var(--u)); top: calc(168 * var(--u));
    display: flex; align-items: center; gap: calc(14 * var(--u));
}
.containernews .capsaitem .vkFold-act{
    width: calc(20 * var(--u)); height: calc(28 * var(--u));
    min-width: 0; padding: 0 !important; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0 !important; border-radius: calc(6 * var(--u)) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none !important;
    cursor: pointer;
}
.containernews .capsaitem .vkFold-act i{
    margin: 0 !important; padding: 0 !important;
    font-size: calc(13 * var(--u)) !important; line-height: 1;
    color: var(--vkF-icon) !important;
    transition: color .15s ease, opacity .15s ease;
}
.containernews .capsaitem .vkFold-act:hover i{ opacity: .72; }
.containernews .capsaitem .vkFold-pin i{ color: var(--vkF-off) !important; }
.containernews .capsaitem .vkFold-pin.is-on i{ color: var(--vkF-pin) !important; }
.containernews .capsaitem .vkFold-act:focus-visible{ outline: 2px solid var(--vkF-aim) !important; outline-offset: 0; }
.containernews .capsaitem .vkFold-act.is-busy{ opacity: .45; pointer-events: none; }
.containernews .capsaitem .vkFold-act.is-busy i{ animation: vkFoldPulse 1s ease-in-out infinite; }
@keyframes vkFoldPulse{ 50%{ opacity: .35; } }

/* carried: above the others, as a file is */
.containernews .capsaitem.vkFolder.is-carried{ z-index: 50; }

/* A FILE IS BEING CARRIED: the folder cards that take it are marked, and the one under the pointer says where it goes */
html.vkFold-aim .containernews .capsaitem.vkFolder[data-vk-drop] .vkFold-aimline{ stroke: color-mix(in srgb, var(--vkF-aim) 45%, transparent); }
.containernews .capsaitem.vkFolder.vkFolder--drop .vkFold-aimline{ stroke: var(--vkF-aim); }
.containernews .capsaitem.vkFolder.vkFolder--drop .vkFold-shape{ filter: drop-shadow(0 0 calc(10 * 1px) color-mix(in srgb, var(--vkF-aim) 55%, transparent)); }
.containernews .capsaitem.vkFolder.vkFolder--drop .vkFold{ transform: translateY(-2px); }
.containernews .capsaitem.vkFolder.vkFolder--drop .vkFold::after{
    content: attr(data-vk-hint);
    position: absolute; z-index: 3; right: calc(14 * var(--u, 1px)); bottom: calc(14 * var(--u, 1px));
    max-width: calc(100% - 60px);
    padding: 5px 10px; border-radius: 999px;
    background: var(--vkF-aim); color: #ffffff;
    font: 600 11px/1.2 var(--vk-departure, ui-monospace, monospace);
    font-synthesis: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
}
html[data-theme="dark"] .containernews .capsaitem.vkFolder.vkFolder--drop .vkFold::after{ color: #16161a; }
.containernews .capsaitem.vkFolder.is-busy .vkFold{ opacity: .6; pointer-events: none; }

@media (prefers-reduced-motion: reduce){
    .vkFold, .vkFold-shape, .vkFold-aimline, .vkFold-dot, .containernews .capsaitem .vkFold-more, .containernews .capsaitem .vkFold-act i{ transition: none; }
    .containernews .capsaitem .vkFold-act.is-busy i{ animation: none; }
}

/* the small menu the «⋯» opens (the tree's own .vkMenu look, sidebar_tree.css): one line apart from the place's own items */
.vkMenu.vkFoldMenu{ z-index: 1065; }
.vkFoldMenu .vkMenu-sep{ display: block; height: 1px; margin: 5px 6px; background: var(--vk-line, #e4e3ea); }