/* THE NOTCHED FRAME ON EVERYTHING THAT POPS UP (brief FR, 2026-10-30; view/js/vk_frames.js on top of view/js/vk_eframe.js): a framed box has no border / radius / shadow of its own - the notched outline and the clip-path are its edge.
   Colours follow the theme: the outline is light in the dark theme, dark in the light one. The frame module gives every framed box the class .vkfr (not .vkf-panel: the box keeps its own position and background). */
.vkfr{ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.vkfr-sc{ scrollbar-width: none; }
.vkfr-sc::-webkit-scrollbar{ display: none; }
.vkfr-sc > .vkf-svg{ position: sticky !important; top: 0; left: 0; display: block; }          /* a box that scrolls itself: the outline is the first thing in it, sticky, with no height of its own (view/js/vk_frames.js sets its negative margin); no scrollbar beside it */
.vkfr > .vkf-svg path{ stroke: var(--vkfr-line, rgba(22, 22, 26, .38)); }
html[data-theme="dark"] .vkfr > .vkf-svg path{ stroke: var(--vkfr-line, rgba(255, 255, 255, .34)); }

/* ---------------------------------------------------------------- THE FILE'S DETAIL (#watch_item_modal, #vkVaultModal): the editors' look on the layout it has today (brief FR, 2026-10-30)
   the layer is the painted field of the editors (view/css/vk_eshell.css .vks-bgf, the image kind), the stage (.casing) is the notched frame with its dark interior, the side panel sits on the field beside it; the round buttons,
   the arrows and the bars stay over the stage, in the same places - moved in from the edge so the notches and the corners never touch them. Full notches here (the small ones are for the boxes that pop up). */
:root{ --vkfr-field: url(data:image/png;base64,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); }
.watch_item_modal:has(.vkDetail > .casing.vkfr){ background-color: var(--vk-page, #e6e6e6); }
html[data-theme="dark"] .watch_item_modal:has(.vkDetail > .casing.vkfr){ background-color: #1f2230; background-image: var(--vkfr-field); background-size: 100% 100%; background-repeat: no-repeat; }
/* THE EDGE OF THE LAYER (his words, 2026-10-30: «haz que la zona azul sea transparente y seguir siendo opaco en la derecha ... un degradado de transparente a ese color, detras del frame. Porque ahora se ve como un corte duro»).
   The detail is a right-hand layer (max-width 1520): at a wide window the hubs' tree shows beside it and the field started there with a hard cut, and its top edge too. view/js/vk_frames.js puts .vkfr-edge on the layer when it does NOT start at the window's left edge; then the field is
   not the layer's own background but its ::before (behind everything, the frame and its dark interior are not touched), masked: fully TRANSPARENT at the left edge, opaque by --vkfr-fx; transparent at the top edge too, opaque by --vkfr-fy - but only over the left of the width: from
   --vkfr-tx0 to --vkfr-tx1 the top gives way to opaque, so behind the side panel (Versiones / Historial) the field is as opaque as before. Smoothstep stops: no band where the ramp starts. A full-window layer (the zoomed view, a narrow window, the phone) keeps today's opaque field. */
html .watch_item_modal.vkfr-edge:has(.vkDetail > .casing.vkfr), html[data-theme="dark"] .watch_item_modal.vkfr-edge:has(.vkDetail > .casing.vkfr){ --vkfr-fx: min(30%, 440px); --vkfr-fy: 120px; --vkfr-tx0: 46%; --vkfr-tx1: 78%; background: none; box-shadow: none; }
.watch_item_modal.vkfr-edge:has(.vkDetail > .casing.vkfr)::before{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--vk-page, #e6e6e6);
    mask-image: linear-gradient(to right, rgba(0,0,0,0) calc(var(--vkfr-fx) * 0), rgba(0,0,0,0.043) calc(var(--vkfr-fx) * 0.125), rgba(0,0,0,0.156) calc(var(--vkfr-fx) * 0.25), rgba(0,0,0,0.316) calc(var(--vkfr-fx) * 0.375), rgba(0,0,0,0.5) calc(var(--vkfr-fx) * 0.5), rgba(0,0,0,0.684) calc(var(--vkfr-fx) * 0.625), rgba(0,0,0,0.844) calc(var(--vkfr-fx) * 0.75), rgba(0,0,0,0.957) calc(var(--vkfr-fx) * 0.875), rgba(0,0,0,1) calc(var(--vkfr-fx) * 1)),
        linear-gradient(to bottom, rgba(0,0,0,0) calc(var(--vkfr-fy) * 0), rgba(0,0,0,0.043) calc(var(--vkfr-fy) * 0.125), rgba(0,0,0,0.156) calc(var(--vkfr-fy) * 0.25), rgba(0,0,0,0.316) calc(var(--vkfr-fy) * 0.375), rgba(0,0,0,0.5) calc(var(--vkfr-fy) * 0.5), rgba(0,0,0,0.684) calc(var(--vkfr-fy) * 0.625), rgba(0,0,0,0.844) calc(var(--vkfr-fy) * 0.75), rgba(0,0,0,0.957) calc(var(--vkfr-fy) * 0.875), rgba(0,0,0,1) calc(var(--vkfr-fy) * 1)),
        linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,0) calc(var(--vkfr-tx0) + (var(--vkfr-tx1) - var(--vkfr-tx0)) * 0), rgba(0,0,0,0.043) calc(var(--vkfr-tx0) + (var(--vkfr-tx1) - var(--vkfr-tx0)) * 0.125), rgba(0,0,0,0.156) calc(var(--vkfr-tx0) + (var(--vkfr-tx1) - var(--vkfr-tx0)) * 0.25), rgba(0,0,0,0.316) calc(var(--vkfr-tx0) + (var(--vkfr-tx1) - var(--vkfr-tx0)) * 0.375), rgba(0,0,0,0.5) calc(var(--vkfr-tx0) + (var(--vkfr-tx1) - var(--vkfr-tx0)) * 0.5), rgba(0,0,0,0.684) calc(var(--vkfr-tx0) + (var(--vkfr-tx1) - var(--vkfr-tx0)) * 0.625), rgba(0,0,0,0.844) calc(var(--vkfr-tx0) + (var(--vkfr-tx1) - var(--vkfr-tx0)) * 0.75), rgba(0,0,0,0.957) calc(var(--vkfr-tx0) + (var(--vkfr-tx1) - var(--vkfr-tx0)) * 0.875), rgba(0,0,0,1) calc(var(--vkfr-tx0) + (var(--vkfr-tx1) - var(--vkfr-tx0)) * 1)); mask-composite: intersect, add; }
html:not([data-theme="dark"]) .watch_item_modal.vkfr-edge:has(.vkDetail > .casing.vkfr){ --vkfr-tx0: 0%; --vkfr-tx1: 0%; }          /* light: the field is flat, there is no blue glow along the top to soften - and the page's own header (a 10 px blue border) would show through it; only the left edge fades */
html[data-theme="dark"] .watch_item_modal.vkfr-edge:has(.vkDetail > .casing.vkfr)::before{ background-color: #1f2230; background-image: var(--vkfr-field); background-size: 100% 100%; background-repeat: no-repeat; }
.watch_item_modal .vkDetail > .casing.vkfr{ margin: 16px 0 16px 16px; min-height: calc(100vh - 32px) !important; }
/* THE STAGE'S OWN COMPOSITING LAYER (his P1, 2026-10-30: «the dark field does not respect the frame's limit» at the top-left corner and along the left notch). At a device pixel ratio of 1 the casing's dark painted OUTSIDE its clip-path (a hard rectangle at the corner, and down the left notch from y 270) while hit-testing still said it was clipped: Chrome's clip of a box with composited children (the <video>, the outline, the zoom bar) went wrong. Promoting the casing to its own layer makes the clip a mask of that layer (measured: the leak is gone at dpr 1 and 2, Chrome and Brave). It already has a stacking context (clip-path), so nothing is re-ordered. */
.watch_item_modal .vkDetail > .casing.vkfr{ will-change: clip-path; }

/* THE BAG STANDS BEHIND THE DETAIL (his P1, 2026-10-30: «the bag key must sit BEHIND the modal whenever the detail is open, normal and full width»). The bag is z-index 10000000 (view/css/vk_bag.css) and the layer 9999999: it drew over the stage's corner in the wide view.
   While a detail is open it goes under the dimmer (999998) and the layer, like the rest of the page. */
html:has(.watch_item_modal.appearItem) .vkBag{ z-index: 999997; }

/* THE PAGE CHANGE DOES NOT DIM THE PAGE (his words, 2026-10-30: «haz que el cambio de pagina sea mas rapido e instantaneo»): view/css/sidebar_tree.css faded the content to .55 after .12 s while the next page came (and the glitch, now off, made the cards leave). The old page stays as it is until the new one is swapped in. */
html.vk-nav-busy:not(.vk-glitch-out) body .bytLightbox{ opacity: 1; transition: none; }

/* THE NORMAL VIEW IN ONE RHYTHM (his P2, 2026-10-30: the clip touched the frame's sides - the frame covers it - and the round keys stood apart from it). Same distance from the frame's left inner edge to the clip as from the clip to the right inner edge, the key column inside
   that distance: [frame's inner edge] g [clip] g [key column] g [frame's inner edge], and the same on the left, where the ‹ arrow stands as the › arrow stands under the column. --vkd-e is the notch's depth (the frame's inner edge), --vkd-g the gap, --vkd-k the round keys' width.
   The wide view (.vkZoomRow, a PDF's wide mode) and a folded panel keep their own layout; a phone has its own (the media query). */
@media (min-width: 801px){
    .watch_item_modal:not(.vkZoomRow):not(.is-vkPdfWide){ --vkd-pt: 36px; --vkd-pb: 36px; }                                                   /* air above and below the clip too: a portrait clip or a PDF no longer touches the frame's top and bottom */
    .watch_item_modal:not(.vkZoomRow):not(.is-vkPdfWide):has(.vkEc-dtag){ --vkd-pt: 77px; }                                                     /* the «En curso» key stands on the stage's top row: the clip starts below it */
    .watch_item_modal:not(.vkZoomRow):not(.is-vkPdfWide) .vkDetail--side:has(> .casing.vkfr){ --vkd-e: 16px; --vkd-g: 20px; --vkd-k: 42px; --vkd-p: calc(var(--vkd-e) + var(--vkd-g) * 2 + var(--vkd-k)); }
    .watch_item_modal:not(.vkZoomRow):not(.is-vkPdfWide) .vkDetail--side:has(> .casing.vkfr) > .casing{ padding: var(--vkd-pt) var(--vkd-p) var(--vkd-pb); box-sizing: border-box; justify-content: center; }
    .watch_item_modal:not(.vkZoomRow):not(.is-vkPdfWide) .vkDetail--side:has(> .casing.vkfr) > .button_actions{ right: calc(var(--vkVerW) + var(--vkd-e) + var(--vkd-g)); }
    .watch_item_modal:not(.vkZoomRow):not(.is-vkPdfWide) .casing.vkfr.fullHeight .vkPdf, .watch_item_modal:not(.vkZoomRow):not(.is-vkPdfWide) .casing.vkfr.fullHeight .vkMd-wrap, .watch_item_modal:not(.vkZoomRow):not(.is-vkPdfWide) .casing.vkfr.fullHeight .vkHtml, .watch_item_modal:not(.vkZoomRow):not(.is-vkPdfWide) .casing.vkfr.fullHeight .vk3d{ height: calc(100vh - 32px - var(--vkd-pt) - var(--vkd-pb)); }
    .watch_item_modal:not(.vkZoomRow):not(.is-vkPdfWide) .casing.vkfr.fullHeight video.mainImg{ max-height: calc(100vh - 32px - var(--vkd-pt) - var(--vkd-pb)) !important; }
}

/* THE «EN CURSO» KEY OF THE DETAIL (his P3, 2026-10-30: it sat over «Salir»; «texto en oscuro te dije»): the same height and line as the first key - «Salir» in the wide view (view/js/vk_frames.js puts it beside it), the first place of the stage's top row otherwise -
   and the modal buttons' look: Departure Mono, green, its label in the dark ink #06281d. */
.watch_item_modal .vkEc-dtag{ padding: 0 16px; gap: 8px; border-radius: 8px; background: #25d79f; color: #06281d; font: 600 13px/1 var(--vk-departure, "Departure Mono", ui-monospace, Menlo, Consolas, monospace); letter-spacing: 0; }
@media (min-width: 768px){ .watch_item_modal .vkEc-dtag{ left: 45px; top: 41px; height: 36px; } }          /* a phone keeps its own place (view/css/vk_encurso.css: 26 px / 24 px) */
.watch_item_modal .vkEc-dtag .fa{ font-size: 12px; }

.watch_item_modal .vkDetail--side:has(> .casing.vkfr) > .vkVer{ background: transparent; border-left: 0; }
.watch_item_modal .vkDetail--side:has(> .casing.vkfr) > .button_actions{ right: calc(var(--vkVerW) + 44px); }

/* a person's phone: the Bootstrap window is the sheet there (view/css/vk_phone_ui.css, view/js/vk_sheet.js) - its own chrome, so the frame stays out of it */
html[data-sheet] .modal .modal-content.vkfr{ clip-path: none !important; background: transparent !important; }
html[data-sheet] .modal .modal-content.vkfr > .vkf-svg{ display: none; }
/* the stage is 32 px shorter than the window (the frame's margin): what was as tall as the window is as tall as the stage */
.watch_item_modal .casing.vkfr.fullHeight .vkPdf, .watch_item_modal .casing.vkfr.fullHeight .vkMd-wrap, .watch_item_modal .casing.vkfr.fullHeight .vkHtml, .watch_item_modal .casing.vkfr.fullHeight .vk3d{ height: calc(100vh - 32px); }
.watch_item_modal .casing.vkfr.fullHeight video.mainImg{ max-height: calc(100vh - 32px) !important; }
/* folded side panel (a PDF's wide view, the wide view of other files): the bell stood on the stage's corner - inside the frame now, clear of the outline */
.watch_item_modal:has(.vkDetail--side.is-folded > .casing.vkfr) .vkBellDetail{ top: 28px; right: 86px; }
/* a phone (the layer fills the screen, the stage is one column, the round buttons and the arrows are fixed to the window): the frame has its margin all round, the buttons and the arrows stand further in, clear of the round corners */
@media (max-width: 767px){
    .watch_item_modal .vkDetail > .casing.vkfr{ margin: 62px 10px 10px; width: auto; min-height: calc(100vh - 72px) !important; }
    .watch_item_modal .casing.vkfr.fullHeight .vkPdf, .watch_item_modal .casing.vkfr.fullHeight .vkMd-wrap, .watch_item_modal .casing.vkfr.fullHeight .vkHtml, .watch_item_modal .casing.vkfr.fullHeight .vk3d{ height: calc(100vh - 72px); }
    .watch_item_modal .vkDetail--side:has(> .casing.vkfr) > .button_actions{ right: 26px; }
    .watch_item_modal:has(.casing.vkfr) .vkDetailNav-btn{ bottom: 28px; }
    .watch_item_modal:has(.casing.vkfr) .vkDetailNav-prev{ left: 28px; }
    .watch_item_modal:has(.casing.vkfr) .vkDetailNav-next{ right: 28px; }
}
/* «Tira» (the file above, its versions in a strip below): the frame has its margin all round, the strip keeps its air below */
.watch_item_modal .vkDetail--strip > .casing.vkfr{ margin: 16px 16px 0; width: auto; min-height: 0 !important; }
.watch_item_modal > div:has(.vkDetail--strip > .casing.vkfr) > .vkVer{ background: transparent; border-top: 0; }

/* ---------------------------------------------------------------- THE GRID'S CARDS (html[data-vk-cards="frame"], core/vk/cards_frame.php: false there and none of this applies; view/js/vk_frames.js gives a card .vkfc and the class of its size)
   The card keeps its own paint (his gradient, the picture, the name, the pills, the keys): the frame is its EDGE - the clip-path of its size and the outline drawn over it. His border and radius go (the clip is the edge now), the padding is what
   keeps the picture clear of the notches (depth 10 px). His stylesheet (view/custom/mi-estilo.css) is never touched: his selector's weight and !important do it. */
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc{ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc:not(.vkFolder):not(.vkArc){ padding: 13px !important; }
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc::after{ content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 30; pointer-events: none; background-color: var(--vkfr-line, rgba(22, 22, 26, .38)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
/* THE DARK CARD'S OUTLINE IS A LIT THREAD THAT TURNS ONCE (his words, 2026-10-30, with a clip: «cuando los items del grid estan cargando debe de hacer esta animacion ... solo tienes que animar los "deg" y asi parece que el borde vaya dando vueltas como con un hilo iluminado»;
   then: «que el hilo solo ha de hacer una vuelta y mas rapida, no un loop. lo mismo cuando carga que cuando hace hover, 1 repeat. y que levante solo 5px en el hover»). The ::after is the card's outline (its mask, view/js/vk_frames.js cardRule); its background is HIS gradient,
   linear-gradient(271deg, #ffffffc7, #ffffff8c, transparent x5), and only its ANGLE moves (a registered <angle>): ONE turn, 0.7 s, linear, and the thread's alpha (a second registered number, --vkfr-th: 0 = nothing drawn, 1 = his #ffffffc7 / #ffffff8c) comes in and goes out inside that turn,
   so it ends faded and nothing is drawn at rest (the grid does not shift). The turn plays when the card starts LOADING (the img the server marks, core/vk/pic_meta.php, has no data-vk-ld yet - or data-vk-er when it failed) and EACH TIME the pointer enters the card (the class .vkHov that
   view/js/vk_frames.js holds - :hover alone flickered at the lowest 5 px, the pointer is judged against the unlifted box); on hover the card also rises 5 px (transform only: the layout does not move). Only the dark theme, as named; the light rule stays. No JS per frame.
   prefers-reduced-motion: no turning and no lift (the thread stands still while it would have turned). */
@property --vkfr-ang{ syntax: '<angle>'; inherits: false; initial-value: 271deg; }
@property --vkfr-th{ syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes vkfrThread{ 0%{ --vkfr-ang: 271deg; --vkfr-th: 0; } 12%{ --vkfr-th: 1; } 78%{ --vkfr-th: 1; } 100%{ --vkfr-ang: 631deg; --vkfr-th: 0; } }
html[data-theme="dark"][data-vk-cards="frame"] .containernews .capsaitem.vkfc::after{ background: var(--vkcl-edge, none), linear-gradient(var(--vkfr-ang), rgb(37 215 159 / calc(.78 * var(--vkfr-th))), rgb(37 215 159 / calc(.55 * var(--vkfr-th))), transparent, transparent, transparent, transparent, transparent); will-change: transform; }          /* the app's green #25d79f, same alphas as his white (his «haz el borde blanco que rota en las cajas de la grid del verde que tenemos en la app», 2026-10-30) */
html[data-theme="dark"][data-vk-cards="frame"] .containernews .capsaitem.vkfc:has(img[data-vk-ph]:not([data-vk-ld]):not([data-vk-er]))::after{ animation: vkfrThread .7s linear 1; }          /* loading: one turn */
@media (hover: hover){
    html[data-theme="dark"][data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkHov::after{ animation: vkfrThread .7s linear 1; }          /* hover: one turn each time the pointer enters */
    html[data-theme="dark"][data-vk-cards="frame"] .containernews .capsaitem.vkfc{ transition: transform .22s cubic-bezier(.2, .8, .2, 1) !important; }          /* the rise, and only the rise: his stylesheet (view/custom/mi-estilo.css) turns every transition of a card off with !important, and stays so for everything else */
    html[data-theme="dark"][data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkHov:not(.ui-draggable-dragging):not(.vkDrop-carry){ transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce){
    html[data-theme="dark"][data-vk-cards="frame"] .containernews .capsaitem.vkfc::after{ animation: none !important; }
    html[data-theme="dark"][data-vk-cards="frame"] .containernews .capsaitem.vkfc:has(img[data-vk-ph]:not([data-vk-ld]):not([data-vk-er]))::after, html[data-theme="dark"][data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkHov::after{ --vkfr-th: 1; }
    html[data-theme="dark"][data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkHov:not(.ui-draggable-dragging):not(.vkDrop-carry){ transform: none; }
}
/* a folder card (and the archive card, the same material): his drawn folder silhouette gives way to the frame - the card is the dark interior, painted from the same palette (his tokens --vkF-*, dark and light) */
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkFolder, html[data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkArc{ background: radial-gradient(120% 95% at 22% 0%, var(--vkF-glow1), var(--vkF-glow2) 55%, var(--vkF-base)) !important; }
/* THE FOLDER CARD, HIS DRAWING (his picture images/27.png, 2026-10-30; geometry in view/js/vk_frames.js foldG, as fractions of the card's width and height): a BACK sheet above the front's stepped top edge, the front's glossy edge, a bottom highlight. The card's clip and the thread's mask are the
   union outline (cardRule, kind 'f'); .vkfd is the SVG of the quiet part, under the text. The old drawing (.vkFold-shape) is hidden - except, on an archive card, its zipper (.vkArc-zip: view/js/vk_frames.js puts it under the front's edge). */
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc .vkFold-shape{ display: none; }
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkArc .vkFold-shape{ display: block; }
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkArc .vkFold-shape > :not(defs):not(.vkArc-zip){ display: none; }
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc > .vkfd{ position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; fill: none; stroke-width: 1; --vkfd-line: rgba(255, 255, 255, .28); --vkfd-gloss: rgba(255, 255, 255, .8); --vkfd-tint: rgba(255, 255, 255, .07); }
html:not([data-theme="dark"])[data-vk-cards="frame"] .containernews .capsaitem.vkfc > .vkfd{ --vkfd-line: rgba(22, 22, 26, .2); --vkfd-gloss: rgba(255, 255, 255, .95); --vkfd-tint: rgba(255, 255, 255, .5); }
.vkfd .vkfd-tint{ fill: var(--vkfd-tint); stroke: none; }
.vkfd .vkfd-back{ stroke: var(--vkfd-line); }
.vkfd .vkfd-front, .vkfd .vkfd-foot{ stroke-width: 1.2; stroke-linecap: round; }
html[data-theme="dark"][data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkFolder .vkFold{ transform: none !important; }          /* the old 2 px lift of the folder's own drawing: the card rises on its own now */
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc .vkFold-main{ padding-top: calc(52 * var(--u)); }          /* the tab is gone: the text climbs */
/* a file dropped onto another (view/js/vk_dropinto.js): the card it would join is lit by its own outline in the app's colour, and the mark inside it loses the ring (the clip would cut it) */
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc .vkDrop-mark{ border: 0; border-radius: 0; box-shadow: none; }
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc:has(> .vkDrop-mark)::after, html[data-vk-cards="frame"] .containernews .capsaitem.vkfc:has(.vkDrop-mark)::after{ background-color: var(--vk-main, #0f52ff); }
/* a file carried over the folder cards (view/js/vk_folders.js): the ones that take it show their outline in his aim colour, the one under the pointer lit */
html.vkFold-aim[data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkFolder[data-vk-drop]::after{ background-color: color-mix(in srgb, var(--vkF-aim) 55%, transparent); }
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkFolder.vkFolder--drop::after{ background-color: var(--vkF-aim); }
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkFolder.vkFolder--drop{ box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--vkF-aim) 14%, transparent) !important; }
/* ONE dark surface inside the frame (his note, 2026-10-30): the zoomed view's grey (#3b3b47) and the light backing of a transparent picture (#e8e8e8, view/css/vk_dark.css) were a second, lighter rectangle - the frame's interior is the editors' near-black everywhere */
html[data-theme="dark"] .watch_item_modal .casing.vkfr .vkZoomIn:not(.vkZoomIn--plain){ background: var(--vk-page, #17171c); }          /* not transparent: the file's own picture stays in the casing under the zoomed view. NOT the plain one (a video, a PDF...: it only carries «Salir» over the file, which keeps playing under it - painted dark it hid the video in the wide view, 2026-10-30) */
html[data-theme="dark"] .watch_item_modal .casing.vkfr img.mainImg, html[data-theme="dark"] .watch_item_modal .casing.vkfr .vkZoomIn-pic img{ background-color: transparent; }
/* THE HUB CARDS (.vkCards > .vkCard): the same frame as the grid's cards - his border and radius give way, the outline is the frame's; their own paint (white / #282830, his shade) stays, the padding (16 px) keeps the text clear of the notches */
html[data-vk-cards="frame"] .vkCards > .vkCard.vkfc{ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html[data-vk-cards="frame"] .vkCards > .vkCard.vkfc::after{ content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 30; pointer-events: none; background-color: var(--vkfr-line, rgba(22, 22, 26, .38)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
html[data-theme="dark"][data-vk-cards="frame"] .vkCards > .vkCard.vkfc::after{ background-color: var(--vkfr-line, rgba(255, 255, 255, .34)); }
html[data-vk-cards="frame"] .vkCards > .vkCard.vkfc:is(:hover, :focus-visible)::after{ background-color: var(--vk-violet, #25d79f); }
/* the hub cards turn the same green thread as the grid's cards (his «en los hubs, tambien se necesita hacer el rotamiento del borde en los hubs de la grid», 2026-10-30): dark only, ONE 0.7 s turn each time the pointer enters,
   drawn OVER the hub card's own resting outline (it keeps its line: the thread is a background-image on the same masked ::after), which no longer turns wholly green on hover in dark */
html[data-theme="dark"][data-vk-cards="frame"] .vkCards > .vkCard.vkfc::after{ background-image: var(--vkcl-edge, none), linear-gradient(var(--vkfr-ang), rgb(37 215 159 / calc(.78 * var(--vkfr-th))), rgb(37 215 159 / calc(.55 * var(--vkfr-th))), transparent, transparent, transparent, transparent, transparent); }
html[data-theme="dark"][data-vk-cards="frame"] .vkCards > .vkCard.vkfc:is(:hover, :focus-visible)::after{ background-color: var(--vkfr-line, rgba(255, 255, 255, .34)); }
@media (hover: hover){ html[data-theme="dark"][data-vk-cards="frame"] .vkCards > .vkCard.vkfc:hover::after{ animation: vkfrThread .7s linear 1; } }
@media (prefers-reduced-motion: reduce){ html[data-theme="dark"][data-vk-cards="frame"] .vkCards > .vkCard.vkfc::after{ animation: none !important; } }
/* ---------------------------------------------------------------- vkCardStandout (view/js/vk_frames.js): the card of the file that was just closed, lit for about 3 s and fading
   framed cards: the outline in the accent (::before, the same picture as ::after) and a soft glow round the picture block; the old design: a ring and a glow of the card's box; both: the picture a few px up (its own wrapper - Packery owns the card's transform) */
:root{ --vkso: var(--vk-violet, #25d79f); }
@keyframes vkSoLine{ 0%{ opacity: 1; } 55%{ opacity: .9; } 100%{ opacity: 0; } }
@keyframes vkSoGlow{ 0%{ box-shadow: 0 0 20px 4px color-mix(in srgb, var(--vkso) 55%, transparent); } 55%{ box-shadow: 0 0 16px 3px color-mix(in srgb, var(--vkso) 34%, transparent); } 100%{ box-shadow: 0 0 0 0 transparent; } }
@keyframes vkSoRing{ 0%{ box-shadow: 0 0 0 2px var(--vkso), 0 0 24px 3px color-mix(in srgb, var(--vkso) 55%, transparent); } 55%{ box-shadow: 0 0 0 2px color-mix(in srgb, var(--vkso) 70%, transparent), 0 0 18px 2px color-mix(in srgb, var(--vkso) 36%, transparent); } 100%{ box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; } }
@keyframes vkSoLift{ 0%{ transform: translateY(0); } 9%{ transform: translateY(-5px); } 55%{ transform: translateY(-4px); } 100%{ transform: none; } }
.containernews .capsaitem.vkSo > :first-child{ animation: vkSoLift 3.2s ease-out both; }
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkSo > :first-child{ animation: vkSoLift 3.2s ease-out both, vkSoGlow 3.2s ease-out both; }          /* the glow is the picture block's: the card's own box-shadow is off in the frame, and what is outside the clip is not seen */
html[data-vk-cards="frame"] .containernews .capsaitem.vkfc.vkSo::before{ content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 31; pointer-events: none; background-color: var(--vkso); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; animation: vkSoLine 3.2s ease-out both; }
html:not([data-vk-cards="frame"]) .containernews .capsaitem.vkSo, html[data-vk-cards="frame"] .containernews .capsaitem.vkSo:not(.vkfc){ animation: vkSoRing 3.2s ease-out both; }
@media (prefers-reduced-motion: reduce){ .containernews .capsaitem.vkSo > :first-child{ animation: none; } }