/* Comments pinned on a picture (view/js/vk_notes.js) and a picture at full size (view/js/vk_zoom.js),
   2026-09-26. The look of the rest: Montserrat, white cards, violet. The detail layer sits at
   z-index 9999999, so a note goes above it; the full-size view is inside it, over its picture. */

/* ---------------------------------------------------------------- the pins */

.vkNotes-layer{ position: absolute; z-index: 20; pointer-events: none; }
.vkNotes-layer[hidden]{ display: none; }
.vkNotes-layer.is-adding{ pointer-events: auto; cursor: crosshair; }
.vkPin{
    position: absolute; transform: translate(-50%, -50%);
    width: 28px; height: 28px; padding: 0;
    border: 2px solid var(--vk-surface, #ffffff); border-radius: 50%; background: var(--vk-hl, #6e1fd1); color: var(--vk-hl-ink, #ffffff);
    font: 700 12px/24px 'Montserrat', sans-serif; text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: pointer; pointer-events: auto;
    transition: transform .12s ease, background-color .12s ease;
}
.vkPin:hover, .vkPin.is-open{ background: #4f1697; transform: translate(-50%, -50%) scale(1.15); }
.vkPin.is-mine{ cursor: grab; }
.vkPin.is-mine:active{ cursor: grabbing; }
.vkPin--new{ background: var(--vk-inv, #16161a); cursor: default; }
.vkPin:focus-visible{ outline: 2px solid var(--vk-surface, #ffffff); outline-offset: 2px; }

/* No bar while "Comentar" places a comment, nor while "Ampliar" is armed: his words, 2026-09-26, "elimina este
   banner", and for the magnifier's, "ademas que quite el banner de ESC del modal del detalle al apretar la lupa!".
   The pressed button and the cursor say it. */

/* PENDING OR SOLVED (2026-09-28, his queue item 27): the filter above the list, a solved pin and a solved
   line in the list read as done - green tick, muted - so the two states are told apart at a glance. */
.vkNoteFilter{ display: flex; gap: 6px; padding: 10px 12px 4px; }
.vkNoteFilter-btn{
    flex: 1 1 0; min-width: 0; padding: 6px 8px; border: 0; border-radius: 8px;
    background: var(--vk-field-f1f1f4, #f1f1f4); color: var(--vk-soft-55555f, #55555f); font: 600 11px/1.3 'Montserrat', sans-serif; cursor: pointer;
}
.vkNoteFilter-btn:hover{ background: var(--vk-fieldh-e7e7ee, #e7e7ee); }
.vkNoteFilter-btn.is-on{ background: var(--vk-hl, #6e1fd1); color: var(--vk-hl-ink, #ffffff); }
.vkNoteFilter-n{ display: block; font-weight: 700; font-size: 12px; }
.vkNoteList-item.is-solved .vkNoteList-body{ text-decoration: line-through; opacity: .6; }
.vkNoteList-item.is-solved .vkNoteList-num{ background: #1f9d55; color: #ffffff; }
.vkPin.is-solved{ background: #1f9d55; }
.vkNotePop-state{ margin: 0 0 8px; font: 600 11px/1.4 'Montserrat', sans-serif; color: var(--vk-soft-8a8a94, #8a8a94); }
.vkNotePop-state.is-solved{ color: var(--vk-ok-1f9d55, #1f9d55); }

/* the detail layer's buttons (core/item/watch_item.php) */
.watch_item_modal .vkNotesToggle, .watch_item_modal .vkNotesAdd{ position: relative; }
.watch_item_modal .vkNotesToggle.is-off{ opacity: .55; }
.watch_item_modal .vkNotesAdd.is-on, .watch_item_modal .vkZoomOpen.is-on{ background: var(--vk-hl, #6e1fd1) !important; }
/* ONE CONTROL, TWO HALVES (2026-09-28, his queue item 15, with a screenshot). While the comments are off,
   "Comentar" is hidden; with them on, "Comentarios" takes the active colour - the one a pressed button here
   already has - and "Comentar" sits right under it with a pencil. His words: "tienen que parecer unidos,
   como un witcher vertical". The column's buttons are 40 px circles 7 px apart; these two lose the gap and
   the inner corners and become one pill, a thin line between the halves. */
.watch_item_modal .vkNotesToggle[aria-pressed="true"]{ background: var(--vk-violet, #6e1fd1) !important; }
/* Held by two classes, not by the two being next to each other: Bootstrap puts its tooltip right after the
   button hovered, so hovering "Comentarios" slid a div.tooltip between the halves and both went round again,
   7 px apart - his "parece que se transforman en redonda las dos y pierden el efecto switcher", measured
   2026-09-28 with a real hover. vk_notes.js buttons() sets them; watch_item.php prints them for the first paint. */
.watch_item_modal .vkNotesToggle.vkPair-top.downloadbnts{ border-radius: 99px 99px 0 0; margin-bottom: 0; }
.watch_item_modal .vkNotesAdd.vkPair-bottom.downloadbnts{ border-radius: 0 0 99px 99px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.watch_item_modal .vkNotesAdd[hidden]{ display: none !important; }
/* the count's purple dot would vanish on the now purple button: a white ring, only then */
.watch_item_modal .vkNotesToggle[aria-pressed="true"] .vkNotes-count{ box-shadow: 0 0 0 2px var(--vk-surface, #ffffff); }
/* Their tooltips (Bootstrap's, inserted in this 40 px column): a text of several words wrapped there,
   was placed by its narrow width and then drawn over its own button, which took clicks only at its edge.
   Measured 2026-09-26 at 1900 px: "Ver u ocultar los comentarios" on two lines, covering the button.
   Kept on one line, and never in the way of a click. */
.watch_item_modal .button_actions .tooltip{ pointer-events: none; }
.watch_item_modal .button_actions .tooltip-inner{ max-width: none; white-space: nowrap; }
.vkNotes-count{
    position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 99px; background: var(--vk-hl, #6e1fd1); color: var(--vk-hl-ink, #ffffff); font: 700 11px/18px 'Montserrat', sans-serif; text-align: center;
}
.vkNotes-count[hidden]{ display: none; }
.watch_item_modal .casing.is-zoomArmed img.mainImg{ cursor: zoom-in; }      /* only once "Ampliar" is pressed */

/* ---------------------------------------------------------------- a note open */

.vkNotePop{
    position: fixed; z-index: 10000010; width: 300px; max-width: calc(100vw - 16px);
    padding: 12px 16px 16px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 14px; background: var(--vk-surface, #ffffff);
    box-shadow: 0 12px 32px rgba(22, 22, 26, .22); font-family: 'Montserrat', sans-serif; color: var(--vk-text, #16161a);
}
.vkNotePop-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.vkNotePop-title{ font-size: 13px; font-weight: 700; }
.vkNotePop-close{
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none;
    color: var(--vk-soft-6b6a76, #6b6a76); font-size: 14px; cursor: pointer;
}
.vkNotePop-close:hover{ background: var(--vk-field-f1f0f5, #f1f0f5); color: var(--vk-text, #16161a); }
.vkNotePop-meta{ margin: 0 0 8px !important; padding: 0 !important; font-size: 12px !important; color: var(--vk-soft-6b6a76, #6b6a76); }
.vkNotePop-body{ margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.45; color: var(--vk-text, #16161a); white-space: pre-wrap; overflow-wrap: anywhere; }
.vkNotePop-text{
    display: block; width: 100%; min-height: 84px; padding: 10px 12px; box-sizing: border-box;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px; font: 14px/1.4 'Montserrat', sans-serif; color: var(--vk-text, #16161a); resize: vertical;
}
.vkNotePop-text:focus{ outline: none; border-color: var(--vk-violet, #6e1fd1); box-shadow: 0 0 0 3px rgba(var(--vk-violet-rgb, 110, 31, 209), .15); }
.vkNotePop-actions{ display: flex; gap: 8px; margin-top: 12px; }
.vkNotePop-btn{
    height: 34px; 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: 600 13px 'Montserrat', sans-serif; cursor: pointer;
}
.vkNotePop-btn:hover{ border-color: var(--vk-violet, #6e1fd1); }
.vkNotePop-btn--main{ border-color: var(--vk-text, #16161a); background: var(--vk-inv, #16161a); color: #ffffff; }
.vkNotePop-btn--main:hover{ border-color: #4f1697; background: #4f1697; }
.vkNotePop-btn--danger{ color: var(--vk-err, #b3261e); }
.vkNotePop-btn--danger:hover{ border-color: var(--vk-err, #b3261e); }
.vkNotePop-btn:disabled{ opacity: .5; cursor: default; }
.vkNotePop button:focus-visible, .vkNotePop-close:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }

/* ---------------------------------------------------------------- the full-size view, in the detail */

/* The detail grows to the window's width (view/js/vk_zoom.js adds .vkZoom-anim for the move and
   .vkZoomed for the state); its scroll stays put, keeping the scrollbar's room so nothing shifts. */
#watch_item_modal.vkZoomed{ max-width: 100vw; overflow-y: hidden; scrollbar-gutter: stable; }
#watch_item_modal.vkZoom-anim{ transition: max-width .45s cubic-bezier(.3, .7, .2, 1), right .2s ease-in-out, transform .2s ease-in-out; }
.watch_item_modal .casing.is-zoomed{ overflow: hidden; }
.watch_item_modal .casing.is-zoomed .expandBig_style{ display: none; }      /* the bar takes its place */

.vkZoomIn{ position: absolute; z-index: 30; top: 0; left: 0; right: 0; font-family: 'Montserrat', sans-serif; }
/* the detail's close button and its bell stay above the picture's view (2026-10-10, seen by brief BQ's builder and reproduced: in Tira, with no side panel, the view (z-index 30) lay over them
   (z-index 2) and a click on the X did nothing until «Salir») */
.watch_item_modal.vkZoomed .modal_accept, .watch_item_modal.vkZoomed .vkBellDetail{ z-index: 31; }
/* THE STRIP: the view's top 84 px hold the bar of sizes (left) and the round buttons (right) and never the picture - the stage under it ends at its edge (brief BO, 2026-10-10) */
.vkZoomIn-stage{
    position: absolute; inset: 84px 0 0 0; display: flex; overflow: auto; overscroll-behavior: contain;
    padding: 20px 48px 48px; box-sizing: border-box; cursor: grab;       /* room round the picture so its edge shows (his words, 2026-10-10: "aqui aumenta el espacio de magent, el usuario tiene que ver cual es el limite, pero dejalo respirar un poco, que con ma sespacio entre el frame y el elemento en cuestion se soluciona"; was 0 24px 24px) - vk_zoom.js reads it */
    touch-action: none; scrollbar-width: none;       /* brief BO: the picture is moved by hand and by the wheel, whose zoom would be the page's on a touch screen; no bars to jump about under a zoom */
}
.vkZoomIn-stage::-webkit-scrollbar{ display: none; }
.vkZoomIn.is-ready{ background: var(--vk-fieldh-eaeaea, #eaeaea); }                /* the detail's grey, over its picture - the strip's too */
.vkZoomIn-stage.is-dragging{ cursor: grabbing; }
.vkZoomIn-pic{ position: relative; flex: 0 0 auto; margin: auto; line-height: 0; }   /* margin: auto centres it and still scrolls */
.vkZoomIn:not(.is-ready) .vkZoomIn-pic{ visibility: hidden; }
.vkZoomIn-pic img{
    display: block; max-width: none !important; max-height: none !important; margin: 0; border: 0; border-radius: 0;
    cursor: zoom-in; user-select: none; -webkit-user-drag: none;
}
.vkZoomIn.is-pannable .vkZoomIn-pic img{ cursor: grab; }                  /* larger than the view: it is taken by hand */
.vkZoomIn.is-max:not(.is-pannable) .vkZoomIn-pic img{ cursor: zoom-out; }  /* at the limit, a double click goes back */
.vkZoomIn-stage.is-dragging, .vkZoomIn-stage.is-dragging .vkZoomIn-pic img{ cursor: grabbing; }
.watch_item_modal .casing[data-vk-zoom] img.mainImg{ touch-action: manipulation; }   /* a double tap is the zoom's, not the browser's */
.vkZoomIn.is-moving .vkNotes-layer{ visibility: hidden; }                    /* the pins wait for the picture */

/* the bar, where "Reduce" was: the same sizes, the same pills */
.vkZoomIn-bar{
    position: absolute; z-index: 2; top: 25px; left: 29px; right: 120px;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; pointer-events: none;
    transition: opacity .2s ease;
}
.vkZoomIn-bar > *{ pointer-events: auto; }
.vkZoomIn.is-leaving .vkZoomIn-bar{ opacity: 0; }
.vkZoomIn-seg{ display: flex; padding: 4px; border-radius: 23px; background: var(--vk-inv, #16161a); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.vkZoomIn-seg button{
    height: 35px; padding: 0 16px; border: 0; border-radius: 19px; background: transparent;
    color: #ffffff; font: 600 13px 'Montserrat', sans-serif; cursor: pointer;
}
.vkZoomIn-seg button:hover{ background: rgba(255, 255, 255, .14); }
.vkZoomIn-seg button[aria-pressed="true"]{ background: var(--vk-fieldh-ffffff, #ffffff); color: var(--vk-text, #16161a); }
.vkZoomIn-exit{
    display: inline-flex; align-items: center; gap: 8px; height: 43px; padding: 0 20px; border: 0; border-radius: 23px;
    background: blue; color: #ffffff; font: 600 13px 'Montserrat', sans-serif; cursor: pointer;
}
.vkZoomIn-exit:hover{ opacity: .7; }
.vkZoomIn button:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
.vkZoomIn-load{
    height: 43px; padding: 0 16px; border-radius: 23px; background: var(--vk-inv, #16161a); color: #ffffff;
    font: 600 13px/43px 'Montserrat', sans-serif; white-space: nowrap;
}
.vkZoomIn.is-ready .vkZoomIn-load{ display: none; }
@media (max-width: 700px){
    .vkZoomIn-bar{ top: 12px; left: 12px; right: 12px; }
    .vkZoomIn-seg button{ padding: 0 10px; }
    .vkZoomIn-exit{ padding: 0 14px; }
    .vkZoomIn-stage{ inset: 0; padding: 72px 8px 8px; }
    /* UP IN THE DETAIL'S TOP BAND, OUT OF THE PICTURE'S WAY (2026-10-08, his words "en el movil, en ampiar una imagen con la lupa en el modal detalle del elemento. pon los
       botones que te marco arriba, asi no molestan para mirar la imagen de cerca"): the bar in the dark band at the top - 65 px, with only the x at its right - centred in it,
       12 px from the left, clear of the x (68 px kept at the right); the picture's stage takes the whole height under the band (it kept 72 px for the bar). Fixed: the
       picture's box clips what leaves it, and the detail fills the window from its corner, so the window's top is the band's. Smaller pills on a narrow phone so it stays
       one line. */
    .vkZoomIn-bar{ position: fixed; top: 11px; left: 12px; right: 68px; flex-wrap: nowrap; gap: 6px; }
    .vkZoomIn-stage{ inset: 0; padding: 8px; }
}
@media (max-width: 400px){
    .vkZoomIn-seg button{ padding: 0 8px; font-size: 12px; }
    .vkZoomIn-exit{ padding: 0 12px; gap: 6px; font-size: 12px; }
}

/* THE ROUND BUTTONS IN THE VIEW'S TOP STRIP (brief BO, 2026-10-10; his words, with a picture of the strip: "Lo del medio pasa a la izquierda y los botones verticales pasan arriba, asi no
   molestan cuando se esta visualizando la imagen"). While the picture is zoomed (view/js/vk_zoom.js puts .vkZoomRow on the layer) the column of round buttons - link, download, edit, send...,
   the magnifier and the pair of comments - lies down in a row in the strip above the picture, at its right, level with the bar of sizes at its left. Same buttons, same tooltips (they open
   below now), same actions; the pair of comments is one pill sideways. In Tira and in a layer with no versions the close button and the bell are at the strip's right end, so the row stops
   before them; beside the panel of versions (Historial, Fuentes) it ends at the panel. A phone has its own (below). */
.watch_item_modal.vkZoomRow .button_actions{
    top: 26px; right: 128px; display: flex; align-items: center; gap: 8px;
}
.watch_item_modal.vkZoomRow .vkDetail--side > .button_actions{ right: calc(var(--vkVerW) + 16px); }
.watch_item_modal.vkZoomRow .button_actions > div{ flex-direction: row; flex-wrap: nowrap; gap: 8px; }
.watch_item_modal.vkZoomRow .button_actions .downloadbnts{ float: none; margin: 0; flex: 0 0 auto; }
.watch_item_modal.vkZoomRow .button_actions .hookCompany{ float: none; margin: 0; flex: 0 0 auto; white-space: nowrap; }      /* the hub's name, when it has one, leads the row */
.watch_item_modal.vkZoomRow .vkNotesToggle.vkPair-top.downloadbnts{ border-radius: 99px 0 0 99px; }
.watch_item_modal.vkZoomRow .vkNotesAdd.vkPair-bottom.downloadbnts{ border-radius: 0 99px 99px 0; margin-left: -8px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .22); }
/* A narrower window: the bar and the row no longer fit side by side, so the row takes a second line under the bar, from its left edge, and the strip is taller (the picture's stage under it). */
@media (max-width: 1180px){
    .watch_item_modal.vkZoomRow .button_actions,
    .watch_item_modal.vkZoomRow .vkDetail--side > .button_actions{ top: 76px; left: 29px; right: 16px; }
    .watch_item_modal.vkZoomRow .vkDetail--side > .button_actions{ right: calc(var(--vkVerW) + 16px); }
    .vkZoomIn-stage{ inset: 128px 0 0 0; }
}
@media (max-width: 800px){
    .watch_item_modal.vkZoomRow .vkDetail--side > .button_actions{ right: 16px; }
}
/* A phone: the bar is in the dark band at the top (above), the row under it, one strip the width of the screen that is moved sideways with a finger (nine buttons are wider than the screen),
   and the picture's stage under that. Fixed, as the bar is: the picture's box clips what leaves it. */
@media (max-width: 700px){
    .watch_item_modal.vkZoomRow .button_actions,
    .watch_item_modal.vkZoomRow .vkDetail--side > .button_actions{
        position: fixed; top: 65px; left: 0; right: 0; height: 52px; padding: 6px 12px; box-sizing: border-box;
        overflow-x: auto; overflow-y: hidden; scrollbar-width: none; z-index: 40;
    }
    .watch_item_modal.vkZoomRow .button_actions::-webkit-scrollbar{ display: none; }
    .watch_item_modal.vkZoomRow .button_actions > div{ gap: 6px; }
    .vkZoomIn-stage{ inset: 52px 0 0 0; padding: 8px; }
}

/* THE ROUND BUTTONS IN THE SIDE PANEL'S RAIL (brief BQ §5, 2026-10-10; view/js/vk_zoom.js). His words, on the row of buttons going up on every file: "aqui hay un glitch. cada vez que caga una archivo, esta
   columna se anima para arriba y ponerse horizontal. Ya edeberia de etar puesta en horizontal al abrir el modal o si cambiamos de imagen m, si hemos activaro el modo 100%. si quieres puedes poner los
   botones aqui en el sidebar plegado vuando esta en plegado mode, debajo de la flecha. y cuanto esta desplegado, esta dentro de esta barra en la misma posicion. asi el panel de botones no molesta ni
   tampoco ocumpa un espacio de otro item."
   While the view is wide (a picture's, a video's, any other file's - .vkZoomRow on the layer - or a PDF's own wide mode - .is-vkPdfWide) and the detail has the side panel (Historial, Fuentes), the column
   stands at the panel's right edge UNDER ITS FOLD ARROW (.vkSide-fold: 36 px at 75 to 111, its centre 36 px from the edge, 28 px when the panel is folded to its 56 px strip - measured), the same
   40 px rounds as in the layer's normal column, tooltips to the left. Unfolded, the panel's own content makes room for it (a right padding; the tabs row, which holds the arrow, keeps its end). No side
   panel (Tira, a layer without versions), or a screen where the panel is under the preview (800 px): the row in the top strip above. */
@media (min-width: 801px){
    .watch_item_modal.vkZoomRow .vkDetail--side > .button_actions,
    .watch_item_modal.is-vkPdfWide .vkDetail--side > .button_actions{ top: 124px; left: auto; right: 16px; display: block; width: 40px; }
    .watch_item_modal.vkZoomRow .vkDetail--side.is-folded > .button_actions,
    .watch_item_modal.is-vkPdfWide .vkDetail--side.is-folded > .button_actions{ right: 8px; }
    .watch_item_modal.vkZoomRow .vkDetail--side > .button_actions > div{ flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .watch_item_modal.vkZoomRow .vkDetail--side > .button_actions .downloadbnts{ float: none; margin: 0 0 7px; flex: 0 0 auto; }
    .watch_item_modal.is-vkPdfWide .vkDetail--side > .button_actions .downloadbnts{ margin-left: 0; }       /* the column's own 2 px at the left would put it 1 px off the arrow's centre */
    .watch_item_modal.vkZoomRow .vkDetail--side .vkNotesToggle.vkPair-top.downloadbnts{ border-radius: 99px 99px 0 0; margin-bottom: 0; }
    .watch_item_modal.vkZoomRow .vkDetail--side .vkNotesAdd.vkPair-bottom.downloadbnts{ border-radius: 0 0 99px 99px; margin-left: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
    /* the hub's name pill cannot lead a 40 px column: it becomes a round with its link mark, the name kept in the markup (read by a screen reader) */
    .watch_item_modal:is(.vkZoomRow, .is-vkPdfWide) .vkDetail--side > .button_actions .hookCompany{
        float: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 0 7px; padding: 0; overflow: hidden; font-size: 0; white-space: nowrap;
    }
    .watch_item_modal:is(.vkZoomRow, .is-vkPdfWide) .vkDetail--side > .button_actions .hookCompany i{ font-size: 13px; margin: 0; }
    /* unfolded: the panel's content stops short of the rail (68 px from the edge: the rail's 56 and some air); the bar of its tabs, which holds the arrow, goes on to the edge as it did */
    .watch_item_modal.vkZoomRow .vkDetail--side:not(.is-folded) > .vkVer,
    .watch_item_modal.is-vkPdfWide .vkDetail--side:not(.is-folded) > .vkVer{ padding-right: 68px; }
    .watch_item_modal.vkZoomRow .vkDetail--side:not(.is-folded) > .vkVer .vkSide-bar,
    .watch_item_modal.is-vkPdfWide .vkDetail--side:not(.is-folded) > .vkVer .vkSide-bar{ margin-right: -50px; }
    /* the row's second line (a window under 1180 px) is gone with the row: the strip holds the bar alone */
    .watch_item_modal .vkDetail--side .vkZoomIn-stage{ inset: 84px 0 0 0; }
}
/* the panel is 340 px wide under 1200 px, and the tabs' words do not fit its bar there: the fold arrow ends 12 px past it (measured at 1100: 6 px from the panel's edge, not 18) - the rail follows it */
@media (min-width: 801px) and (max-width: 1199px){
    .watch_item_modal.vkZoomRow .vkDetail--side:not(.is-folded) > .button_actions,
    .watch_item_modal.is-vkPdfWide .vkDetail--side:not(.is-folded) > .button_actions{ right: 4px; }
}

/* THE ROUND BUTTONS AND THE SIDE PANEL, IN EVERY VIEW (2026-10-11). His words, with three pictures - the panel folded in the normal view, folded in the wide view at 100 %, unfolded in the
   wide view: "cuando la sedebar este plegada los botones deben de lucir exactamente asi. perfectamente alineados. Incluso indeoendienbtemente si esta en wide 100%. con la barra desplegada
   y foto ampliada es asi como en la foto3, hay margen suficiente en los edges para que el menu botones no tape la imagen." Asked whether the column leaves the panel, as in his third
   picture - which changes BQ's "inside the panel, in the same place" above: "si asi hazlo".
   FOLDED, in any view (the normal one too, where it stood 64 px left of the strip - measured at 1875): the column in the panel's 56 px strip, under its fold arrow, centred on it and on the X.
   UNFOLDED, in any view: the column OUTSIDE the panel, 16 px from it, and the picture's area stops 72 px short of the panel (the column's 40 and 16 on each side), so the buttons never lie
   over the picture - in the normal view they covered 20 px of its right edge (measured at 1875). */
@media (min-width: 801px){
    .watch_item_modal .vkDetail--side.is-folded > .button_actions{ top: 124px; left: auto; right: 8px; width: 40px; display: block; }
    .watch_item_modal .vkDetail--side.is-folded > .button_actions > div{ flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .watch_item_modal .vkDetail--side.is-folded > .button_actions .downloadbnts{ float: none; margin: 0 0 7px; flex: 0 0 auto; }
    /* the hub's name pill is a round in this column, folded or not (as BQ made it in the wide view): wider, it stood out of the column - over the picture's edge, unfolded */
    .watch_item_modal .vkDetail--side > .button_actions .hookCompany{
        float: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 0 7px 2px; padding: 0; overflow: hidden; font-size: 0; white-space: nowrap;
    }
    .watch_item_modal .vkDetail--side.is-folded > .button_actions .hookCompany{ margin-left: 0; }       /* the buttons lose their own 2 px at the left there (above), so the round does too */
    .watch_item_modal .vkDetail--side > .button_actions .hookCompany i{ font-size: 13px; margin: 0; }
    /* the close button and the bell on the same line as the arrow and the column while the panel is folded (his pictures: the X, the arrow and the buttons on one axis): 8 px from the
       edge, as the column, instead of 16; the bell keeps its 8 px from the X */
    .watch_item_modal:has(.vkDetail--side.is-folded) .modal_accept{ right: 8px; }
    .watch_item_modal:has(.vkDetail--side.is-folded) .vkBellDetail{ right: 56px; }
    .watch_item_modal .vkDetail--side.is-folded .vkNotesToggle.vkPair-top.downloadbnts{ border-radius: 99px 99px 0 0; margin-bottom: 0; }
    .watch_item_modal .vkDetail--side.is-folded .vkNotesAdd.vkPair-bottom.downloadbnts{ border-radius: 0 0 99px 99px; margin-left: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
    /* unfolded: beside the panel, the strip's height clear (the bar of sizes is there in the wide view) */
    .watch_item_modal:is(.vkZoomRow, .is-vkPdfWide) .vkDetail--side:not(.is-folded) > .button_actions{ top: 92px; right: calc(var(--vkVerW) + 16px); }
    .watch_item_modal:is(.vkZoomRow, .is-vkPdfWide) .vkDetail--side:not(.is-folded) > .vkVer{ padding-right: 18px; }               /* the panel's own again (view/css/vk_versions.css) */
    .watch_item_modal:is(.vkZoomRow, .is-vkPdfWide) .vkDetail--side:not(.is-folded) > .vkVer .vkSide-bar{ margin-right: 0; }
    .watch_item_modal .vkDetail--side:not(.is-folded) > .casing{ padding-right: 72px; box-sizing: border-box; }
    .watch_item_modal .vkDetail--side:not(.is-folded) .vkZoomIn-stage{ right: 72px; }                                               /* the picture's view lies over the whole casing */
}

/* ---------------------------------------------------------------- the wide view of a video and of any file with no picture to open (brief BQ, 2026-10-10; view/js/vk_zoom.js) */

/* His words: "los videos en el modal no se pueden agandar como las imagenes. solo quiero que se ensanchen como las imagnes, no hace falta ni zoom ni nada mas." / "la vista de modo fullwisth 100%
   se tiene que mantener a traves de la navegacion." The view adds only its bar («Salir») and a ghost of the stage - the same CSS as the picture's stage, so the same strip and the same margins, but
   never drawn and never taking a click: the file's own element stays in the casing, under it. The view covers the casing (the arrows read its box) and lets everything through but its bar. */
.vkZoomIn--plain{ bottom: 0; pointer-events: none; }
.vkZoomIn--plain .vkZoomIn-stage{ pointer-events: none; cursor: default; overflow: hidden; }
/* A VIDEO, laid by hand (view/js/vk_zoom.js placeMedia): whole, at the height the stage leaves, its own proportions. The stylesheets cap a video (750 px, 534 px, 100 % of the stage, 100vh) and centre it
   in the casing; here it is positioned where the script says (inline, !important, as these are), the casing being the frame. It keeps playing: it is the same element. A video just drawn waits, clear,
   for its proportions (is-vkSizing), so that its controls never show across the whole room for a moment. */
.watch_item_modal .casing.is-vkVideo video.mainImg{
    position: absolute !important; margin: 0 !important; max-width: none !important; max-height: none !important; min-width: 0 !important;
    transform-origin: 0 0; transition: opacity .15s ease;
}
.watch_item_modal .casing.is-vkVideo video.mainImg.is-vkSizing{ opacity: 0; }
/* a 3D model's box has its own button («Restablecer vista», 16 px from the bottom-left corner) and its line of words along the bottom: the arrows stand at the stage's bottom corners while the view is
   wide (view/js/vk_detail_nav.js, brief BQ §5: 8 px in, 40 px wide), so they make room for them (a phone has its own, vk_3d.css: the button between the arrows) */
@media (min-width: 768px){
    .watch_item_modal.vkZoomRow .vk3d-reset{ left: 64px; }
    .watch_item_modal.vkZoomRow .vk3d-state{ max-width: calc(100% - 160px); }
}
/* any other file: the layer is as wide as the window but scrolls as it does at its width (a 3D box, a document or a PDF's fallback may be taller than the window) */
#watch_item_modal.vkZoomed.vkPlainWide,
#vkVaultModal.vkZoomed.vkPlainWide{ overflow-y: scroll; }

/* ---------------------------------------------------------------- a PDF, page by page (view/js/vk_pdf.js) */

/* Where the browser's viewer was: a box of the same height that scrolls its pages, clear of "Expand" at
   the top and of the buttons at the right. Each page carries its comments, like a picture. */
.watch_item_modal .casing .vkPdf{
    align-self: stretch; width: 100%; height: 700px; overflow-y: auto; overscroll-behavior: contain;
    padding: 76px 76px 24px; box-sizing: border-box; background: var(--vk-fieldh-eaeaea, #eaeaea);
}
.watch_item_modal .casing.fullHeight .vkPdf{ height: 100vh; }
.watch_item_modal .casing .vkPdf.vkPdf--native{ padding: 0; overflow: hidden; }
.vkPdf-state{ margin: 120px auto 0; text-align: center; font: 600 13px 'Montserrat', sans-serif; color: var(--vk-soft-5b5a66, #5b5a66); }
.vkPdf-page{ position: relative; max-width: 1100px; margin: 0 auto 20px; background: #ffffff; box-shadow: 0 2px 12px rgba(22, 22, 26, .16); }
.vkPdf-canvas{ display: block; width: 100%; height: auto; }
.vkPdf-num{
    position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 99px;
    background: rgba(22, 22, 26, .72); color: #ffffff; font: 600 11px/18px 'Montserrat', sans-serif; pointer-events: none;
}
@media (max-width: 700px){
    .watch_item_modal .casing .vkPdf{ padding: 64px 8px 16px; height: 75vh; }
}

/* ---------------------------------------------------------------- "Abrir en Photoshop / Illustrator" (view/js/vk_edit.js) */

.vkEditHint{
    position: fixed; z-index: 10000010; right: 24px; bottom: 24px; width: 340px; max-width: calc(100vw - 32px);
    padding: 14px 40px 14px 16px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 14px; background: var(--vk-surface, #ffffff);
    box-shadow: 0 12px 32px rgba(22, 22, 26, .22); font-family: 'Montserrat', sans-serif; color: var(--vk-text, #16161a);
}
.vkEditHint-title{ margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.vkEditHint-text{ margin: 0 0 4px; font-size: 12px; line-height: 1.45; color: var(--vk-soft-5b5a66, #5b5a66); }
.vkEditHint-text a{ color: var(--vk-violet, #6e1fd1); font-weight: 600; text-decoration: underline; }
.vkEditHint-close{
    position: absolute; top: 8px; right: 10px; width: 24px; height: 24px; padding: 0; border: 0; background: none;
    font-size: 20px; line-height: 24px; color: var(--vk-soft-5b5a66, #5b5a66); cursor: pointer;
}

/* a pin gone to from the side panel's list of comments (view/js/vk_notes.js goTo()) */
.vkPin.is-pulse{ animation: vkPinPulse 1.4s ease-out 2; }
@keyframes vkPinPulse{
    0%{ box-shadow: 0 0 0 0 rgba(var(--vk-violet-rgb, 110, 31, 209), .75); }
    70%{ box-shadow: 0 0 0 18px rgba(var(--vk-violet-rgb, 110, 31, 209), 0); }
    100%{ box-shadow: 0 0 0 0 rgba(var(--vk-violet-rgb, 110, 31, 209), 0); }
}

/* "Ampliar" on a PDF (2026-09-28): the pages are DRAWN bigger, not stretched (view/js/vk_pdf.js).
   Wider than the column, they scroll sideways; the bar stays put over them. */
/* MAGNIFIED, A PAGE IS NO LONGER CAPPED AT 1100 px (2026-09-28, his "que se extienda al 100 del ancho de
   la pagina"). Measured before writing it: the detail panel is ALREADY the window's width when a PDF is
   open, so what held the pages back was this cap, not the panel. vk_pdf.js draws each page again at the
   new width - sharper, never stretched. */
.watch_item_modal.is-vkPdfWide .vkPdf-page{ max-width: none; }
.watch_item_modal .casing .vkPdf.is-zoomed{ overflow: auto; }
.watch_item_modal .casing .vkPdf.is-zoomed .vkPdf-page{ margin-left: auto; margin-right: auto; }
.vkPdfZoom-bar{
    position: sticky; top: 0; z-index: 6; display: flex; gap: 10px; justify-content: center;
    align-items: center; margin: 0 0 14px; padding: 8px;
}
.vkPdfZoom-seg{ display: inline-flex; background: var(--vk-surface, #ffffff); border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px; overflow: hidden; }
.vkPdfZoom-seg button{
    border: 0; background: transparent; padding: 0 14px; height: 36px;
    font: 600 12.5px 'Montserrat', sans-serif; color: var(--vk-soft-3c3b46, #3c3b46); cursor: pointer;
}
.vkPdfZoom-seg button + button{ border-left: 1px solid var(--vk-line-soft-ecebf2, #ecebf2); }
.vkPdfZoom-seg button[aria-pressed="true"]{ background: var(--vk-violet-tint-f1ebfb, #f1ebfb); color: var(--vk-violet-4f1697, #4f1697); }
.vkPdfZoom-exit{
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px; background: var(--vk-surface, #ffffff);
    font: 600 12.5px 'Montserrat', sans-serif; color: var(--vk-text, #16161a); cursor: pointer;
}
.vkPdfZoom-exit:hover, .vkPdfZoom-seg button:hover{ color: var(--vk-violet-4f1697, #4f1697); }