/* A file's versions in the detail layer (core/vk/versions.php, view/js/vk_versions.js) and their
   badge on the grid's cards (parts/category_items.php), 2026-09-26. Same look as the sidebar and
   the dashboard: Montserrat, white cards, violet. */

/* ---------------------------------------------------------------- the layer around them */

.watch_item_modal .vkDetail{ position: relative; }
.watch_item_modal .vkDetail--side{ --vkVerW: 400px; display: flex; align-items: stretch; }
.watch_item_modal .vkDetail--side > .casing{ flex: 1 1 0; width: auto; min-width: 0; overflow: hidden; }
/* the preview keeps to its own area: style.css lets an image be 750 px (830 expanded) wide, more
   than what is left beside the panel, and a landscape picture ran over the versions */
.watch_item_modal .vkDetail--side > .casing .mainImg,
.watch_item_modal .vkDetail--side > .casing.fullHeight .mainImg{ max-width: 100%; min-width: 0; object-fit: contain; }
/* a video never taller than the window - his words, 2026-09-26: "haz que tengan una altura maxima de 100 de la
   altura del viewport. Sino son muy grandes". A phone video (1080 x 1920) ran far below it once expanded, where
   style.css lifts every preview's height limit (.casing.fullHeight .mainImg, !important); not expanded, 534 px stays */
.watch_item_modal .casing.fullHeight video.mainImg{ max-height: 100vh !important; max-width: 100%; }
/* Tira: the grey picture area as tall as the window, the picture as large as it fits; the strip and the rest
   below it, by scrolling. His words, 2026-09-26: "en la modalidad tira, por defecto la parte gris ha de ocupar el
   100% de la altura del viwport, si el usuario quiere escrollear puede ver lo que hay abajo." */
/* replaced 2026-09-27 by the column below: this is what put the strip under the fold */
/* replaced 2026-09-27: the media now takes what is left of the column, not the whole window */
/* replaced 2026-09-27: a PDF fills the column's share too */
/* with the panel beside it the layer is wider, so the preview does not shrink; hidden further out */
/* THE LAYER SLIDES IN WITH A TRANSFORM, NOT WITH right (2026-09-30, his words with a screen recording: "al abrir el modal es instantaneo, y no tiene
   animacion"). Moving `right` lays out and paints the whole 1520 px layer on every frame, in the same moments the detail is being drawn; on a dense
   screen with the machine busy the 0.2 s were over before the second frame, and it appeared at once - filmed: 1 frame. A transform is moved by the
   compositor, frame by frame, whatever the page is doing. Closed, it sits at right 0 pushed out by its own width and its shadow (the width it has: 1000,
   1520 or the whole window); open, no transform at all - any transform would make the popovers inside it (position: fixed) take the layer as their frame. */
.watch_item_modal{ right: 0; transform: translateX(calc(100% + 40px)); }
.watch_item_modal.appearItem{ transform: none; }
/* ...and nothing else moves with it: its width must not change under the slide (it was "all .2s", and the width went from 1000
   to 1520 px mid-slide - "a la mitad de la animacion, salta"). The width it needs is set before it moves, from the answer
   (view/js/script.js vkDetailSlide), and kept while it slides out empty. "Ampliar"'s own widening keeps its transition
   (view/css/vk_notes.css .vkZoom-anim). */
#watch_item_modal.effect{ transition: transform .2s ease-in-out; }
#watch_item_modal.effect.appearItem{ transition: transform .2s ease-in-out, max-width .2s ease-in-out; }   /* open, another file may need the other width: that one moves, as before */
#watch_item_modal:not(.appearItem){ will-change: transform; }       /* its own layer, ready before the first slide (the first one jumped, filmed) - never while open */
.watch_item_modal.is-vkSide{ max-width: 1520px; }
.watch_item_modal:has(.vkDetail--side){ max-width: 1520px; }          /* his value, 2026-09-26 (it was 1280) */
.watch_item_modal .vkDetail--side > .button_actions{ right: calc(var(--vkVerW) + 16px); }
.watch_item_modal .vkDetail--side > .vkVer{
    flex: 0 0 var(--vkVerW); width: var(--vkVerW);
    padding: 72px 18px 20px;                    /* the layer's close button sits at the top */
    border-left: 1px solid var(--vk-line, #e4e3ea); background: var(--vk-surface, #ffffff);
    display: flex; flex-direction: column; gap: 14px;
}
/* As tall as the window and held at its top while the layer scrolls, its lists scrolling inside: a long list of
   comments or versions stretched the layer, and only the whole layer moved - "en los comentarios, si hay muchas
   versiones no hay scroll en esta zona para verlos todos. arregladlo" (2026-09-26). With tabs, the tab bar stays and
   the pane under it scrolls; without, the whole panel does. */
.watch_item_modal .vkDetail--side > .vkVer{
    position: sticky; top: 0; align-self: flex-start;
    height: 100vh; max-height: 100vh; overflow-y: auto; overscroll-behavior: contain;
}
.watch_item_modal .vkDetail--side > .vkVer.has-tabs{ overflow: hidden; }
.watch_item_modal .vkVer.has-tabs .vkSide-pane{ overflow-y: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px; }
.vkToast{ z-index: 10000001; }                  /* above the layer (z-index 9999999) */

/* ---------------------------------------------------------------- common parts */

.watch_item_modal .vkVer{
    font-family: 'Montserrat', sans-serif; font-size: 13px; line-height: 1.4;
    color: var(--vk-text, #16161a); text-align: left;
}
.watch_item_modal .vkVer *, .watch_item_modal .vkVer *::before, .watch_item_modal .vkVer *::after{ box-sizing: border-box; }
.watch_item_modal .vkVer button{ font-family: inherit; }
.watch_item_modal .vkVer p{
    width: auto; display: block; margin: 0; padding: 0;
    font-size: 12.5px; text-align: left;        /* the layer centres every paragraph */
}
.vkVer-ico{ flex-shrink: 0; }

.vkVer-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.watch_item_modal .vkVer .vkVer-title{
    flex-grow: 1; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0;
    font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.3;
    color: var(--vk-text, #16161a); text-transform: none; letter-spacing: 0;
}
.watch_item_modal .vkVer .vkVer-subtitle{
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 0;
    font-family: inherit; font-size: 14px; font-weight: 700; color: var(--vk-text, #16161a); text-transform: none;
}
.vkVer-count{
    padding: 2px 9px; border-radius: 99px;
    font-size: 12px; font-weight: 700; color: var(--vk-violet-4f1697, #4f1697); background: var(--vk-violet-tint, #f1e9fa);
}
.vkVer-count--grey{ color: var(--vk-soft-3c3b46, #3c3b46); background: var(--vk-field, #efeef4); }

.vkVer-views{ display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--vk-field, #efeef4); }
.vkDetail--side .vkVer-views{ width: 100%; }
.vkDetail--side .vkVer-viewBtn{ flex: 1 1 0; }
.watch_item_modal .vkVer-viewBtn{
    height: 34px; padding: 0 12px; border: 0; border-radius: 8px;
    background: transparent; color: var(--vk-soft-3c3b46, #3c3b46); font-size: 12px; font-weight: 600; cursor: pointer;
}
.watch_item_modal .vkVer-viewBtn:hover{ color: var(--vk-text, #16161a); }
.watch_item_modal .vkVer-viewBtn[aria-pressed="true"]{ background: var(--vk-fieldh-ffffff, #ffffff); color: var(--vk-text, #16161a); box-shadow: 0 1px 3px rgba(22, 22, 26, .14); }

.watch_item_modal .vkVer button:focus-visible,
.watch_item_modal .vkVer a:focus-visible,
.watch_item_modal .vkVer summary:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
.watch_item_modal .vkVer button.is-busy{ opacity: .6; cursor: progress; }

.watch_item_modal .vkVer-upload{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 14px; border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 12px;
    background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a); font-size: 13px; font-weight: 600; cursor: pointer;
}
.watch_item_modal .vkVer-upload:hover{ border-color: var(--vk-violet, #6e1fd1); color: var(--vk-violet-4f1697, #4f1697); }
.watch_item_modal .vkVer-upload--dark{ background: var(--vk-inv, #16161a); border-color: var(--vk-text, #16161a); color: #ffffff; }
.watch_item_modal .vkVer-upload--dark:hover{ background: var(--vk-invh, #2c2b33); border-color: var(--vk-text-2c2b33, #2c2b33); color: #ffffff; }
.watch_item_modal .vkVer-upload--add{ border: 2px dashed var(--vk-violet-line, #cdb7ee); background: transparent; color: var(--vk-violet-4f1697, #4f1697); }
.watch_item_modal .vkVer-upload--add:hover{ border-color: var(--vk-violet, #6e1fd1); background: var(--vk-violet-tint-faf7fe, #faf7fe); }

.watch_item_modal .vkVer .vkVer-drop{
    margin-top: auto; padding: 14px; border: 2px dashed var(--vk-violet-line, #cdb7ee); border-radius: 12px;
    font-size: 12px; line-height: 1.5; color: var(--vk-soft, #5f5e6b); text-align: center;
}
.watch_item_modal .vkVer .vkVer-none{ font-size: 12.5px; color: var(--vk-soft, #5f5e6b); }
.vkVer-sep{ height: 1px; background: var(--vk-fieldh-e4e3ea, #e4e3ea); }

.vkVer-badge{
    padding: 2px 7px; border-radius: 99px;
    font-size: 10.5px; font-weight: 700; line-height: 1.3; color: var(--vk-hl-ink, #ffffff); background: var(--vk-hl, #6e1fd1);
}

/* ---------------------------------------------------------------- A and C: the list */

.watch_item_modal .vkVer-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vkVer-item{
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px;
    border: 1px solid var(--vk-line, #e4e3ea); border-radius: 14px; background: var(--vk-surface, #ffffff);
}
.vkVer-row{ display: flex; align-items: center; gap: 6px; }
.vkVer-item.is-main{ border-color: var(--vk-violet-line, #cdb7ee); }
.vkVer-item.is-viewing{ padding: 5px; border: 2px solid var(--vk-violet, #6e1fd1); background: var(--vk-violet-tint-faf7fe, #faf7fe); }
.watch_item_modal .vkVer-open{
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
    padding: 0; border: 0; border-radius: 10px; background: none;
    color: inherit; text-align: left; cursor: pointer;
}
.vkVer-pic{ width: 48px; height: 48px; flex: 0 0 48px; border-radius: 9px; object-fit: cover; background: var(--vk-field, #efeef4); }
.vkVer-text{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vkVer-num{ display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--vk-soft, #5f5e6b); }
.vkVer-item.is-viewing .vkVer-num{ color: var(--vk-violet-4f1697, #4f1697); }
.vkVer-name{                                    /* up to two lines: long file names are the rule here */
    font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--vk-text, #16161a); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vkVer-meta{ font-size: 11.5px; color: var(--vk-soft, #5f5e6b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.watch_item_modal .vkVer-make{
    flex: 0 0 auto; height: 32px; padding: 0 10px; border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 9px;
    background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a); font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.watch_item_modal .vkVer-make:hover{ border-color: var(--vk-violet, #6e1fd1); color: var(--vk-violet-4f1697, #4f1697); }

.vkVer-more{ position: relative; flex: 0 0 auto; }
.vkVer-moreBtn{
    list-style: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 9px; background: var(--vk-field-f3f2f6, #f3f2f6); color: var(--vk-soft-3c3b46, #3c3b46); cursor: pointer;
}
.vkVer-moreBtn::-webkit-details-marker{ display: none; }
.vkVer-moreBtn::marker{ content: ''; }
.vkVer-moreBtn:hover, .vkVer-more[open] > .vkVer-moreBtn{ background: var(--vk-fieldh-e8e6ee, #e8e6ee); color: var(--vk-text, #16161a); }
.vkVer-menu{
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; padding: 6px;
    display: flex; flex-direction: column;
    background: var(--vk-surface, #ffffff); border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; box-shadow: 0 12px 30px rgba(22, 22, 26, .16);
}
.watch_item_modal .vkVer-menuItem{
    display: flex; align-items: center; height: 40px; padding: 0 12px; border: 0; border-radius: 8px;
    background: none; color: var(--vk-text, #16161a); font-size: 13px; font-weight: 500; text-align: left;
    text-decoration: none; white-space: nowrap; cursor: pointer;
}
.watch_item_modal .vkVer-menuItem:hover, .watch_item_modal .vkVer-menuItem:focus-visible{ background: var(--vk-field-f3f2f6, #f3f2f6); color: var(--vk-text, #16161a); text-decoration: none; }
.watch_item_modal .vkVer-menuItem--danger, .watch_item_modal .vkVer-menuItem--danger:hover{ color: var(--vk-err, #b3261e); }

/* ---------------------------------------------------------------- B: the strip */

.watch_item_modal .vkVer--B{
    clear: both; padding: 16px 24px 20px; background: var(--vk-field-f3f2f6, #f3f2f6);
    display: flex; flex-direction: column; gap: 14px;
}
.watch_item_modal .vkVer-compare{
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 9px; background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.watch_item_modal .vkVer-compare[aria-pressed="true"]{ background: var(--vk-inv, #16161a); border-color: var(--vk-text, #16161a); color: #ffffff; }
.watch_item_modal .vkVer-strip{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vkVer-tile{ width: 112px; }
.watch_item_modal .vkVer-tileBtn{
    width: 100%; display: flex; flex-direction: column; gap: 5px; padding: 5px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 12px; background: var(--vk-surface, #ffffff);
    color: inherit; text-align: left; cursor: pointer;
}
.watch_item_modal .vkVer-tileBtn:hover{ border-color: var(--vk-violet-line, #cdb7ee); }
.vkVer-tile.is-viewing .vkVer-tileBtn{ padding: 4px; border: 2px solid var(--vk-violet, #6e1fd1); background: var(--vk-violet-tint-faf7fe, #faf7fe); }
.vkVer-tilePic{ position: relative; display: block; height: 68px; border-radius: 8px; overflow: hidden; background: var(--vk-fieldh-e4e2ea, #e4e2ea); }
.vkVer-tilePic img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.vkVer-badge--pic{ position: absolute; left: 5px; top: 5px; display: inline-flex; align-items: center; gap: 3px; }
.vkVer-badge--pic .vkVer-ico{ width: 10px; height: 10px; fill: currentColor; }
.vkVer-tileNum{ font-size: 12px; font-weight: 700; }
.vkVer-tile.is-viewing .vkVer-tileNum{ color: var(--vk-violet-4f1697, #4f1697); }
.vkVer-tileMeta{ font-size: 11px; color: var(--vk-soft, #5f5e6b); }
.vkVer-tile--add{ display: flex; }
.watch_item_modal .vkVer-upload--tile{
    width: 100%; min-height: 113px; flex-direction: column; gap: 6px;
    border: 2px dashed var(--vk-violet-line, #cdb7ee); background: transparent; color: var(--vk-violet-4f1697, #4f1697); font-size: 12px; font-weight: 700;
}
.watch_item_modal .vkVer-upload--tile:hover{ border-color: var(--vk-violet, #6e1fd1); background: var(--vk-violet-tint-faf7fe, #faf7fe); }
.vkVer-bar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.watch_item_modal .vkVer .vkVer-barText{ font-size: 13px; color: var(--vk-soft-3c3b46, #3c3b46); }
.watch_item_modal .vkVer .vkVer-barText strong{ color: var(--vk-text, #16161a); }
.vkVer-barBtns{ display: flex; flex-wrap: wrap; gap: 8px; }
.watch_item_modal .vkVer-btn{
    display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px; background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.watch_item_modal .vkVer-btn:hover{ border-color: var(--vk-violet, #6e1fd1); color: var(--vk-violet-4f1697, #4f1697); text-decoration: none; }
.watch_item_modal .vkVer-btn--dark, .watch_item_modal .vkVer-btn--dark:hover{ background: var(--vk-inv, #16161a); border-color: var(--vk-text, #16161a); color: #ffffff; }
.watch_item_modal .vkVer-btn--icon{ width: 42px; padding: 0; justify-content: center; color: var(--vk-err, #b3261e); }
.watch_item_modal .vkVer-btn--icon:hover{ color: var(--vk-err, #b3261e); border-color: var(--vk-err, #b3261e); }

/* the comparison, over the preview */
.watch_item_modal .casing .vkCmp{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 5; overflow: hidden; background: var(--vk-fieldh-eaeaea, #eaeaea); user-select: none; }
.vkCmp img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.vkCmp-top{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.vkCmp-line{ position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ffffff; box-shadow: 0 0 0 1px rgba(22, 22, 26, .15); pointer-events: none; }
.vkCmp-knob{
    position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #ffffff; color: #16161a; box-shadow: 0 4px 14px rgba(22, 22, 26, .25);
}
.vkCmp:focus-within .vkCmp-knob{ outline: 3px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
.vkCmp-tag{
    position: absolute; bottom: 14px; padding: 6px 11px; border-radius: 99px; background: #ffffff;
    font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: #16161a; pointer-events: none;
}
.vkCmp-tag--a{ left: 14px; color: var(--vk-violet-4f1697, #4f1697); }
.vkCmp-tag--b{ right: 14px; }
.vkCmp-range{
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0;
    opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
}

/* ---------------------------------------------------------------- the grid's badge */

.containernews .vkCardVer{
    position: absolute; right: 10px; top: 10px; z-index: 3;
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px;
    background: var(--vk-hl, #6e1fd1); color: var(--vk-hl-ink, #ffffff); box-shadow: 0 2px 6px rgba(22, 22, 26, .2);
    font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2;
    pointer-events: none; white-space: nowrap;
}

/* WHETHER A FILE CARRIES COMMENTS (2026-09-28, his ask): "que en las cajas de los elementos del body salga
   si tiene comentarios, como haces con las versiones". The same badge, under the versions one when a file
   has both, and in a quieter colour when nothing is left pending (his queue item 27's states). */
.containernews .vkCardNotes{
    position: absolute; right: 10px; top: 10px; z-index: 3;
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px;
    background: var(--vk-inv, #16161a); color: #ffffff; box-shadow: 0 2px 6px rgba(22, 22, 26, .2);
    font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2;
    pointer-events: none; white-space: nowrap;
}
.containernews .vkCardVer ~ .vkCardNotes{ top: 40px; }
.containernews .vkCardNotes.is-done{ background: #1f9d55; }

/* ---------------------------------------------------------------- narrower screens */

@media (max-width: 1199px){
    .watch_item_modal .vkDetail--side{ --vkVerW: 340px; }
}
/* style.css's phone layout (same 800px) pushes the preview down with a margin and lifts the close
   button above it: a block, not a flex box, lets that margin collapse as it always did */
@media (max-width: 800px){
    .watch_item_modal .vkDetail--side{ display: block; }
    .watch_item_modal .vkDetail--side > .casing{ width: 100%; }
    .watch_item_modal .vkDetail--side > .vkVer{ width: auto; padding: 18px 16px 20px; border-left: 0; border-top: 1px solid var(--vk-line, #e4e3ea); }
    .watch_item_modal .vkDetail--side > .vkVer, .watch_item_modal .vkDetail--side > .vkVer.has-tabs{ position: static; height: auto; max-height: none; overflow: visible; }
    .watch_item_modal .vkVer.has-tabs .vkSide-pane{ overflow: visible; margin-right: 0; padding-right: 0; }
    .watch_item_modal .vkDetail--side > .button_actions{ right: 16px; }
    .watch_item_modal .vkVer--B{ padding: 14px 16px 18px; }
    .vkVer-tile{ width: calc((100% - 20px) / 3); }
    .vkVer-bar{ flex-direction: column; align-items: stretch; }
    /* THE ✕ IN THE TIRA (2026-10-13, his words: "en el modo tira, el boton de cerrar el modal desaparec, añadelo"): style.css gives the stage 65 px of top margin and lifts the ✕ - and
       view/css/vk_bell.css the bell beside it - 52 px above it. That margin collapses through the side layout's block (above), so the whole detail starts 65 px down: the ✕ shows at 13 px and the row
       of round buttons under it. The Tira's column (below, flex) collapses nothing: its box started at 0, the ✕ and the bell at -52 px - off the screen - and the row of round buttons rose over where
       they would be (measured at 390 px, public web and panel). Here the Tira's detail takes those 65 px itself, as the side layout's does, and the ✕ and the bell stand at 13 px. */
    .watch_item_modal .vkDetail--strip{ margin-top: 65px; }
    .watch_item_modal .vkDetail--strip > .casing{ margin-top: 0; }
    .watch_item_modal:has(.vkDetail--strip) .modal_accept, .watch_item_modal:has(.vkDetail--strip) .vkBellDetail{ top: 13px; }
}

/* ---------------------------------------------------------------- a file dropped onto another
   (his point 5, 2026-09-26; view/js/vk_dropinto.js). The card it would join, framed; the dragged card over the
   others, and shrunk around the pointer over the lit one so the frame shows; the note by the pointer, whose bar
   fills during the 0.8 s held on a card's middle third; the toast with "Deshacer". In the app's colour (--vk-main,
   view/custom/styles_custom.php). */
.containernews .capsaitem.ui-draggable-dragging{ z-index: 1000; }   /* over every card's own content (.onToppe 99, the frame 120) */
.containernews .capsaitem.vkDrop-carry{ transform: scale(.42); opacity: .92 !important; transition: transform .12s ease-out; }
.vkDrop-mark{
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 120; pointer-events: none;   /* over .onToppe (99) */
    border: 3px solid var(--vk-main, #0f52ff); border-radius: 8px;
    background: rgba(var(--vk-surface-rgb, 255, 255, 255), .45);
    box-shadow: 0 0 0 4px rgba(var(--vk-surface-rgb, 255, 255, 255), .9), 0 10px 26px rgba(0, 0, 0, .18);
    animation: vkDropIn .15s ease-out;
}
@keyframes vkDropIn{ from{ opacity: 0; } to{ opacity: 1; } }
.vkDropTip{
    position: fixed; left: 0; top: 0; z-index: 100002; pointer-events: none; display: none;
    max-width: 280px; padding: 8px 12px 9px; border-radius: 10px;
    background: var(--vk-main, #0f52ff); color: var(--vk-brand-ink, #ffffff);
    font: 600 12px/1.35 'Montserrat', sans-serif; overflow-wrap: anywhere;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}
.vkDropTip.is-arming, .vkDropTip.is-on{ display: block; }
.vkDropTip.is-arming{ opacity: .82; }
.vkDropTip-text{ display: block; }
.vkDropTip-bar{ display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.vkDropTip-bar i{ display: block; height: 100%; background: #ffffff; transform-origin: left center; transform: scaleX(0); }
.vkDropTip.is-arming .vkDropTip-bar i{ animation: vkDropWait .8s linear forwards; }
.vkDropTip.is-on .vkDropTip-bar i{ transform: none; }
@keyframes vkDropWait{ to{ transform: scaleX(1); } }
.containernews .capsaitem.vkDrop-going{ opacity: 0 !important; visibility: hidden; }
.containernews .capsaitem.vkDrop-joined{ animation: vkDropJoined 1.4s ease-out; }
@keyframes vkDropJoined{
    0%, 35%{ box-shadow: 0 0 0 4px var(--vk-main, #0f52ff); }
    100%{ box-shadow: 0 0 0 4px rgba(0, 0, 0, 0); }
}
html.vkDrop-on .containernews{ opacity: 1 !important; }      /* the selection's handle dims the grid */
.vkDropToast{ display: flex; align-items: center; gap: 14px; }
.vkDropToast.is-on{ pointer-events: auto; }
.vkDropToast-undo{
    flex: none; border: 0; border-radius: 8px; padding: 6px 12px; cursor: pointer;
    background: var(--vk-main, #0f52ff); color: var(--vk-brand-ink, #ffffff); font: 700 12px/1.2 'Montserrat', sans-serif;
}
.vkDropToast-undo:hover{ filter: brightness(1.15); }

/* ---------------------------------------------------------------- where a carried card would land (brief BJ, 2026-10-09; view/js/vk_dropinto.js)
   A bar between two cards, in the app's colour with a ring of the page's surface so it reads over any picture, light or dark; red, with a line that says why, where the card cannot go. The cards do not move
   while it is carried: the card's own place is outlined (Packery's placeholder) so it is seen where it came from. */
.vkOrderBar{ position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 100001; pointer-events: none; display: none; transition: transform .09s ease-out, height .09s ease-out; }
.vkOrderBar.is-on{ display: block; }
.vkOrderBar.is-fresh{ transition: none; }
.vkOrderBar-line{
    position: absolute; left: -2px; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--vk-main, #0f52ff);
    box-shadow: 0 0 0 2px rgba(var(--vk-surface-rgb, 255, 255, 255), .92), 0 3px 14px rgba(0, 0, 0, .28);
}
.vkOrderBar-line::before, .vkOrderBar-line::after{
    content: ''; position: absolute; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: inherit;
    box-shadow: 0 0 0 2px rgba(var(--vk-surface-rgb, 255, 255, 255), .92);
}
.vkOrderBar-line::before{ top: -6px; }
.vkOrderBar-line::after{ bottom: -6px; }
.vkOrderBar.is-no .vkOrderBar-line{ background: var(--vk-err, #b3261e); }
.vkOrderBar-chip{
    display: none; position: absolute; left: 12px; top: 10px; white-space: nowrap; padding: 6px 11px; border-radius: 9px; background: var(--vk-err, #b3261e); color: #ffffff;
    font: 600 12px/1.3 'Montserrat', sans-serif; box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.vkOrderBar.is-no .vkOrderBar-chip{ display: block; }
.vkOrderBar.is-left .vkOrderBar-chip{ left: auto; right: 12px; }
.containernews .conty > .packery-drop-placeholder{
    box-sizing: border-box; border: 2px dashed var(--vk-main, #0f52ff); border-radius: 8px; background: rgba(var(--vk-surface-rgb, 255, 255, 255), .35); opacity: .55; pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
    .vkOrderBar{ transition: none; }
}

/* ---------------------------------------------------------------- versions and comments, in tabs (2026-09-26)
   core/vk/versions.php vk_versions_side_tabs(), view/js/vk_notes.js. The tab says "Versiones N": the title below it
   goes. Folded, the panel is a strip and the preview takes the room. */
.watch_item_modal .vkVer.has-tabs .vkVer-title{ display: none; }
.vkSide-bar{ display: flex; align-items: center; gap: 8px; }
.vkSide-tabs{ flex: 1 1 auto; display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--vk-field, #efeef4); }
.watch_item_modal .vkSide-tab{
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--vk-soft-3c3b46, #3c3b46);
}
.watch_item_modal .vkSide-tab[aria-selected="true"]{ background: var(--vk-fieldh-ffffff, #ffffff); color: var(--vk-text, #16161a); box-shadow: 0 1px 3px rgba(22, 22, 26, .12); }
.watch_item_modal .vkSide-tab:focus-visible, .watch_item_modal .vkSide-fold:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
.watch_item_modal .vkSide-fold{
    flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 10px;
    background: var(--vk-surface, #ffffff); color: var(--vk-soft-3c3b46, #3c3b46); cursor: pointer;
}
.watch_item_modal .vkSide-fold:hover{ border-color: var(--vk-violet, #6e1fd1); color: var(--vk-violet-4f1697, #4f1697); }
.watch_item_modal .vkSide-fold i{ transition: transform .2s ease; }
.vkSide-pane{ display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; min-height: 0; }
.vkSide-pane[hidden]{ display: none; }
.vkNoteList{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.watch_item_modal .vkNoteList-item{
    width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; background: var(--vk-surface, #ffffff); cursor: pointer;
    font-family: 'Montserrat', sans-serif; text-align: left;
}
.watch_item_modal .vkNoteList-item:hover, .watch_item_modal .vkNoteList-item.is-open{ border-color: var(--vk-violet, #6e1fd1); background: var(--vk-violet-tint-faf7fe, #faf7fe); }
.watch_item_modal .vkNoteList-item:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
.vkNoteList-num{
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--vk-hl, #6e1fd1); color: var(--vk-hl-ink, #ffffff); font-size: 11px; font-weight: 700;
}
.vkNoteList-text{ min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vkNoteList-body{
    font-size: 12.5px; line-height: 1.45; color: var(--vk-text, #16161a); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.vkNoteList-meta{ font-size: 11.5px; color: var(--vk-soft, #5f5e6b); }
.watch_item_modal .vkNoteList-none{ font-size: 12.5px; color: var(--vk-soft, #5f5e6b); }
.watch_item_modal .vkVer .vkNoteList-none[hidden]{ display: none; }        /* the panel shows every p as a block */
/* FOLDED BECAUSE SOMEBODY FOLDED IT - him, or the magnifier the once (view/js/vk_pdf.js foldTo). It
   was written here as a rule on the magnified layer for a few hours on 2026-09-28, and that took the
   panel away from him: his click opened it and the stylesheet shut it again on the spot - "cuando esta
   la lupa activa, no se puede abrir el sidebar, se cierra automaticamente, no debe". One class, set by
   whoever decides, and his click always wins. */
.watch_item_modal .vkDetail--side.is-folded{ --vkVerW: 56px; }
.watch_item_modal .vkDetail--side.is-folded > .vkVer{ padding-left: 9px; padding-right: 9px; overflow: hidden; }
.watch_item_modal .vkDetail--side.is-folded .vkSide-tabs,
.watch_item_modal .vkDetail--side.is-folded .vkSide-pane{ display: none; }
.watch_item_modal .vkDetail--side.is-folded .vkSide-fold i{ transform: rotate(180deg); }
/* THE WHOLE WIDTH OF THE PAGE WHILE IT IS MAGNIFIED, which the 1520 above was holding back on a wide
   screen: measured on a 2200 px window, the layer stayed 1520 and left 680 px of page empty beside it.
   His two asks, both kept: 1520 is the layer's width (2026-09-26), and magnified it takes the page. */
.watch_item_modal.is-vkPdfWide:has(.vkDetail--side){ max-width: none; }
/* Tira: the same tabs under the preview, no fold (2026-09-27) - sized to their words, the pane as tall as what it
   holds (the layer scrolls), the comments in columns across the width */
.watch_item_modal .vkVer--B .vkSide-tabs{ flex: 0 1 auto; }
.watch_item_modal .vkVer--B .vkSide-tab{ flex: 0 0 auto; padding: 0 16px; }
.watch_item_modal .vkVer--B.has-tabs .vkSide-pane{ overflow: visible; margin-right: 0; padding-right: 0; }
.watch_item_modal .vkVer--B .vkNoteList{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 800px){
    .watch_item_modal .vkSide-fold{ display: none; }                  /* the panel is under the preview there */
    .watch_item_modal .vkDetail--side.is-folded{ --vkVerW: 340px; }
    .watch_item_modal .vkDetail--side.is-folded .vkSide-tabs, .watch_item_modal .vkDetail--side.is-folded .vkSide-pane:not([hidden]){ display: flex; }
}

/* ---------------------------------------------------------------------------------------------
   THE FILE'S INFORMATION AND OPTIONS, IN A POPOVER (2026-09-27)

   The block used to sit below the preview and had to be scrolled to. It is the same element -
   view/js/vk_iteminfo.js moves it in and out - so it is hidden where it used to be and shown
   inside the popover. Only in the panel's detail: the public web's copy has no button and keeps
   its block where it is.
   --------------------------------------------------------------------------------------------- */
.watch_item_modal .infoItem.vkInfo-parked{ display: none !important; }
.vkInfoHome{ display: none; }

/* not the trash button's red */
.watch_item_modal .vkVer-btn--icon.vkVer-info{ color: var(--vk-soft-3c3b46, #3c3b46); }
.watch_item_modal .vkVer-btn--icon.vkVer-info:hover,
.watch_item_modal .vkVer-btn--icon.vkVer-info[aria-expanded="true"]{ color: var(--vk-violet-4f1697, #4f1697); border-color: var(--vk-violet, #6e1fd1); }
.vkVer-head .vkVer-info{ flex: 0 0 auto; }

.vkInfoPop{
    /* over the detail layer itself, which sits at 9999999 (view/css/style.css) */
    position: fixed; z-index: 10000001; width: min(420px, calc(100vw - 24px));
    max-height: min(70vh, 560px); overflow: auto;
    background: var(--vk-surface, #ffffff); border: 1px solid var(--vk-line-e4e3ec, #e4e3ec); border-radius: 14px;
    box-shadow: 0 18px 48px rgba(22, 22, 26, .18);
}
.vkInfoPop[hidden]{ display: none; }
.vkInfoPop-body{ padding: 16px 18px; }
.vkInfoPop-arrow{
    position: absolute; top: -7px; width: 12px; height: 12px; margin-left: -6px;
    background: var(--vk-surface, #ffffff); border-left: 1px solid var(--vk-line-e4e3ec, #e4e3ec); border-top: 1px solid var(--vk-line-e4e3ec, #e4e3ec);
    transform: rotate(45deg);
}
/* inside the popover the block is a plain column: no fixed width, no 90px tail */
.vkInfoPop .infoItem{
    width: auto !important; min-width: 0 !important; max-width: none !important;
    margin: 0 !important; display: block;
}
.vkInfoPop .infoItem .checkboxToBig{ display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 13px; cursor: pointer; }
.vkInfoPop .infoItem .checkboxToBig input{ margin: 0; }
.vkInfoPop .infoItem ul{ margin: 4px 0 0; padding: 12px 14px; list-style: none; background: var(--vk-field-f6f5fa, #f6f5fa); border-radius: 10px; }
.vkInfoPop .infoItem ul li{ font-size: 13px; color: var(--vk-soft-3c3b46, #3c3b46); padding: 3px 0; border: 0; }

/* The detail layer stretches every direct child of its own (".watch_item_modal > div" sets
   min-height:100vh, which beats a max-height), and the popover is one now that it lives inside the
   layer - it has to, or the checkboxes' handlers stop matching. Measured 2026-09-27: without this
   the popover was 950px tall and hung out of the window. */
.watch_item_modal > .vkInfoPop{
    position: fixed; min-height: 0; max-height: min(70vh, 560px); overflow: auto;
    width: min(420px, calc(100vw - 24px)); padding: 0;
}

/* ---------------------------------------------------------------------------------------------
   TIRA, WITHOUT SCROLL (2026-09-27, his ask)

   The media area claimed the whole window on its own (min-height:100vh), so the strip, its bar and
   the view tabs all began below the fold: measured, 1274px of content in a 950px window - 324 to
   scroll, every time, to reach the very controls the view is for.

   Now the layer is a column exactly one window tall: the media takes what is left after the strip,
   and the strip keeps its natural height under it. Nothing else in that wrapper has any - the close
   button is absolute, the form and the (parked) info block are empty - so the two of them share the
   window between them. The media shrinks with object-fit, so nothing is cropped.
   --------------------------------------------------------------------------------------------- */
.watch_item_modal > div:not(.vkLayerPop):has(.vkDetail--strip){
    height: 100vh; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.watch_item_modal > div:not(.vkLayerPop):has(.vkDetail--strip) > .vkDetail--strip{
    flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
}
.watch_item_modal .vkDetail--strip > .casing{
    flex: 1 1 0; min-height: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.watch_item_modal .vkDetail--strip > .casing:not(.fullHeight) .mainImg{
    max-height: 100%; max-width: calc(100% - 160px); object-fit: contain;
}
.watch_item_modal .vkDetail--strip > .casing .vkPdf{ height: 100%; }
/* the air he asked for between the file and its strip */
.watch_item_modal > div:not(.vkLayerPop):has(.vkDetail--strip) > .vkVer{ flex: 0 0 auto; margin-top: 16px; }
/* opened above the button (no room below): the arrow turns over to point down at it */
.vkInfoPop.is-above .vkInfoPop-arrow{
    top: auto; bottom: -7px;
    border-left: 0; border-top: 0;
    border-right: 1px solid var(--vk-line-e4e3ec, #e4e3ec); border-bottom: 1px solid var(--vk-line-e4e3ec, #e4e3ec);
}

/* ---------------------------------------------------------------------------------------------
   EXPAND IN TIRA KEEPS THE STRIP (2026-09-28)

   "Expand" adds .fullHeight, and style.css forces min-height:100vh !important on the casing. In
   Historial and Fuentes that is the point: the picture takes the window. In Tira the layer is a
   column exactly one window tall, so a 100vh casing inside the media slot overflowed it and sat
   on top of the strip - measured 2026-09-28 at 1600x950: casing 950 tall inside a .vkDetail--strip
   of 610, with the strip still at top 626 underneath, which is what he photographed.

   Here Expand means the picture uses the whole media area instead - the 160px inset and the height
   cap go, the column does not. Nothing overlaps and nothing has to be scrolled to.
   --------------------------------------------------------------------------------------------- */
.watch_item_modal .vkDetail--strip > .casing.fullHeight{
    min-height: 0 !important; flex: 1 1 0; max-height: 100%; overflow: hidden;
}
.watch_item_modal .vkDetail--strip > .casing.fullHeight .mainImg{
    max-height: 100% !important; max-width: 100% !important; object-fit: contain;
}
.watch_item_modal .vkDetail--strip > .casing.fullHeight video.mainImg{ max-height: 100% !important; }
.watch_item_modal .vkDetail--strip > .casing.fullHeight .vkPdf{ height: 100%; }

/* ---------------------------------------------------------------------------------------------
   DOWNLOAD SOME PAGES (2026-09-28, his queue item 7)

   Same shape as the information popover, and the same .vkLayerPop so a file's detail is never
   written into it. While it is open the pages in the viewer can be ticked, and a ticked one is
   marked in the accent blue - the field and the ticks always say the same thing.
   --------------------------------------------------------------------------------------------- */
.vkPagesPop{
    position: fixed; z-index: 10000050; width: min(320px, calc(100vw - 24px));
    background: var(--vk-surface, #fff); border: 1px solid var(--vk-line-e4e3ec, #e4e3ec); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(22, 22, 26, .18);
}
.vkPagesPop[hidden]{ display: none; }
.watch_item_modal > .vkPagesPop{ position: fixed; min-height: 0; padding: 0; }
.vkPagesPop-arrow{
    position: absolute; top: -7px; width: 12px; height: 12px; background: var(--vk-surface, #fff);
    border-left: 1px solid var(--vk-line-e4e3ec, #e4e3ec); border-top: 1px solid var(--vk-line-e4e3ec, #e4e3ec);
    transform: rotate(45deg); margin-left: -6px;
}
.vkPagesPop.is-above .vkPagesPop-arrow{
    top: auto; bottom: -7px; border-left: 0; border-top: 0;
    border-right: 1px solid var(--vk-line-e4e3ec, #e4e3ec); border-bottom: 1px solid var(--vk-line-e4e3ec, #e4e3ec);
}
.vkPagesPop-body{ padding: 15px 16px; }
.vkPagesPop-head{ margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--vk-text, #16161a); }
.vkPagesPop-head .vkPages-total{ font-weight: 400; color: var(--vk-soft-6b6a75, #6b6a75); }
.vkPagesPop .vkPages-spec{
    width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 14px;
    border: 1px solid var(--vk-line-d9d8e2, #d9d8e2); border-radius: 9px; color: var(--vk-text, #16161a); background: var(--vk-surface, #fff);
}
.vkPagesPop .vkPages-spec:focus{ outline: 0; border-color: var(--vk-brand-fg, #0f52ff); box-shadow: 0 0 0 3px rgba(var(--vk-brand-rgb, 15, 82, 255), .14); }   /* the account's colour (brief I) */
.vkPagesPop .vkPages-hint{ margin: 7px 0 0; font-size: 11px; line-height: 1.4; color: var(--vk-soft-85848f, #85848f); }
.vkPagesPop .vkPages-count{ margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--vk-brand-fg, #0f52ff); }
.vkPagesPop-acts{ display: flex; gap: 8px; margin-top: 12px; }
.vkPagesPop-acts button{
    flex: 1 1 auto; padding: 9px 12px; font-size: 13px; font-weight: 600;
    border-radius: 9px; border: 1px solid var(--vk-line-d9d8e2, #d9d8e2); background: var(--vk-surface, #fff); color: var(--vk-soft-3c3b46, #3c3b46); cursor: pointer;
}
.vkPagesPop-acts .vkPages-go{ background: var(--vk-brand, #0f52ff); border-color: var(--vk-brand, #0f52ff); color: var(--vk-brand-ink, #fff); }
.vkPagesPop-acts .vkPages-go[disabled]{ opacity: .45; cursor: default; }
.vkPagesPop-acts .vkPages-go.is-busy{ opacity: .6; }

/* the viewer, while it is open */
.watch_item_modal .vkPdf.is-picking .vkPdf-page{ cursor: pointer; position: relative; }
.watch_item_modal .vkPdf.is-picking .vkPdf-page::after{
    content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: 4px;
    pointer-events: none;
}
.watch_item_modal .vkPdf.is-picking .vkPdf-page:hover::after{ border-color: rgba(var(--vk-brand-rgb, 15, 82, 255), .35); }
.watch_item_modal .vkPdf.is-picking .vkPdf-page.is-picked::after{
    border-color: var(--vk-brand, #0f52ff); background: rgba(var(--vk-brand-rgb, 15, 82, 255), .10);
}
.watch_item_modal .vkPdf.is-picking .vkPdf-page.is-picked .vkPdf-num{
    background: var(--vk-brand, #0f52ff); color: var(--vk-brand-ink, #fff);
}

/* ---------------------------------------------------------------------------------------------
   A FILE OPENED IN ITS PROGRAM, AND WHAT THE PANEL SAYS WHILE IT WAITS (2026-09-30, view/js/vk_edit.js)

   One line under the panel's title: "Abriendo en Photoshop...", "Guardando en Photoshop... 412 MB", "Creando la
   versión...", and, quietly, "Abierto en Photoshop. Al guardar, aparecerá aquí como versión nueva." while the edit is
   active. Busy states turn a ring (still, for anyone who asked for less motion); a failure is red.
   --------------------------------------------------------------------------------------------- */
.watch_item_modal .vkVer-edit{
    display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px;
    border-radius: 11px; background: var(--vk-field-f6f5fa, #f6f5fa); color: var(--vk-soft-3c3b46, #3c3b46); font-size: 12.5px; line-height: 1.4;
}
.watch_item_modal .vkVer-edit.is-busy{ background: var(--vk-violet-tint-faf7fe, #faf7fe); color: var(--vk-violet-4f1697, #4f1697); font-weight: 600; }
.watch_item_modal .vkVer-edit.is-quiet{ padding: 2px 2px; background: none; color: var(--vk-soft, #5f5e6b); font-size: 12px; }
.watch_item_modal .vkVer-edit.is-bad{ background: var(--vk-err-tint-fdeeee, #fdeeee); color: var(--vk-err, #b3261e); }
.vkVer-editIco{ flex: 0 0 14px; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; box-sizing: border-box; }
.vkVer-edit.is-busy .vkVer-editIco{ border: 2px solid var(--vk-violet-line, #cdb7ee); border-top-color: var(--vk-violet, #6e1fd1); animation: vkVerSpin .8s linear infinite; }
.vkVer-edit.is-quiet .vkVer-editIco{ width: 8px; height: 8px; flex-basis: 8px; margin: 5px 3px 0 3px; background: #1f9d55; }
.vkVer-edit.is-bad .vkVer-editIco{ background: #b3261e; }
.vkVer-editTxt{ min-width: 0; overflow-wrap: anywhere; }
@keyframes vkVerSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
    .vkVer-edit.is-busy .vkVer-editIco{ animation: none; border-color: var(--vk-violet, #6e1fd1); }
}
/* the button that was clicked, while the server copies the file */
.watch_item_modal .vkEditOpen.is-busy{ opacity: .7; cursor: progress; pointer-events: none; }

/* ---------------------------------------------------------------------------------------------
   "¿QUÉ CAMBIÓ?": THE NOTE UNDER EACH VERSION (2026-09-30, core/vk/versions.php, view/js/vk_versions.js)
   --------------------------------------------------------------------------------------------- */
.vkVer-note{ min-width: 0; }
.watch_item_modal .vkVer-noteBtn{
    display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 3px 6px; border: 0; border-radius: 8px;
    background: transparent; color: var(--vk-soft-3c3b46, #3c3b46); font-size: 12px; line-height: 1.4; text-align: left; cursor: pointer;
}
.watch_item_modal .vkVer-noteBtn:hover{ background: var(--vk-field-f3f2f6, #f3f2f6); color: var(--vk-text, #16161a); }
.watch_item_modal .vkVer-noteBtn.is-empty{ color: var(--vk-soft-85848f, #85848f); }
.watch_item_modal .vkVer-noteBtn .vkVer-ico{ width: 13px; height: 13px; margin-top: 2px; }
.vkVer-noteTxt{ min-width: 0; overflow-wrap: anywhere; }
.watch_item_modal .vkVer p.vkVer-noteRead{ padding: 2px 6px; font-size: 12px; line-height: 1.4; color: var(--vk-soft-3c3b46, #3c3b46); overflow-wrap: anywhere; }
.watch_item_modal .vkVer-noteInput{
    display: block; width: 100%; height: 34px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--vk-violet, #6e1fd1); border-radius: 8px; background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    font-family: inherit; font-size: 12.5px;
}
.watch_item_modal .vkVer-noteInput:focus{ outline: 2px solid rgba(var(--vk-violet-rgb, 110, 31, 209), .25); outline-offset: 1px; }
/* Tira: under the bar of the version on screen */
.watch_item_modal .vkVer-note--bar{ max-width: 640px; }
/* ---------------------------------------------------------------------------------------------
   A FILE'S WEB ADDRESS (brief BW, 2026-10-12; core/vk/file_web.php, view/js/vk_siteurl.js)
   The row «Dirección web» of the information list (inside the popover, under the list), the round «i» a person without the versions block gets in the column, and the globe that opens
   the address - in the detail's column (.downloadbnts, dressed by style.css like its neighbours) and on a card's row (.buttonscategory, style.css).
   --------------------------------------------------------------------------------------------- */
.infoItem .vkSite{ margin: 10px 0 0; padding: 12px 14px; background: var(--vk-field-f6f5fa, #f6f5fa); border-radius: 10px; font-size: 13px; color: var(--vk-soft-3c3b46, #3c3b46); }
.infoItem .vkSite-row{ display: flex; align-items: center; gap: 8px; min-width: 0; }
.infoItem .vkSite-label{ flex: 0 0 auto; }
.infoItem .vkSite-val{ display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.infoItem .vkSite-link{ min-width: 0; overflow-wrap: anywhere; color: var(--vk-violet-4f1697, #4f1697); font-weight: 600; text-decoration: none; }
.infoItem .vkSite-link:hover{ text-decoration: underline; }
.infoItem .vkSite-link i{ font-size: 10px; margin-left: 2px; }
.infoItem .vkSite-add, .infoItem .vkSite-edit{
    display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--vk-line-d9d8e2, #d9d8e2); border-radius: 999px; background: var(--vk-surface, #ffffff);
    color: var(--vk-text, #16161a); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
}
.infoItem .vkSite-add{ height: 26px; padding: 0 12px; }
.infoItem .vkSite-edit{ width: 26px; height: 26px; padding: 0; flex: 0 0 auto; }
.infoItem .vkSite-edit i{ font-size: 11px; }
.infoItem .vkSite-add:hover, .infoItem .vkSite-edit:hover{ border-color: var(--vk-violet, #6e1fd1); color: var(--vk-violet-4f1697, #4f1697); }
.infoItem .vkSite-add:focus-visible, .infoItem .vkSite-edit:focus-visible{ outline: 2px solid rgba(var(--vk-violet-rgb, 110, 31, 209), .35); outline-offset: 1px; }
.infoItem .vkSite-input{
    display: block; flex: 1 1 auto; width: 100%; min-width: 0; height: 32px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--vk-violet, #6e1fd1); border-radius: 8px; background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a); font-family: inherit; font-size: 12.5px;
}
.infoItem .vkSite-input:focus{ outline: 2px solid rgba(var(--vk-violet-rgb, 110, 31, 209), .25); outline-offset: 1px; }
/* the page's own rule for a paragraph (centred, padded) and a pressed [hidden] that display:inline-flex would win over: both put right here */
.infoItem .vkSite p.vkSite-hint, .infoItem .vkSite p.vkSite-err{ margin: 6px 0 0; padding: 0; text-align: left; line-height: 1.4; }
.infoItem .vkSite p.vkSite-hint{ font-size: 11.5px; color: var(--vk-soft-6b6a76, #6b6a76); }
.infoItem .vkSite p.vkSite-err{ font-size: 12px; font-weight: 600; color: var(--vk-err, #b3261e); }
.infoItem .vkSite [hidden]{ display: none !important; }
.vkInfoPop .infoItem .vkSite .checkboxToBig{ margin: 10px 0 0; }
/* «Pendiente de revisión» (brief BW2, 2026-10-12): what a person on the web sent for the administrator's review and nobody has judged - under the row, in the amber the app uses for "waiting"
   (the colours' window, the bell's decisions), with the button that takes it back */
.infoItem .vkSite-pend{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 0; padding: 8px 12px; border: 1px solid var(--vk-warn-line-f0d9a3, #f0d9a3); border-radius: 10px; background: var(--vk-warn-tint-fff8e6, #fff8e6); font-size: 12px; line-height: 1.4; color: var(--vk-warn-5a4300, #5a4300); }
.infoItem .vkSite-pendTitle{ font-weight: 700; color: var(--vk-warn-3d2d00, #3d2d00); }
.infoItem .vkSite-pendNote{ flex: 1 1 auto; min-width: 0; }
.infoItem .vkSite-withdraw{ margin-left: auto; height: 26px; padding: 0 12px; border: 1px solid var(--vk-warn-8a5a00, #8a5a00); border-radius: 999px; background: var(--vk-surface, #ffffff); color: var(--vk-warn-5a3a00, #5a3a00); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; }
.infoItem .vkSite-withdraw:hover:not(:disabled){ background: var(--vk-warn-tint-fff0cf, #fff0cf); }
.infoItem .vkSite-withdraw:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
.infoItem .vkSite-withdraw:disabled{ opacity: .55; cursor: default; }
/* the round «i» of someone who has no versions block to reach the list from: pressed, it takes the violet a pressed key takes */
.watch_item_modal .downloadbnts.vkSite-info[aria-expanded="true"]{ background: var(--vk-violet, #6e1fd1); }
/* the globe: a link to another site, kept the colour of its neighbours (no underline, no visited colour) */
.watch_item_modal a.downloadbnts.vkSiteOpen, .watch_item_modal a.downloadbnts.vkSiteOpen:visited{ color: #fff; text-decoration: none; }