/* The admin sidebar's tree: markup in inc/sidebar_tree.php, behaviour in view/js/sidebar_tree.js.
   It takes the place and width of the old list (ul.menucatstop), under the 90px header. */

.vkTree{
    position: fixed;
    top: 90px;
    left: 0;
    bottom: 0;
    width: calc(16.7% + 78px);
    z-index: 900;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--vk-surface, #ffffff);
    border-right: 1px solid var(--vk-line, #e4e3ea);
    font-family: 'Montserrat', sans-serif;
    color: var(--vk-text, #16161a);
    text-align: left;
}
.vkTree *,
.vkTree *::before,
.vkTree *::after{ box-sizing: border-box; }
.vkTree button{ font-family: inherit; color: inherit; }
.vkTree-sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }
.vkI{ flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vkI--fill{ fill: currentColor; stroke: none; }

/* The old list's controls live in inc/header.php, outside the sidebar: hidden, kept in the page
   because script.js still reads #inputCat's value. */
#inputCat, #inputUser, .switcherSidebar, .crossClose{ display: none !important; }
.layerFold{ display: none !important; }


/* ---------------------------------------------------------------- top: search and tools */

.vkTree-top{ padding: 14px 14px 8px 14px; display: flex; flex-direction: column; gap: 10px; }

.vkTree-search{ position: relative; display: block; margin: 0; font-weight: 400; }
.vkTree-searchIcon{ position: absolute; left: 13px; top: 12px; color: var(--vk-soft, #5f5e6b); display: flex; pointer-events: none; }
#vkTreeSearch{
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 98px 0 40px;              /* room for the x and «Todo» (brief P) */
    border: 1px solid var(--vk-line-dddce5, #dddce5);
    border-radius: 12px;
    background: var(--vk-field-f7f7fa, #f7f7fa);
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    color: var(--vk-text, #16161a);
    -webkit-appearance: none;
    appearance: none;
}
#vkTreeSearch::-webkit-search-cancel-button{ display: none; }
#vkTreeSearch::placeholder{ color: var(--vk-soft-6b6a76, #6b6a76); }
#vkTreeSearch:focus{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 1px; background: var(--vk-surface, #ffffff); }
.vkTree-clear{
    position: absolute; right: 60px; top: 5px;
    width: 32px; height: 32px;
    border: 0; border-radius: 8px; background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--vk-soft, #5f5e6b); cursor: pointer;
}
.vkTree-clear[hidden]{ display: none; }
.vkTree-clear:hover{ background: var(--vk-field-eeedf3, #eeedf3); }
/* the «+» (brief P, his yes 2026-10-02: off = the box searches the parent hubs only; on = every level). An icon like the glass, not a
   button: no box, the glass's grey; on, the app's purple. Where it sits: the block of his CSS at the end of this file. Written .vkTree .vkTree-deep:
   «.vkTree button{ color: inherit }» (above) outweighs a single class and turned the grey into the label's black. */
.vkTree .vkTree-deep{
    position: absolute;
    width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 8px; background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--vk-soft, #5f5e6b); cursor: pointer;
}
.vkTree-deep:hover{ color: var(--vk-text, #16161a); }
.vkTree-deep[aria-pressed="true"]{ color: var(--vk-violet, #6e1fd1); }
.vkTree-deep[aria-pressed="true"] .vkI{ stroke-width: 2.6; }
.vkTree-deep:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 0; }

.vkTree-tools{ display: flex; align-items: center; gap: 6px; }
.vkTree-new{
    height: 38px; padding: 0 12px 0 10px; white-space: nowrap;
    border: 0; border-radius: 10px;
    background: var(--vk-inv, #16161a); color: #ffffff !important;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    cursor: pointer;
}
.vkTree-new:hover{ background: var(--vk-invh-2d2d33, #2d2d33); }
.vkTree-seg{ margin-left: auto; flex-shrink: 0; display: flex; height: 38px; border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px; overflow: hidden; }
.vkTree-seg button{ border: 0; background: transparent; padding: 0 10px; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; color: var(--vk-soft-3c3b46, #3c3b46); }
.vkTree-seg button[aria-pressed="true"]{ background: var(--vk-inv, #16161a); color: #ffffff; }
.vkTree-filter{
    position: relative;
    width: 38px; height: 38px; flex-shrink: 0;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px; background: var(--vk-surface, #ffffff);
    display: flex; align-items: center; justify-content: center;
    color: var(--vk-soft-3c3b46, #3c3b46); cursor: pointer;
}
.vkTree-filter.is-on{ border-color: var(--vk-violet, #6e1fd1); color: var(--vk-violet-4f1697, #4f1697); }
/* fold / unfold every hub (brief P3, "como discreta opcion"): a bare icon beside the eye, framed only on hover; the icon shows what the next click does.
   28 px so the row - Nuevo, A–Z / Manual, this, the eye - still fits the tree at 1280 */
.vkTree-fold{
    margin-left: auto;
    width: 28px; height: 38px; flex-shrink: 0; padding: 0;
    border: 1px solid transparent; border-radius: 10px; background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--vk-soft-3c3b46, #3c3b46); cursor: pointer;
}
.vkTree-seg ~ .vkTree-fold{ margin-left: 0; }
/* the rows' figures on or off (2026-10-08, his "un icono de activar y desactivar los datos de espacio de cada row ... Un icono de chart ... con el color de acento"): a bare
   chart in the accent, framed on hover like the fold beside it, just before «A–Z | Manual» (it takes the auto margin that pushed the switch right); with the figures hidden
   it stays in the accent, fainter. The tree marked data-vk-meta="0" (view/js/sidebar_tree.js) shows no hub's or group's «N hubs · N · MB»: the names take the room */
.vkTree .vkTree-meta{                          /* .vkTree: «.vkTree button{ color: inherit }» outranks a single class */
    margin-left: auto;
    width: 28px; height: 38px; flex-shrink: 0; padding: 0;
    border: 1px solid transparent; border-radius: 10px; background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--vk-hl, var(--vk-violet, #6e1fd1)); cursor: pointer;
}
.vkTree-meta ~ .vkTree-seg{ margin-left: 0; }
/* THE PADLOCK (2026-10-16, his circle on the tools' row: after «Nuevo», before the chart): a bare icon framed on hover as its neighbours; open and soft while off (the default), closed and in the
   accent while on - then a press on a tab of the header leaves the tree as it is (view/js/sidebar_tree.js). Only where the header has tabs (from 1181 px: view/css/vk_tabs.css). */
.vkTree .vkTree-lock{
    display: none;
    width: 28px; height: 38px; flex-shrink: 0; padding: 0;
    border: 1px solid transparent; border-radius: 10px; background: transparent;
    align-items: center; justify-content: center;
    color: var(--vk-soft-3c3b46, #3c3b46); cursor: pointer;
}
.vkTree .vkTree-lock[aria-pressed="true"]{ color: var(--vk-hl, var(--vk-violet, #6e1fd1)); }
.vkTree .vkTree-lock:hover{ border-color: var(--vk-hl, var(--vk-violet, #6e1fd1)); }
.vkTree .vkTree-lock:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
.vkTree-lockOn, .vkTree-lockOff{ display: flex; }
.vkTree-lock[aria-pressed="true"] .vkTree-lockOff, .vkTree-lock:not([aria-pressed="true"]) .vkTree-lockOn{ display: none; }
@media (min-width: 1181px){
    .vkTree .vkTree-lock{ display: flex; margin-left: auto; }
    .vkTree .vkTree-lock ~ .vkTree-meta, .vkTree .vkTree-lock ~ .vkTree-fold{ margin-left: 0; }
}
.vkTree .vkTree-meta[aria-pressed="false"]{ opacity: .45; }
.vkTree .vkTree-meta:hover{ border-color: var(--vk-hl, var(--vk-violet, #6e1fd1)); opacity: 1; }
.vkTree .vkTree-meta:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
.vkTree[data-vk-meta="0"] .vkRow-meta{ display: none; }
/* the row - Nuevo, the chart, A–Z | Manual, the fold, the eye - as the tree narrows (measured 2026-10-08 on the copy: it fits from 1560 px; under it the eye was already
   clipped by up to 37 px before the chart came, 71 with it at 1126): first closer; from 1479 px down to the wide layout's end, «Nuevo» keeps only its «+» (its word
   stays for screen readers) and the three icon buttons give up a few px. Measured after: no overflow from 1126 to 1875, nor in the 400 / 330 px drawer */
@media (max-width: 1559px){
    .vkTree .vkTree-tools{ gap: 3px; }
}
@media (min-width: 1126px) and (max-width: 1479px){
    .vkTree .vkTree-new{ font-size: 0; gap: 0; padding: 0 10px; }
    .vkTree .vkTree-meta, .vkTree .vkTree-fold, .vkTree .vkTree-lock{ width: 24px; }
    .vkTree .vkTree-filter{ width: 34px; }
}
/* ...and with the padlock in the row (2026-10-16, measured on the copy with his stylesheet: it needs 362 px with «Nuevo» spelled out, the tree gives 330 at 1560 and 382 at 1875): «Nuevo» keeps only
   its «+» up to 1799 px, and from 1181 to 1300 px the gaps and the «A–Z | Manual» keys are a little tighter (266 px at 1181) */
@media (min-width: 1181px) and (max-width: 1799px){
    .vkTree .vkTree-tools:has(.vkTree-lock) .vkTree-new{ font-size: 0; gap: 0; padding: 0 10px; }
}
@media (min-width: 1181px) and (max-width: 1300px){
    .vkTree .vkTree-tools:has(.vkTree-lock){ gap: 2px; }
    .vkTree .vkTree-tools:has(.vkTree-lock) .vkTree-seg button{ padding: 0 7px; }
}
.vkTree-fold:hover{ border-color: var(--vk-violet, #6e1fd1); color: var(--vk-violet-4f1697, #4f1697); }
.vkTree-fold:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
.vkTree-foldI, .vkTree-unfoldI{ display: flex; }
.vkTree-unfoldI, .vkTree-fold.is-folded .vkTree-foldI{ display: none; }
.vkTree-fold.is-folded .vkTree-unfoldI{ display: flex; }
.vkTree-filter.is-on::after{
    content: ""; position: absolute; top: 5px; right: 5px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--vk-violet, #6e1fd1);
}
.vkTree-status{ font-size: 12px; color: var(--vk-soft, #5f5e6b); padding: 0 4px; }
.vkTree-status[hidden]{ display: none; }


/* ---------------------------------------------------------------- the list */

.vkTree-list{
    flex-grow: 1;
    overflow-y: auto;
    padding: 2px 8px 32px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--vk-line-strong-cfcfd8, #cfcfd8) transparent;
}
.vkTree-list::-webkit-scrollbar{ width: 8px; }
.vkTree-list::-webkit-scrollbar-thumb{ background: var(--vk-line-strong-cfcfd8, #cfcfd8); border-radius: 8px; }

.vkTree-recent{
    display: flex; align-items: center; gap: 10px;
    height: 42px; padding: 0 12px; margin: 0 0 2px 0;
    border-radius: 10px;
    color: var(--vk-text, #16161a) !important; text-decoration: none !important;
    font-size: 13.5px;
}
.vkTree-recent[hidden]{ display: none; }
.vkTree-recent .vkI{ color: var(--vk-soft, #5f5e6b); }
.vkTree-recent:hover{ background: var(--vk-field-f4f3f7, #f4f3f7); }
.vkTree-recent.is-current{ background: var(--vk-violet-tint, #f1e9fa); color: var(--vk-violet-4f1697, #4f1697) !important; font-weight: 600; }
.vkTree-recentHint{ margin-left: auto; font-size: 11.5px; color: var(--vk-soft, #5f5e6b); font-weight: 400; }

.vkTree-label{
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--vk-soft, #5f5e6b); padding: 12px 12px 6px 12px;
}
.vkTree-none{ font-size: 13px; color: var(--vk-soft, #5f5e6b); padding: 12px; margin: 0; }
.vkTree-noresults{ padding: 18px 12px; }
.vkTree-noresults[hidden]{ display: none; }
.vkTree-noresults p{ font-size: 13.5px; margin: 0 0 10px 0; }
.vkTree-clearAll{
    height: 38px; padding: 0 14px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px; background: var(--vk-surface, #ffffff);
    font-size: 13px; font-weight: 600; cursor: pointer;
}

.vkTree-nodes, .vkNode-kids{ list-style: none; margin: 0; padding: 0; }
.vkNode-kids{ padding-left: 16px; }
.vkNode{ list-style: none; margin: 0; padding: 0; position: relative; }
.vkNode > .vkNode-kids{ display: none; }
.vkNode.is-open > .vkNode-kids{ display: block; }
.vkNode.is-hidden, .vkNode.is-filtered, .vkNode.is-nolabel{ display: none; }      /* is-nolabel: the labels chosen at the top leave this hub out (sidebar_tree.js applyLabels, brief AM) */
/* the eye (sidebar_tree.js applyVisible): a section of the other kind stays only as the folder of a subsection that is shown; and what a hub's row counts (files, disk),
   or a group's "N hubs", is the whole of it - not shown while the eye leaves only part */
.vkNode.is-context > .vkRow .vkRow-link{ opacity: .55; }
.vkTree.is-scoped .vkNode--hub > .vkRow .vkRow-meta, .vkTree.is-scoped .vkNode--group > .vkRow .vkRow-count, .vkTree.is-scoped .vkNode--group > .vkRow .vkRow-meta{ display: none; }

.vkRow{
    position: relative;
    display: flex; align-items: center;
    min-height: 38px;
    border-radius: 10px;
    transition: background .12s ease;
}
.vkRow:hover{ background: var(--vk-field-f4f3f7, #f4f3f7); }
/* THE ROWS SWELL UNDER THE POINTER, AND THEIR NEIGHBOURS WITH THEM (2026-10-08, his words: "una sutil animacion muy ligera y cortita, que se encadena con sus proximas y
   anteriores filas. Cuando se hace hover en la linea esta se anima haciendo un pequeño scale up de un 2% mientras esta encima y que al hacer todos juntos pasando rapido el raton
   por la columna haga un efecto agradable"). The row under the pointer grows 2 %, the row just above it and the one just below 1 % - also across a level: a parent and its
   first child, open or not. From the centre, so neither end is cut. None with reduced motion. Direct, not bouncy (same day, his words "no ha de ser tan bouncy, ha de ser mas
   directo, parece que todo rebota"): in and out alike in .1 s, ease-out, no slow tail (it was .12 s in, .26 s out), and the neighbours .8 % (they were 1 %); then .4 %, half (his words, same day: "las colindantes al hovereado reduce a la mitad su scale"). */
/* NO SCALE ANY MORE (his words, 2026-10-08: "sacale el scale en el hover"): the row under the pointer, its neighbours and a crossed row keep only their opacity - the
   dimming below; the swell above is history. */
.vkTree .vkRow{ transition: background .12s ease, opacity .08s cubic-bezier(.45, 0, .55, 1); }      /* .08 s, eased at both ends (his words, 2026-10-08: "haz que suba y baje mas suave porque ahora parece inmediato" - it was .025 s ease-out) */      /* back, when the pointer leaves: half the way in (his words, 2026-10-08: "reduce el tiempo de animacion a la mitad cuando deja de hacer hover") */
/* THE ROWS DIM WHILE THE POINTER IS IN THE SIDEBAR (2026-10-08, his words "cuando el mouse entre al sidebar los elementos bajaran la opacidad a 0.7. el elemento hovereado
   mantendra la opacidad a 1 y los colindantes la mantendran a 0.85"): every row .7, the one under the pointer 1, its neighbours (the ones that swell with it) .85. The fade
   follows the swell (.05 s both ways since the same day). Before the row under the pointer, which has the same weight and must win. */
.vkTree:hover .vkRow{ opacity: .7; }
.vkTree .vkRow:hover{ opacity: 1; }      /* in as fast as out: .05 s, the row's own transition (his words, 2026-10-08: "cuando hace hover al elemento pon le la misva velocidad como tiene el cuando se va del elemento") */
.vkTree .vkNode:has(> .vkRow:hover) + .vkNode > .vkRow,
.vkTree .vkNode:has(+ .vkNode > .vkRow:hover) > .vkRow,
.vkTree .vkNode:has(> .vkRow:hover) > .vkNode-kids > .vkNode:first-child > .vkRow,
.vkTree .vkNode:has(> .vkNode-kids > .vkNode:first-child > .vkRow:hover) > .vkRow{ opacity: .85; }
/* TWICE AS FAST, AND NO ROW MISSED BY A FAST POINTER (2026-10-08, his words "dobla la velocidad a los dos sentidos. y luego haz que sea mas sensible, porque cuando paso
   rapido el mouse por la columna la mitad ni se inmuntan"): .025 s both ways (above; it was .05). A browser looks at what is under the pointer once a frame, so a fast pass
   jumps over rows, and a row hovered for one frame barely moves: view/js/sidebar_tree.js marks every row the pointer crossed - jumped over or only touched - .is-swept for 90 ms (70 until the .08 s ease)
   from when it was first crossed, and that is the hovered look (above its neighbours' look, whose selectors weigh more). A row the pointer stayed on longer goes back as soon as
   it is left, as before. Not with reduced motion (the script does not mark). */
.vkTree .vkRow.is-swept{ opacity: 1 !important; }
@media (prefers-reduced-motion: reduce){ .vkTree .vkRow, .vkTree .vkRow:hover{ transition: background .12s ease; } }
.vkNode.is-current > .vkRow{ background: var(--vk-violet-tint, #f1e9fa); }
.vkNode.is-current > .vkRow .vkRow-name{ color: var(--vk-violet-4f1697, #4f1697); font-weight: 600; }

/* The drop targets script.js binds (.labelUsersList, .dragHoverX label, .dragHoverX_folder).
   style.css paints .labelUsersList with an opaque gradient (!important) and grows .addHightlight
   by 20% and 10% to the right; in the tree both are an outline on the row instead. */
.vkRow-drop{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: 0; pointer-events: none; border-radius: 10px; }
.vkTree .vkRow-drop,
.vkTree .vkRow-drop.labelUsersList{ background: none !important; width: auto; padding: 0; }
.vkTree .addHightlight{ transform: none; margin-left: 0; margin-top: 0; padding: 0; z-index: auto; }
.vkTree .vkRow.addHightlight,
.vkTree .vkRow-drop.addHightlight,
.vkTree .vkNode--folder.addHightlight > .vkRow{ box-shadow: inset 0 0 0 2px var(--vk-violet, #6e1fd1); background: rgba(var(--vk-violet-rgb, 110, 31, 209), .08) !important; }
.vkTree .vkNode--folder.addHightlight{ background: none; }

.vkRow-chev{
    width: 26px; height: 32px; flex-shrink: 0;
    padding: 0; border: 0; border-radius: 8px; background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--vk-soft, #5f5e6b); cursor: pointer;
}
.vkRow-chev .vkI{ width: 15px; height: 15px; transition: transform .15s ease; }
.vkNode.is-open > .vkRow > .vkRow-chev .vkI{ transform: rotate(90deg); }
.vkRow-chev--none{ cursor: default; }
button.vkRow-chev:hover{ background: var(--vk-fieldh-eae8f0, #eae8f0); }

.vkRow-grip{ display: none; }
.vkTree[data-order="manual"] .vkNode--section > .vkRow > .vkRow-grip,
.vkTree[data-order="manual"] .vkNode--sub > .vkRow > .vkRow-grip,
.vkTree[data-order="manual"] .vkNode--folder > .vkRow > .vkRow-grip,
.vkTree[data-order="manual"] .vkNode--hub > .vkRow > .vkRow-grip,
.vkTree[data-order="manual"] .vkNode--group > .vkRow > .vkRow-grip{
    display: flex; align-items: center; justify-content: center;
    width: 14px; height: 32px; margin-left: -4px;
    color: var(--vk-faint-9d9ca8, #9d9ca8); cursor: grab;
}
.vkTree.is-searching .vkRow-grip{ display: none !important; }
/* a person does not reorder: a section's order is everyone's (main_loads/session/action/dataorderlist_cat.php) */
.vkTree[data-person="1"] .vkRow-grip{ display: none !important; }

.vkRow-link{
    flex-grow: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 1px;
    padding: 5px 4px 5px 2px; min-height: 38px;
    color: var(--vk-text, #16161a) !important; text-decoration: none !important;
}
.vkRow-link--static{ cursor: default; }
.vkNode[aria-expanded] > .vkRow > .vkRow-link--static{ cursor: pointer; }
.vkRow-line{ display: flex; align-items: center; gap: 8px; min-width: 0; }
.vkRow-name{ font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 0 1 auto; }                      /* the name keeps its room: the counts beside it give way first */
.vkRow-name mark{ background: #ffe27a; color: #16161a; border-radius: 3px; padding: 0 1px; }
.vkRow-count{ margin-left: auto; flex-shrink: 0; font-size: 11.5px; color: var(--vk-soft, #5f5e6b); padding-right: 2px; }
/* On the name's own line now, pushed to the right and the first thing to give way when the row is
   tight (2026-09-28, his "tienes espacio en las filas de sidebar"). */
.vkRow-meta{ margin-left: auto; padding-left: 8px; flex: 0 10 auto; min-width: 0;
    font-size: 11.5px; color: var(--vk-soft, #5f5e6b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vkRow-icon{ display: flex; color: var(--vk-soft, #5f5e6b); }
.vkRow-icon .vkI{ width: 16px; height: 16px; }

.vkNode--group > .vkRow .vkRow-name{ font-size: 13.5px; font-weight: 700; color: var(--vk-violet-4f1697, #4f1697); }
.vkNode--hub > .vkRow .vkRow-name{ font-size: 13.5px; font-weight: 600; }
/* every row the same height (his words, 2026-10-10: "los hubs que no tienen hubs hijos son ma altos que el resto. Deberian de tener todas las filas la misma altura. Nos quedamos
   con la altura de los hibs que tienen hijos."): a hub's row had min-height 48px, a group's its own 38 - the hub rows take the group's (was: .vkNode--hub > .vkRow{ min-height: 48px; }) */
.vkNode--full > .vkRow .vkRow-meta{ color: var(--vk-err, #b3261e); }

.vkTag{
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 600; color: var(--vk-soft-4d4c58, #4d4c58);
    background: var(--vk-field, #efeef4); border-radius: 99px; padding: 2px 7px;
}
.vkTag .vkI{ width: 10px; height: 10px; stroke-width: 2.4; }
/* the row's private/shared marks: the icon alone, no word (his ask, 2026-09-29) */
.vkTag--icon{ padding: 3px; border-radius: 50%; }
.vkTag--icon .vkI{ width: 12px; height: 12px; }
.vkTag--trash{ color: var(--vk-warn-8a3b00, #8a3b00); background: var(--vk-warn-tint-fdf0e3, #fdf0e3); }

.vkRow-more{
    width: 30px; height: 30px; flex-shrink: 0; margin-right: 4px;
    padding: 0; border: 0; border-radius: 8px; background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--vk-soft-3c3b46, #3c3b46); cursor: pointer;
    opacity: 0; transition: opacity .12s ease;
}
.vkRow:hover > .vkRow-more,
.vkNode.is-current > .vkRow > .vkRow-more,
.vkNode.menu-open > .vkRow > .vkRow-more,
.vkRow-more:focus-visible{ opacity: 1; }
.vkRow-more:hover{ background: var(--vk-fieldh-e7e5ee, #e7e5ee); }
@media (hover: none){ .vkRow-more{ opacity: 1; } }

.vkTree button:focus-visible,
.vkTree a:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 1px; }


/* ---------------------------------------------------------------- menus */

.vkMenus{ position: static; }
.vkMenu{
    position: fixed;
    z-index: 1030;
    width: 250px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: 6px;
    display: flex; flex-direction: column;
    background: var(--vk-surface, #ffffff);
    border: 1px solid var(--vk-line, #e4e3ea);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(30, 20, 60, .16);
}
.vkMenu[hidden]{ display: none; }
.vkMenu-title{
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--vk-soft, #5f5e6b); padding: 8px 10px 6px 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vkMenu .vkMenu-item{
    display: flex !important; align-items: center;
    width: 100% !important; height: auto !important; min-height: 36px;
    margin: 0 !important; padding: 8px 10px !important;
    border: 0 !important; border-radius: 9px !important;
    background: transparent !important;
    font-size: 13px !important; font-weight: 400 !important; line-height: 1.3 !important;
    color: var(--vk-text, #16161a) !important; text-align: left !important; text-decoration: none !important;
    box-shadow: none !important; float: none !important;
    white-space: normal;
    cursor: pointer;
}
.vkMenu .vkMenu-item:hover,
.vkMenu .vkMenu-item:focus{ background: var(--vk-violet-tint-f3f0fb, #f3f0fb) !important; outline: none; }
.vkMenu .vkMenu-item--danger{ color: var(--vk-err, #b3261e) !important; }
.vkMenu .vkMenu-item[aria-checked="true"]{ font-weight: 600 !important; color: var(--vk-violet-4f1697, #4f1697) !important; }
.vkMenu .vkMenu-item[aria-checked="true"]::after{ content: "✓"; margin-left: auto; }
.vkSafe, .vkSafe-w{ display: contents; }
.vkSafe-prev{ display: none; }


/* ---------------------------------------------------------------- the path above the files */

.vkPath{
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
    margin: 0 0 14px 0; padding: 0;
    font-family: 'Montserrat', sans-serif; font-size: 13px; color: var(--vk-soft, #5f5e6b);
    list-style: none;
}
.vkPath li{ display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }      /* brief AQ: a step named with one long word was as wide as the word (620 px on a 380 px phone) */
.vkPath li + li::before{ content: "›"; color: var(--vk-faint-a3a2ae, #a3a2ae); flex: 0 0 auto; }
.vkPath a{ color: var(--vk-soft, #5f5e6b) !important; text-decoration: none !important; padding: 4px 2px; min-width: 0; overflow-wrap: anywhere; }
.vkPath a:hover{ color: var(--vk-violet-4f1697, #4f1697) !important; text-decoration: underline !important; }
.vkPath [aria-current="page"]{ color: var(--vk-text, #16161a); font-weight: 600; }
.vkPath a[aria-current="page"]{ color: var(--vk-text, #16161a) !important; }           /* every step is a link since 2026-09-26 */
/* the search as the path's last step (2026-10-02 night, his words: "coloca la busqueda al lado de las breadcrumbs, en su estilo que tienen"; parts/category.php):
   the path's own size and colours - the words as the current step, the glass and the x in the path's grey */
.vkPath-search{ gap: 4px; }
.vkPath-searchWords{ display: inline-flex; align-items: center; gap: 6px; color: var(--vk-text, #16161a); font-weight: 600; }
.vkPath-searchWords .fa{ font-size: 12px; color: var(--vk-soft, #5f5e6b); }
.vkPath a.vkPath-searchX{ display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border-radius: 99px; }
.vkPath a.vkPath-searchX .fa{ font-size: 12px; }
.vkPath a.vkPath-searchX:hover{ background: var(--vk-field, #efeef4); text-decoration: none !important; }


/* ---------------------------------------------------------------- the top of the page
   (markup: $vkHeadHtml, $vkRootHtml and $vkEmptyHtml in inc/sidebar_tree.php) */

.vkHead{
    display: flex; flex-direction: column; gap: 22px;
    margin: 4px 0 18px 0;
    font-family: 'Montserrat', sans-serif; color: var(--vk-text, #16161a);
}
.vkHead-top{ display: flex; align-items: flex-start; gap: 16px; }
/* THE HUB'S BANNER ON TOP OF ITS OWN PAGE (2026-10-11, his words with a picture of a group's page: "si el hub tiene banner, cuando clicas dentro se ve el banner que hay en la
   targeta"; inc/sidebar_tree.php, core/vk/hub_card.php vk_hub_page_banner()): its card's cover across the head, above the face and the title, cut to the band as the card cuts it
   (object-fit: cover), with the radius he gave the card's banner (14 px). His picture: ~280 px tall at 1875; lower on a narrower window. */
.vkHead--banner{ --vkBannerH: 230px; }          /* his value, 2026-10-12: "el banner ponlo a una altura de 230px" (it was 180px, before that clamp(140px, 15vw, 280px)) */
.vkHead-banner{ height: var(--vkBannerH); border-radius: 14px; overflow: hidden; background: var(--vk-field, #efeef4); }
.vkHead-banner img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* A HUB'S WHOLE DESCRIPTION UNDER ITS TITLE (2026-10-12, his words: "hemos de hacer aparecer la descripcion completa en la pagina de hub ... que tenga un margen superior inferior igual que el que separa
   el banner del bloque "logo/titulo""; core/vk/hub_card.php vk_hub_desc_html()): its paragraphs as typed, at a reading width. From 1126 px 35 px above and under it - the banner's bottom to the face - with a
   banner (the face's row keeps 14 px under it and the head 22 between its parts: 36 - 1, 22 + 13) and without one (24 + 22 - 11). */
.vkHead-desc{ margin: 0; max-width: 920px; font-size: 14px; line-height: 1.65; color: var(--vk-soft, #5f5e6b); white-space: pre-line; overflow-wrap: anywhere; }
@media (min-width: 1126px){
    .vkHead-desc{ margin: -11px 0 13px; }
    .vkHead--banner > .vkHead-desc{ margin-top: -1px; }
}
.vkHead-titles{ flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* .detailphoto h1 (style.css) floats every title at 17px */
.detailphoto .vkHead-title{
    float: none; width: auto; margin: 0; padding: 0;
    font-family: inherit; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
    color: var(--vk-text, #16161a); text-transform: none; overflow-wrap: anywhere;
}
.vkHead-meta{ margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--vk-soft, #5f5e6b); }
.vkHead-meta .vkTag{ font-size: 11px; padding: 2px 8px; }
.vkTag--public{ color: var(--vk-ok-1f5132, #1f5132); background: var(--vk-ok-tint-e3f3e8, #e3f3e8); }

.vkHead-actions{ flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.vkHead-upload{
    height: 44px; padding: 0 18px;
    border: 0; border-radius: 12px; background: var(--vk-inv, #16161a); color: #ffffff;
    font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.vkHead-upload:hover{ background: var(--vk-invh-2d2d33, #2d2d33); }
.vkHead-more{
    width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 12px; background: var(--vk-surface, #ffffff); color: var(--vk-soft-3c3b46, #3c3b46);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.vkHead-more:hover{ border-color: var(--vk-violet, #6e1fd1); }
/* "Dar acceso a una persona", left of "Subir archivos" (2026-09-26): outlined, so the upload stays first */
.vkHead-give{
    height: 44px; padding: 0 16px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 12px; background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.vkHead-give:hover{ border-color: var(--vk-violet, #6e1fd1); color: var(--vk-violet-4f1697, #4f1697); }
.vkHead-upload:focus-visible, .vkHead-more:focus-visible, .vkHead-give:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }

.vkHead-group{ display: flex; flex-direction: column; gap: 20px; }      /* 20: his value, 2026-10-08 ("implementa: .vkHead-group { gap: 20px; }"; it was 10) */
.detailphoto .vkHead-label{
    float: none; width: auto; margin: 0; padding: 0;
    font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .06em;
    text-transform: uppercase; color: var(--vk-soft, #5f5e6b);
}
.vkChips{ display: flex; flex-wrap: wrap; gap: 8px; }
.vkChip{
    height: 36px; padding: 0 14px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 99px; background: var(--vk-surface, #ffffff);
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--vk-text, #16161a) !important; text-decoration: none !important;
    transition: border-color .15s ease;
    max-width: 100%; min-width: 0;
}
.vkChip:hover, .vkChip:focus-visible{ border-color: var(--vk-violet, #6e1fd1); }
.vkChip:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
.vkChip-count{ font-size: 12px; color: var(--vk-soft, #5f5e6b); }
/* A CHIP IS ONE LINE (brief AQ, 2026-10-07): a name that is a single long word has nowhere to break, and the chip - and with it the whole page of a group, a hub, a section - grew as wide as the word
   (601, 899 px on a 380 px phone: the fixed header, the bar at the foot and the search stretched with it). The chip takes the row's width at most, and its name ends in an ellipsis; the count, the x
   and the arrow keep their size. */
.vkChip-name{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vkChip-count, .vkChip-x, .vkChip .vkI{ flex: 0 0 auto; }
/* The page we are on among its hub's sections (brief H): filled, as the tree marks its current row */
.vkChip.is-current{ border-color: var(--vk-violet, #6e1fd1); background: var(--vk-violet-tint, #f1e9fa); color: var(--vk-violet-4f1697, #4f1697) !important; font-weight: 600; }
.vkChip.is-current .vkChip-count{ color: var(--vk-violet-4f1697, #4f1697); }
/* the way back, first in a «Secciones» row of more than one (2026-10-02 night, his ask; inc/sidebar_tree.php $vkUp): one level up, quieter than a section -
   no fill, a lavender line, the arrow and the name of where it goes */
.vkChip--back{ padding: 0 14px 0 9px; gap: 5px; background: transparent; border-color: var(--vk-violet-line-d9c8f5, #d9c8f5); color: var(--vk-violet-4f1697, #4f1697) !important; }
.vkChip--back .vkI{ width: 14px; height: 14px; transform: rotate(180deg); }
/* A «Selección»'s picked sections on the title's own line, each with the x that takes it out (brief H) */
.vkHead-titleRow{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-width: 0; }
.vkHead-picked{ gap: 6px; }
.vkChip--pick{ height: 32px; padding: 0 8px 0 12px; gap: 6px; }
.vkChip-x{ display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: var(--vk-soft, #5f5e6b); }
.vkChip-x svg{ width: 12px; height: 12px; }
.vkChip--pick:hover .vkChip-x, .vkChip--pick:focus-visible .vkChip-x{ background: var(--vk-violet-tint, #f1e9fa); color: var(--vk-violet-4f1697, #4f1697); }

/* THE TYPE FILTER OF A PAGE OF FILES (brief AJ, 2026-10-06; core/vk/typefilter.php writes the row, view/js/vk_typefilter.js keeps it in view). His words: "Añade un filtrador por extension de
   archivo, segun los tipos de archivos que haya en la pagina que se esta mostrando." One line beside the label «Archivos» of the head - «Todos» and a chip per type with its count -
   that scrolls sideways when there are more types than room (it never wraps, a phone included). A chip that is on is filled as the section's current chip is (.vkChip.is-current): the
   same tokens, so dark takes it from vk_theme.css. A page with no head has the same line on its own (.vkHead--tf). */
.vkHead-filesRow{ display: flex; align-items: center; gap: 14px; min-width: 0; }
.detailphoto .vkHead-filesRow .vkHead-label{ flex: 0 1 auto; min-width: 0; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vkTf{
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; gap: 6px; padding: 3px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: thin; scrollbar-color: var(--vk-line-strong, #cfcdd9) transparent;
}
/* an edge with more behind it fades (view/js/vk_typefilter.js sets is-l / is-r): a chip cut by the strip's edge does not read as a word of its own beside the label */
.vkTf.is-r{ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
.vkTf.is-l{ -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent); }
.vkTf.is-l.is-r{ -webkit-mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent); }
.vkTf::-webkit-scrollbar{ height: 6px; }
.vkTf::-webkit-scrollbar-thumb{ background: var(--vk-line-strong, #cfcdd9); border-radius: 99px; }
.vkTf::-webkit-scrollbar-track{ background: transparent; }
.vkTf-chip, .vkHl-chip{
    flex: 0 0 auto; height: 30px; padding: 0 12px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 99px; background: var(--vk-surface, #ffffff);
    display: inline-flex; align-items: center; gap: 7px;
    font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1; white-space: nowrap;
    color: var(--vk-text, #16161a) !important; text-decoration: none !important; cursor: pointer;
    transition: border-color .15s ease;
}
.vkTf-n, .vkHl-n{ font-weight: 400; color: var(--vk-soft, #5f5e6b); font-variant-numeric: tabular-nums; }
.vkTf-chip:hover, .vkTf-chip:focus-visible{ border-color: var(--vk-violet, #6e1fd1); }
.vkTf-chip:focus-visible, .vkHl-chip:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1) !important; outline-offset: 1px; }          /* !important: style.css gives every link `outline: 0 !important` */
.vkTf-chip[aria-pressed="true"], .vkHl-chip[aria-pressed="true"]{ border-color: var(--vk-violet, #6e1fd1); background: var(--vk-violet-tint, #f1e9fa); color: var(--vk-violet-4f1697, #4f1697) !important; }
.vkTf-chip[aria-pressed="true"] .vkTf-n, .vkHl-chip[aria-pressed="true"] .vkHl-n{ color: var(--vk-violet-4f1697, #4f1697); }
.vkTf-chip--all[aria-pressed="true"], .vkHl-chip--all[aria-pressed="true"]{ cursor: default; }
.vkHead--tf{ margin: 4px 0 14px 0; }
/* Up to 1125px the files start under a fixed 48px bar (see the media block of the phones below): a page with no path and no head has this line first, so it takes that job, as the path does */
@media (max-width: 1125px){
    .vkHead.vkHead--tf{ padding: 0 8px; }
    .vkHead--alone{ margin-top: 58px; }
    .vkPath ~ .vkHead--alone{ margin-top: 4px; }                                   /* ...unless a path above it already did (a folder's page has a path and no head) */
    .vkHead--tf ~ .containernews{ margin-top: 8px; }
}
@media (max-width: 640px){
    .vkTf-chip{ height: 34px; padding: 0 13px; }
    .detailphoto .vkHead-filesRow .vkHead-label{ max-width: 40%; }
}
@media (prefers-reduced-motion: reduce){
    .vkTf-chip{ transition: none; }
}

/* THE HEAD'S CHIPS AS KEYS (2026-10-08, his words "these buttons need to be the button style we use", with his picture of a hub's head: «Sections», «Files», «Show»). The
   raised key of the tree's labels and the floating line's chips (above: .vkLbl-chip; view/css/vk_stickhead.css): a face with a line of light on top, a bezel and a soft shadow,
   corners of 9 px; pressed - the page's section, a type that is on - in the look's accent; pushed down 1 px while pressed. A section that is not a link (--static) is the subtle
   key of the cards' small tiles: nobody presses it. A «Show» chip that is off is a hollow - sunk, its name still struck through - instead of a dashed outline; one that is on keeps
   its dot. The rows that scroll sideways (types, «Show») clip what they hold: they get room for the bezels and the shadow, given back with negative margins, so nothing moves; the
   section chips wrap, 12 px apart. Prefixed with .vkHead so they win over each chip's own rules whatever order the files load in. Dark and light. */
.vkHead .vkChips{ gap: 12px; }
.vkHead .vkTf, .vkHead .vkGf{ gap: 12px; padding: 5px 6px 18px; margin: -5px 0 -18px; }
.vkHead .vkChip, .vkHead .vkTf-chip, .vkHead .vkGf-chip, .vkHead .vkHl-chip,
.vkHead .vkChip:hover, .vkHead .vkTf-chip:hover, .vkHead .vkGf-chip:hover, .vkHead .vkHl-chip:hover{
    border: 0; border-radius: 9px;
    background: linear-gradient(180deg, #fdfdfe 0%, #f1f3f6 100%);
    box-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .9),
        0 0 0 1px #d6dbe2, 0 0 0 3px #eef1f4, 0 -1px 0 3px #dfe4ea, 0 6px 10px 1px rgba(30, 45, 65, .14);
    transition: background .15s ease, transform .15s ease, color .15s ease, opacity .15s ease;
}
.vkHead .vkChip:hover, .vkHead .vkTf-chip:hover, .vkHead .vkGf-chip:hover, .vkHead .vkHl-chip:hover{ background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%); }
.vkHead .vkChip.is-current, .vkHead .vkTf-chip[aria-pressed="true"], .vkHead .vkHl-chip[aria-pressed="true"]{
    background: linear-gradient(180deg, color-mix(in srgb, var(--vk-violet, #6e1fd1) 5%, #ffffff) 0%, color-mix(in srgb, var(--vk-violet, #6e1fd1) 13%, #ffffff) 100%);
    box-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .9),
        0 0 0 1px color-mix(in srgb, var(--vk-violet, #6e1fd1) 30%, #ffffff), 0 0 0 3px color-mix(in srgb, var(--vk-violet, #6e1fd1) 7%, #ffffff),
        0 -1px 0 3px color-mix(in srgb, var(--vk-violet, #6e1fd1) 18%, #ffffff), 0 6px 10px 1px color-mix(in srgb, var(--vk-violet, #6e1fd1) 16%, transparent);
}
.vkHead a.vkChip:active, .vkHead .vkTf-chip:active, .vkHead .vkGf-chip:not([aria-disabled="true"]):active, .vkHead .vkHl-chip:active{ transform: translateY(1px); }
.vkHead .vkChip--static, .vkHead .vkChip--static:hover{
    background: linear-gradient(180deg, #fdfdfe 0%, #f6f7f9 100%);
    box-shadow: inset 0 1px 0 #ffffff, 0 0 0 1px #e3e7ec, 0 2px 5px rgba(30, 45, 65, .06);
}
.vkHead .vkGf-chip[aria-pressed="false"], .vkHead .vkGf-chip[aria-pressed="false"]:hover{
    background: linear-gradient(180deg, #eceef2 0%, #f6f7f9 100%);
    box-shadow: inset 0 1px 2px rgba(30, 45, 65, .16), 0 0 0 1px rgba(30, 45, 65, .06);
}
.vkHead .vkGf-chip[aria-pressed="false"]:hover{ color: var(--vk-text, #16161a); }
html[data-theme="dark"] .vkHead .vkChip, html[data-theme="dark"] .vkHead .vkTf-chip, html[data-theme="dark"] .vkHead .vkGf-chip, html[data-theme="dark"] .vkHead .vkHl-chip,
html[data-theme="dark"] .vkHead .vkChip:hover, html[data-theme="dark"] .vkHead .vkTf-chip:hover, html[data-theme="dark"] .vkHead .vkGf-chip:hover, html[data-theme="dark"] .vkHead .vkHl-chip:hover{
    background: linear-gradient(180deg, #303139 0%, #2a2b32 100%);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(255, 255, 255, .05),
        0 0 0 1px #16161b, 0 0 0 3px #25262c, 0 -1px 0 3px #34353d, 0 6px 12px 1px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .vkHead .vkChip:hover, html[data-theme="dark"] .vkHead .vkTf-chip:hover, html[data-theme="dark"] .vkHead .vkGf-chip:hover, html[data-theme="dark"] .vkHead .vkHl-chip:hover{ background: linear-gradient(180deg, #34353e 0%, #2d2e36 100%); }
html[data-theme="dark"] .vkHead .vkChip.is-current, html[data-theme="dark"] .vkHead .vkTf-chip[aria-pressed="true"], html[data-theme="dark"] .vkHead .vkHl-chip[aria-pressed="true"]{
    background: linear-gradient(180deg, color-mix(in srgb, var(--vk-violet, #ba93f5) 26%, #303139) 0%, color-mix(in srgb, var(--vk-violet, #ba93f5) 18%, #2a2b32) 100%);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(255, 255, 255, .05),
        0 0 0 1px #16161b, 0 0 0 3px color-mix(in srgb, var(--vk-violet, #ba93f5) 14%, #25262c), 0 -1px 0 3px color-mix(in srgb, var(--vk-violet, #ba93f5) 26%, #34353d),
        0 6px 12px 1px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .vkHead .vkChip--static, html[data-theme="dark"] .vkHead .vkChip--static:hover{
    background: linear-gradient(180deg, #2e2f37 0%, #2a2b32 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px #1d1d23, 0 2px 6px rgba(0, 0, 0, .28);
}
html[data-theme="dark"] .vkHead .vkGf-chip[aria-pressed="false"], html[data-theme="dark"] .vkHead .vkGf-chip[aria-pressed="false"]:hover{
    background: linear-gradient(180deg, #1d1d23 0%, #24242b 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
}
@media (prefers-reduced-motion: reduce){ .vkHead .vkChip, .vkHead .vkTf-chip, .vkHead .vkGf-chip, .vkHead .vkHl-chip{ transition: none; } .vkHead a.vkChip:active, .vkHead .vkTf-chip:active, .vkHead .vkGf-chip:active, .vkHead .vkHl-chip:active{ transform: none; } }
/* THE START PAGE'S LABELS (2026-10-12, his words: "en la pagina inicial del admin donde estan todos los hubs pon un selctor de etiquetas como en el de la sidebar, para ver los hubs que elija yo al momento en el body";
   inc/sidebar_tree.php, view/js/vk_home.js): the keys above, at the right of the title block and centred on it; they wrap to the left when they outgrow their room. A card they leave out is not drawn. */
.vkHl{ display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; align-self: center; gap: 12px; max-width: 62%; padding: 5px 6px 8px; margin: -5px 0 -8px auto; }
.vkHl-name{ max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.vkCards > .vkCard[data-hl-out="1"]{ display: none; }
@media (max-width: 1125px){ .vkHl{ max-width: none; justify-content: flex-start; align-self: stretch; margin: 4px 0 0; } }
/* THE START PAGE'S TITLE, HIS TO WRITE (2026-10-12, "Que el campo sea editable"; view/js/vk_home.js): a quiet pencil after it - the soft ink, the accent on hover - and, while he writes, a field
   with the title's own letters, as wide as the title row allows. */
.vkHomeTitle-edit{
    flex: 0 0 auto; width: 32px; height: 32px; margin: 0; padding: 0;
    border: 1px solid transparent; border-radius: 50%; background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--vk-soft, #5f5e6b); cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.vkHomeTitle-edit:hover, .vkHomeTitle-edit:focus-visible{ color: var(--vk-violet, #6e1fd1); border-color: var(--vk-violet, #6e1fd1); }
.vkHomeTitle-edit:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1) !important; outline-offset: 1px; }
.vkHomeTitle-input{
    flex: 1 1 auto; min-width: 0; max-width: 640px; height: 40px; margin: -3px 0; padding: 0 10px;
    border: 1px solid var(--vk-violet, #6e1fd1); border-radius: 10px; background: var(--vk-surface, #ffffff);
    font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--vk-text, #16161a);
}
.vkHomeTitle-input:focus{ outline: 2px solid color-mix(in srgb, var(--vk-violet, #6e1fd1) 35%, transparent); outline-offset: 1px; }
html[data-theme="dark"] .vkHomeTitle-input{ background: var(--vk-field, #24242b); }
@media (prefers-reduced-motion: reduce){ .vkHomeTitle-edit{ transition: none; } }

/* hub and group cards: four to a row where they fit (his screen), three down to 1366 px as before, then two and one - never more than four, never under 270 px
   (his "haz las cajas de hub y grupo a 34 columnas", 2026-10-07, read as three or four; they were three, stretched over the whole row) */
/* ...and then five (his "aqui haz que haya 5 hubs por linea", 2026-10-07, on PORTFOLIO's page with his cards of at most 280 px): never more than five, never under
   240 px - five at 1875 px, four at 1600, three at 1366 and 1180, then two and one */
.vkCards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 65px) / 5)), 1fr)); gap: 16px; }
/* A HUB'S CARD TWO COLUMNS WIDE (2026-10-10, his words: "añade la opcion de que un hub lo podemos alargar en la regilla, por 2 espacios maximo"; companiesTable.card_wide, the hub's
   «⋯» › «Tarjeta ancha»): it takes two columns where the grid has two or more, and one where the grid has one (under 496 px of grid: two columns of 240 and the gap). Dense, so a wide
   card that does not fit at a row's end leaves no hole: the next card fills it. The grid is its own size container for that, which never sizes it - it is as wide as its place. */
.vkCards{ grid-auto-flow: row dense; container-type: inline-size; }
.vkCards > .vkCard--wide{ grid-column: span 2; }
@container (max-width: 495.98px){ .vkCards > .vkCard--wide{ grid-column: auto; } }
/* his values, 2026-10-07 ("Implement this to change the hub cards design", with a screenshot of the dark look): a card at most 280 px wide, and in the dark look a
   gradient laid over it, under its contents. The gradient is dark (#17151c): on the light look's white cards it would only grey them, so it is the dark look's. */
html[data-theme="dark"] .vkCards a:before {
content: "";width: calc(100% - 4px) !important;display: flex;background: linear-gradient(39deg, transparent, #17151c6b, #17151cc4);position: absolute;top: 0;height: calc(100% - 4px);left: 0;border-radius: 33px;margin: 2px;z-index: 0;}      /* 33 px: his retouch of 2026-10-08 (.vkCards a:before{border-radius: 33px;}) */
/* his value (2026-10-08, "una cosita: implementa esto"): the shade's top-left corner wider */
html[data-theme="dark"] .vkCards a:before{
border-radius: 64px 33px 33px 33px;}

.vkCard-top , .vkCard-name, .vkCard-meta, .vkCard-cap, .vkCard-foot {
position: relative;z-index:1;
}

.vkCards a {max-width: initial;width:100%;position: relative;}      /* max-width: his value, 2026-10-08 (was 280px): a card fills its column */

/* THE HUB CARD (brief Y, 2026-10-02 night; core/vk/hub_card.php writes it). His words: "mas exclusivos, mas hubs, mas preciosos, mas sutiles i tech. Siguiendo nuestro estilo", and, of the
   two ways shown, "la A ... pero permite que podamos poner una portada como la B": A is every hub's card - a mark, a tag, the name, a mono line, a capacity line, the last three files;
   B (.vkCard--cover) puts a picture of the hub's on top when the admin chose one. The numbers are those of the mock-up he saw. JetBrains Mono is the one new face, from Google Fonts as
   Montserrat is (inc/header.php); without it the system's own mono stands in. The mono pieces say !important because style.css gives every span `font-family: inherit !important`. */
.vkCard{
    --vk-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    position: relative; display: flex; flex-direction: column; min-width: 0;
    padding: 16px 16px 14px;
    border: 1px solid var(--vk-line-soft-ecebf2, #ecebf2); border-radius: 18px; background: var(--vk-surface, #ffffff);
    color: var(--vk-text, #16161a) !important; text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vkCard:hover, .vkCard:focus-visible{ transform: translateY(-2px); border-color: var(--vk-violet-line-d9c8f5, #d9c8f5); box-shadow: 0 8px 22px rgba(79, 22, 151, .08); }
.vkCard:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1) !important; outline-offset: 2px; }          /* !important: style.css gives every link `outline: 0 !important` */
.vkCard--static:hover{ transform: none; border-color: var(--vk-line-soft-ecebf2, #ecebf2); box-shadow: none; }
/* the mark and the tag */
.vkCard-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vkCard-mark{
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;      /* round, all of them the same size (his ask, 2026-10-06) */
    display: flex; align-items: center; justify-content: center;
    background: var(--vk-tint, var(--vk-violet-tint, #f1e9fa)); color: var(--vk-ink, var(--vk-violet, #6e1fd1));
}
.vkCard-ini{ font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.vkCard-mark.is-pale{ box-shadow: inset 0 0 0 1px var(--vk-line, #e4e3ea); }          /* a white or cream Primario: its tint is almost the card's own white */
/* a logo fills its round mark, with no margin inside (his ask, 2026-10-06: "ponlos redondos ... y que no tengan margen interior. Del mismo tamaño") */
.vkCard-mark.has-logo{ background: #ffffff; box-shadow: inset 0 0 0 1px var(--vk-line-soft-ecebf2, #ecebf2); }
.vkCard-logo{ display: block; width: 100%; height: 100%; padding: 0; box-sizing: border-box; object-fit: contain; }   /* contain: a wide logo stays whole (cover cut a wordmark's ends) */
.vkCard-folder{ display: block; }
.vkCard-tag{ flex: 0 0 auto; padding: 3px 7px; border-radius: 6px; background: var(--vk-violet-tint, #f1e9fa); color: var(--vk-violet, #6e1fd1); font: 500 10px/1.2 var(--vk-mono) !important; letter-spacing: .1em; white-space: nowrap; }
/* the name, and the line under it */
.vkCard-name{ display: block; margin-top: 12px; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--vk-text, #16161a); overflow-wrap: anywhere; }
.vkCard-meta{ display: block; margin-top: 4px; font: 400 11px/1.5 var(--vk-mono) !important; color: var(--vk-soft-6b6a76, #6b6a76); }
/* the capacity: 3px of track, filled to what the tree's row says; amber at or past the limit */
.vkCard-cap{ display: block; margin-top: 12px; }
.vkCard-bar{ display: block; height: 3px; border-radius: 99px; background: var(--vk-field, #efeef4); overflow: hidden; }
html[data-theme="dark"] .vkCard-bar{ border-top: solid 1px #000000; }      /* his value, 2026-10-08 ("en el dark mode") */
.vkCard-bar i{ display: block; height: 100%; border-radius: 99px; background: var(--vk-violet, #6e1fd1); }
.vkCard-labels{ display: flex; justify-content: space-between; gap: 8px; font: 400 10.5px/1.3 var(--vk-mono) !important; color: var(--vk-soft-8a8995, #8a8995); font-variant-numeric: tabular-nums; }
.vkCard-bar + .vkCard-labels{ margin-top: 5px; }
.vkCard-cap.is-over .vkCard-bar i{ background: #f0a020; }
.vkCard-cap.is-over .vkCard-used{ color: var(--vk-warn-a86400, #a86400); }
/* the foot: the last files, overlapping, and «Abrir →» */
.vkCard-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.vkCard-foot--end{ justify-content: flex-end; }
.vkCard-thumbs{ display: flex; align-items: center; min-width: 0; }
.vkCard-th{
    position: relative; flex: 0 0 auto; width: 28px; height: 28px; margin-left: -8px; box-sizing: border-box; border-radius: 8px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--vk-field-f4f3f8, #f4f3f8); box-shadow: 0 0 0 2px var(--vk-surface, #ffffff);
}
.vkCard-th:first-child{ margin-left: 0; }
.vkCard-th img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.vkCard-ext{ font: 600 8px/1 var(--vk-mono) !important; letter-spacing: .02em; color: var(--vk-soft-6b6a76, #6b6a76); }
.vkCard-th:not(:last-child) .vkCard-ext{ margin-right: 8px; }          /* the next tile covers the right 8px of this one: the letters go in the part that shows */
.vkCard-ext.is-long{ font-size: 6.5px !important; letter-spacing: 0; }
.vkCard-th.is-empty{ background: var(--vk-surface, #ffffff); border: 1.5px dashed var(--vk-line-strong-d6d4e0, #d6d4e0); }
/* the card's small tiles as keys, subtler - nobody presses them (2026-10-08, his words "esto tambien, estilo como los botones, pero mas sutil, ya que no es clicable las
   cajas pequeñas"): a face with a faint line on top, the ring that parts them in the card's own colour with a hairline round it, a soft shadow; a picture covers the face. An
   empty one is a small hollow instead of a dashed outline. */
.vkCard-th{
    background: linear-gradient(180deg, #ffffff 0%, #f1f3f6 100%);
    box-shadow: inset 0 1px 0 #ffffff, 0 0 0 2px var(--vk-surface, #ffffff), 0 0 0 3px rgba(30, 45, 65, .08), 0 3px 6px rgba(30, 45, 65, .12);
}
.vkCard-th.is-empty{
    border: 0; background: linear-gradient(180deg, #eceef2 0%, #f6f7f9 100%);
    box-shadow: inset 0 1px 2px rgba(30, 45, 65, .16), 0 0 0 2px var(--vk-surface, #ffffff), 0 0 0 3px rgba(30, 45, 65, .06);
}
html[data-theme="dark"] .vkCard-th{
    background: linear-gradient(180deg, #35363e 0%, #2b2c33 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 2px #232329, 0 0 0 3px rgba(255, 255, 255, .04), 0 3px 6px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .vkCard-th.is-empty{
    border: 0; background: linear-gradient(180deg, #1d1d23 0%, #24242b 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), 0 0 0 2px #232329, 0 0 0 3px rgba(255, 255, 255, .04);
}
/* ROUND, IN A BEZEL (2026-10-12, his CSS and his words with the cards' last files circled: "Adapta estas propiedades a los elemeentos que te señalo, para que queden como ves en la
   imagen" - border-radius 99px and the five-ring box-shadow below, exactly his values in the dark look; the light look the same rings in light tones). Shadows take no room: the
   tiles keep their size and their overlap. */
.vkCard-th, .vkCard-th.is-empty{ border-radius: 99px; }
.vkCard-th:not(:last-child) .vkCard-ext{ margin-right: 6px; }
.vkCard-th{
    box-shadow: #ffffff 0 0 0 2px, #e3e5eb 0 1.5px 0 3px, #f8f9fb 0 -2.5px 0 4.5px, #cfd2da 0 2.5px 0 4.5px, #eceef2 0 0 0 7px, rgba(30, 45, 65, .18) 0 4px 10px 5px;
}
.vkCard-th.is-empty{
    box-shadow: inset 0 1px 2px rgba(30, 45, 65, .16), #ffffff 0 0 0 2px, #e3e5eb 0 1.5px 0 3px, #f8f9fb 0 -2.5px 0 4.5px, #cfd2da 0 2.5px 0 4.5px, #eceef2 0 0 0 7px, rgba(30, 45, 65, .14) 0 4px 10px 5px;
}
html[data-theme="dark"] .vkCard-th{
    box-shadow: rgb(14, 14, 18) 0px 0px 0px 2px, rgb(60, 62, 72) 0px 1.5px 0px 3px, rgb(74, 75, 88) 0px -2.5px 0px 4.5px, rgb(20, 20, 24) 0px 2.5px 0px 4.5px, rgb(43, 44, 52) 0px 0px 0px 7px, rgba(0, 0, 0, 0.45) 0px 4px 10px 5px;
}
html[data-theme="dark"] .vkCard-th.is-empty{
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), rgb(14, 14, 18) 0px 0px 0px 2px, rgb(60, 62, 72) 0px 1.5px 0px 3px, rgb(74, 75, 88) 0px -2.5px 0px 4.5px, rgb(20, 20, 24) 0px 2.5px 0px 4.5px, rgb(43, 44, 52) 0px 0px 0px 7px, rgba(0, 0, 0, 0.45) 0px 4px 10px 5px;
}
.vkCard-go{ margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--vk-violet-4f1697, #4f1697); white-space: nowrap; }
.vkCard-arrow{ display: inline-block; transition: transform .18s ease; }
.vkCard:hover .vkCard-arrow, .vkCard:focus-visible .vkCard-arrow{ transform: translateX(3px); }
/* his values, 2026-10-08 ("implementa retoques en las cards"): the arrow alone, bigger, in his violet; it still slides on hover (above) */
.vkCard-arrow{
top: -1px;
width: auto;
position: relative;
font-size: 24px;
height: 20px !important;
display: flex;
align-items: center;
justify-content: center;
color: var(--vk-hl, var(--vk-violet, #ba93f5));      /* the look's accent (his "este icono tambien debe de llevar el color de acento", 2026-10-08): «Acento del modo oscuro» / «claro», his #ba93f5 the dark palette's own */
}
/* B, THE BANNER (2026-10-10, his picture of a hub's card, «Dmany»; core/vk/hub_card.php writes it): the picture across the card's top, 5 px from its edges, its top corners following
   the card's; the round mark on the banner's lower edge, in line with the text, on the hub's colour or the banner's own (--vk-markbg: the hub's Primario, else the colour most of the
   banner is; its letters white or black, whichever reads, and in the dark look the accent on a deep colour, as his picture); the name and the mono line; the hub's description when it
   has one, two lines at most, with room above and below ("respeta que la descricion respire"); then the last files and the arrow. */
.vkCard--cover{ padding-top: 5px; }
/* his values, the same day, with a picture of the card ("Dmany"): the banner taller, its top-left corner wide, its foot rounded too, a grey line under it */
.vkCard-cover {
    display: block;
    height: 102px;
    margin: 0 -11px 0px -11px;
    border-radius: 60px 31px 15px 15px;
    padding-bottom: 0px;
    overflow: hidden;
    background: var(--vk-field-f4f3f8, #f4f3f8);
    border-bottom: 2px solid #5f5f5fd4;
}
.vkCard-cover {border-radius: 14px 14px;}        /* his value, 2026-10-10 ("implementa esto") */
.vkCard-cover img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.vkCard-cover, .vkCard-desc{ position: relative; z-index: 1; }          /* above the dark look's shade (.vkCards a:before), as the other pieces: his picture's banner is not shaded */
.vkCard--cover .vkCard-mark{ position: relative; z-index: 1; margin: -24px 0 0 5px; }
.vkCard--cover .vkCard-mark.has-bg, html[data-theme="dark"] .vkCard--cover .vkCard-mark.has-bg{ background: var(--vk-markbg); color: var(--vk-markink); }
html[data-theme="dark"] .vkCard--cover .vkCard-mark.has-bg.is-deep{ color: var(--vk-hl, var(--vk-violet, #ba93f5)); }
/* then: "coloca la etiqueta de arriba a la derecha, del estilo "HUB"" - the tag over the banner's top right corner, inside its curve; "Añade margin despues del logo, para wue
   el nomnbre d la empresa respire mas" - the name further from the mark; and the capacity line under the name's line (core/vk/hub_card.php), as design A has it */
.vkCard-corner{ position: absolute; top: 16px; right: 18px; z-index: 2; display: flex; }
.vkCard--cover .vkCard-name{ margin-top: 20px; }
.vkCard-desc{
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    margin-top: 14px; font-size: 12.5px; font-weight: 500; line-height: 1.55; color: var(--vk-soft-6b6a76, #6b6a76); overflow-wrap: anywhere;
}
.vkCard--cover .vkCard-foot{ padding-top: 18px; }
/* his values, 2026-10-08: the name further from the mark (a cover's card keeps its 0, above), and under the pointer a green edge and a soft green glow */
.vkCard:not(.vkCard--cover) .vkCard-name{ margin-top: 22px; }
/* ONE ROW, ONE LINE (2026-10-10, his words: "para que el contenido de las cajas se vea alineado horizontalmente a la vista, calibra mejor los espacios para conseguir unos espacios mas
   proporcionales entre elementos"): in a grid of cards each card is six rows of the grid itself (subgrid) - its head (the banner and its mark, or the mark), its name, its line, its capacity,
   its description, its foot - so a piece sits at the same height as the same piece of the cards beside it, whatever each card has or lacks (a banner, a description, a name on two lines): what
   one lacks is room left empty. A plain card's mark sits at the foot of its head, level with the banner cards' marks, and its tag in its top right corner, as the banner card's. One rhythm:
   26 px from the mark to the name, 10 to its line, 18 to the capacity, 14 to the description, 18 to the foot. */
.vkCards > .vkCard{ display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
.vkCards > .vkCard > .vkCard-top, .vkCards > .vkCard > .vkCard-head{ grid-row: 1; align-self: end; }
.vkCards > .vkCard > .vkCard-name{ grid-row: 2; }
.vkCards > .vkCard > .vkCard-meta{ grid-row: 3; }
.vkCards > .vkCard > .vkCard-cap{ grid-row: 4; }
.vkCards > .vkCard > .vkCard-desc{ grid-row: 5; }
.vkCards > .vkCard > .vkCard-foot{ grid-row: 6; align-self: end; margin-top: 0; }
.vkCard-head{ display: block; position: relative; z-index: 1; }
.vkCards > .vkCard:not(.vkCard--cover) > .vkCard-top{ position: static; }                 /* so the tag is placed on the card's corner, not on the mark's row */
.vkCard:not(.vkCard--cover) .vkCard-top .vkCard-mark{ position: relative; z-index: 1; }    /* above the dark look's shade, as the row was */
.vkCard:not(.vkCard--cover) .vkCard-top .vkCard-tag{ position: absolute; top: 16px; right: 16px; z-index: 2; }
.vkCard .vkCard-name, .vkCard:not(.vkCard--cover) .vkCard-name, .vkCard--cover .vkCard-name{ margin-top: 26px; }     /* his "de manera geneal, deja mas espacio entr el logo y el titulo de los hubs" (the same night): 18 -> 26 */
.vkCard-meta{ margin-top: 10px; }        /* his "deja un poco mas de deseparacion, solo un poco mas, entre los 3 elementos del medio. titulo, subtitulo y barra progreso" (the same night): 6 -> 10 */
.vkCard-cap{ margin-top: 18px; }         /* and 14 -> 18 */
.vkCard-desc{ margin-top: 14px; }
/* the card's description in the app's mono, small and quiet (his values, 2026-10-12: "en la descripcion de la caja de los hubs añade estas propiedades"; the hub page's own is left as it is) */
.vkCard-desc{ font-family: "Departure Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 11px; margin-top: 20px; margin-bottom: 6px; color: #a6a3b9; }
/* A WIDE CARD SAYS ITS NAME AND ITS FIGURES ON ONE LINE (2026-10-10, his words, with a picture of a two-space card - the name and its line circled, an arrow to the empty right of the name:
   "si la targeta es muy larga, coloca estos elementos en linea"): the line goes up into the name's row, at its right; the row it leaves stays as tall as the cards beside it need, so the
   capacity, the description and the foot still line up with theirs. Only while the card really is two columns wide (a grid of one column draws it as any other). */
@container (min-width: 496px){
    .vkCards > .vkCard--wide{ grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
    .vkCards > .vkCard--wide > *{ grid-column: 1 / -1; }
    .vkCards > .vkCard--wide > .vkCard-name{ grid-column: 1; align-self: baseline; }
    .vkCards > .vkCard--wide > .vkCard-meta{ grid-row: 2; grid-column: 2; align-self: baseline; margin-top: 26px; text-align: right; white-space: nowrap; }
}
.vkCard-foot, .vkCard--cover .vkCard-foot{ padding-top: 18px; }
/* THE KEY TO THE TREE in the foot (core/vk/hub_card.php .vkCard-locate; view/js/sidebar_tree.js): a small round key before the arrow, the file cards' «Ver en la barra» icon */
.vkCard-locate{
    flex: 0 0 auto; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: var(--vk-soft-6b6a76, #6b6a76); background: var(--vk-field, #efeef4); font-size: 13px; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.vkCard-locate:hover, .vkCard-locate:focus-visible{ color: var(--vk-hl, var(--vk-violet, #6e1fd1)); background: var(--vk-fieldh, #e6e4ee); outline: none; }
.vkCard-locate + .vkCard-go{ margin-left: 4px; }
html[data-theme="dark"] .vkCard-locate{ background: rgba(255, 255, 255, .06); color: var(--vk-soft, #b5b4c0); }
html[data-theme="dark"] .vkCard-locate:hover, html[data-theme="dark"] .vkCard-locate:focus-visible{ background: rgba(255, 255, 255, .12); color: var(--vk-hl, #ba93f5); }
.vkCard:hover, .vkCard:focus-visible{ border-color: #5c9d8954; box-shadow: 0 0px 35px rgb(17 106 51 / 20%); }
/* a file card carried onto a hub's card (view/js/script.js vkKidDrop, 2026-10-10): the hub it would go to, lit with the violet edge a hub's row takes in the tree (.addHightlight there) */
.vkCard.vkCard--drop{ transform: translateY(-2px); border-color: var(--vk-violet, #6e1fd1); box-shadow: inset 0 0 0 1px var(--vk-violet, #6e1fd1), 0 8px 26px rgba(var(--vk-violet-rgb, 110, 31, 209), .25);
    background-image: linear-gradient(rgba(var(--vk-violet-rgb, 110, 31, 209), .08), rgba(var(--vk-violet-rgb, 110, 31, 209), .08)); }
@media (prefers-reduced-motion: reduce){
    .vkCard{ transition: border-color .18s ease, box-shadow .18s ease; }
    .vkCard:hover, .vkCard:focus-visible{ transform: none; }
    .vkCard-arrow{ transition: none; }
    .vkCard:hover .vkCard-arrow, .vkCard:focus-visible .vkCard-arrow{ transform: none; }
}
/* A hub's logo (inc/sidebar_tree.php $vkLogoOf, his ask of 2026-09-29): round as he drew it, the picture whole
   inside it on white - a logo is never cropped - in a page's title block before the title. The cards draw it square in their mark (.vkCard-logo, brief Y). */
.vkLogo{ flex: 0 0 auto; display: block; border-radius: 50%; object-fit: contain; background: #ffffff; border: 1px solid var(--vk-line, #e4e3ea); }
.vkHead-logo{ width: 58px; height: 58px; }
/* THE HUBS' ROUND MARKS IN THE RADAR'S BEZEL (2026-10-08, his words "Necesito que apliques un reborde como este en los logos redondos de los hubs" and, with the radar's
   picture, "reborde como este. pero no el interior"): round each card's mark and each title block's logo, the ring of view/css/vk_radar.css - a sunken rim, dark above and
   catching the light below, then the bezel's body, lit at the top and dark at the foot, and its shadow. Drawn outside the circle with shadows (the mark clips what is
   inside it), so nothing moves and what is inside - initials or a logo - stays as it was. The dark look's metal; the light look's silver. The light at the top and the dark at
   the foot sit INSIDE the ring's width (shifted up or down, narrower), so its outline stays round: shifted out past it they made the ring taller than wide - an oval (his
   "porque sino se ven ovaladas las redondas", the same day). */
.vkCard-mark, .vkCard-mark.is-pale, .vkCard-mark.has-logo{
    box-shadow: 0 0 0 1.5px #b9bec8, 0 1px 0 2px #f7f8fa, 0 -2px 0 3px #ffffff, 0 2px 0 3px #c2c6cf, 0 0 0 5px #e4e7ec, 0 3px 7px 4px rgba(30, 45, 65, .16);
}
/* a hub with no logo: its card's mark, bigger (inc/sidebar_tree.php $vkHeadFace, 2026-10-08) */
.vkHead-mark{ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--vk-tint, var(--vk-violet-tint, #f1e9fa)); color: var(--vk-ink, var(--vk-violet, #6e1fd1)); }
.vkHead-mark .vkCard-ini{ font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.vkHead-logo.vkLogo, .vkHead-logo.vkHead-mark{
    border: 0;
    box-shadow: 0 0 0 2px #b9bec8, 0 1.5px 0 3px #f7f8fa, 0 -2.5px 0 4.5px #ffffff, 0 2.5px 0 4.5px #c2c6cf, 0 0 0 7px #e4e7ec, 0 4px 10px 5px rgba(30, 45, 65, .16);
}
html[data-theme="dark"] .vkCard-mark, html[data-theme="dark"] .vkCard-mark.is-pale, html[data-theme="dark"] .vkCard-mark.has-logo{
    box-shadow: 0 0 0 1.5px #0e0e12, 0 1px 0 2px #3c3e48, 0 -2px 0 3px #4a4b58, 0 2px 0 3px #141418, 0 0 0 5px #2b2c34, 0 3px 7px 4px rgba(0, 0, 0, .45);
}
/* his value (2026-10-08, "ademas implementa esto"): a hub card's round mark in the dark look on the same soft grey gradient as the title's (above) */
html[data-theme="dark"] .vkCard-mark, html[data-theme="dark"] .vkCard-mark.is-pale, html[data-theme="dark"] .vkCard-mark.has-logo {background: linear-gradient(
330deg, #3d3d42, transparent);
}
html[data-theme="dark"] .vkHead-logo.vkLogo, html[data-theme="dark"] .vkHead-logo.vkHead-mark{
    box-shadow: 0 0 0 2px #0e0e12, 0 1.5px 0 3px #3c3e48, 0 -2.5px 0 4.5px #4a4b58, 0 2.5px 0 4.5px #141418, 0 0 0 7px #2b2c34, 0 4px 10px 5px rgba(0, 0, 0, .45);
}
/* his value (2026-10-08, "arreglo: implementa esto"): the title's round face in the dark look on a soft grey gradient instead of white (a logo) or its tint (a mark) */
html[data-theme="dark"] .vkHead-logo.vkLogo, html[data-theme="dark"] .vkHead-logo.vkHead-mark {background: linear-gradient(330deg, #3d3d42, transparent);}
/* The bin's cards (parts/bin.php, his point 37, 2026-09-29): what each one is, and its only button. */
.vkBinKind{
    display: inline-block; margin: 6px 6px 0 0; padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600; background: var(--vk-accent-tint-eef1ff, #eef1ff); color: var(--vk-link-23308a, #23308a);
}
.vkBinKind.is-version{ background: var(--vk-warn-tint-fff4d6, #fff4d6); color: var(--vk-warn-6f5200, #6f5200); }
.vkBinRestore{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 10px; padding: 9px 12px; border: 0; border-radius: 10px;
    background: var(--vk-inv, #16161a); color: #ffffff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.vkBinRestore:hover, .vkBinRestore:focus-visible{ background: var(--vk-main, #0f52ff); }
.vkBinRestore:disabled{ opacity: .6; cursor: default; }
.vkChip--static:hover{ border-color: var(--vk-line-dddce5, #dddce5); }

.vkEmpty{
    margin: 4px 0 24px 0; padding: 36px;
    border: 1px dashed var(--vk-line-strong-cfcfd8, #cfcfd8); border-radius: 16px; background: var(--vk-surface, #ffffff);
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    font-family: 'Montserrat', sans-serif;
}
.vkEmpty p{ margin: 0; }
.vkEmpty-title{ font-size: 15px; font-weight: 600; color: var(--vk-text, #16161a); }
.vkEmpty-text{ font-size: 13px; color: var(--vk-soft, #5f5e6b); }

/* the first page's column has no right padding: end where its upload and figures boxes end,
   clear of the fixed bar on the right (measured at 1200-1920px) */
@media (min-width: 1126px){ .contpujador > .vkHead{ margin-right: 12px; } }      /* his value, 2026-10-08 (was 61px) */
/* The sidebar and its "⋯" menus stay above the files (2026-09-26, his screenshot: the cards covered a
   hub's menu). Old script.js code sets the z-index of the sidebar's box and of the tree itself when the
   pointer passes over some menu entries, and leaves it at 1 - under the grid. Its box never stacks now,
   and on a desktop the tree keeps its own place; phones keep theirs, set below. */
#loadmenuCats{ z-index: auto !important; }
@media (min-width: 1126px){ #vkTree.vkTree{ z-index: 900 !important; } }
/* The body's margins beside the sidebar - his "deja el margen como este en el body! asi queda mas respirado"
   (2026-09-27), measured on his screenshot of "0. ELEMENTS" at 1899 px: the text 35 px from the sidebar, the first
   column of cards 27 px, 10 px between columns, 24 px from the last column to the blue bar. style.css gave 5 px and
   73 px, and the column starts 4 px after the sidebar at any width. */
@media (min-width: 1126px){
    .detailphoto{ padding-left: 31px; padding-right: 86px; }
    .detailphoto .containernews{ margin-left: -13px; }
}
/* NO SCROLL WHERE THERE IS NOTHING TO SCROLL (2026-10-03, his words: "cuando no haya elementos que scrollear en el body no hace falta el scroll. es decir que no dejes
   scrollear en toda la aplicacion dejando ver espacio inutil abajo"). script.js (ajustesIniciales_items) pins the column and the grid at the window's height + 10 px on
   every page, inline; with the column's 104 px above, its 80 px below and the grid's 50 px margin, an empty page was 482 px taller than the window (1429 for 947,
   measured). Neither keeps a height of its own now - the page's own background fills the window behind them - so a short page does not move and a long one
   scrolls as it did. !important because the height is written on the elements themselves. */
.itemslazy .detailphoto{ min-height: 0 !important; }
.itemslazy .containernews{ min-height: 0 !important; }
/* ...but up to 1200 px a fixed 70 x 55 button sits in the bottom right corner (style.css .barfootmovil, the menu), where the last card keeps its download and link
   icons. The page ends where the grid's cards do (script.js writes their box 0 px tall and lets them overflow it), so there the grid carries 75 px below its last row -
   the button's 55 and 20 of air - and the last card clears it. Wider, the page still ends where its last card does, as it always did. */
@media (max-width: 1200px){
    .itemslazy .containernews .conty{ box-sizing: content-box; padding-bottom: 75px; }
}
@media (max-width: 600px){
    .vkCards{ grid-template-columns: minmax(0, 1fr); }
    .vkHead-top{ flex-direction: column; }
    .vkHead-actions{ flex-shrink: 1; flex-wrap: wrap; max-width: 100%; }                 /* brief AQ: the three buttons were one 482 px row - the admin's pages were 490 px wide on a 380 px phone */
    .detailphoto .vkHead-title{ font-size: 24px; }
    .vkEmpty{ padding: 24px; }
}

/* Up to 1125px the files start under a fixed 48px bar, and the grid's own 50px top margin was
   what kept them clear of it: the path, or the first page's title, takes that job. */
@media (max-width: 1125px){
    /* NO BREADCRUMBS ON A PHONE (brief CW, 2026-10-16; his words: "do not include in movile view the breadcrumbs"): the path is not drawn for any account, in the panel and on the public web (it is in the page,
       hidden, as the head's script and the tabs' read it). What stood after it takes the 58 px it kept clear under the fixed bar - the head, a page of a type line alone, or the grid itself. His own
       stylesheet hid it already (view/custom/mi-estilo.css) and kept the room where it wanted: a rule of his with !important still wins, so his pages are as they were. */
    .vkPath{ display: none; }
    .vkPath + .vkHead{ margin-top: 58px; }
    .vkPath ~ .vkHead--alone{ margin-top: 58px; }
    .vkHead{ padding: 0 8px; }
    .contpujador > .vkHead{ margin-top: 58px; }
    .vkPath ~ .containernews{ margin-top: 8px; }
    .vkPath + .containernews{ margin-top: 58px; }                 /* (after the line above: the same weight, the later wins) */
    .vkEmpty{ margin: 4px 8px 24px 8px; }
}


/* ---------------------------------------------------------------- phones and tablets
   Up to 1125px the sidebar stays hidden (.yyy.hideYU) until the bottom bar's button opens it.
   Open, it covers the page from the top as the old list did, with the rest dimmed; the bottom
   55px stay clear for that bar's button. */

@media (max-width: 1125px){
    .vkTree{
        top: 0;
        width: calc(100% - 60px);
        max-width: 400px;
        z-index: 9999;
        border-right: 0;
        box-shadow: 0 0 60px rgba(0, 0, 0, .35);
    }
    .vkTree::after{
        content: "";
        position: fixed; top: 0; right: 0; bottom: 55px;
        left: min(400px, calc(100% - 60px));
        background: rgba(22, 22, 26, .45);
    }
    /* a window opened from a menu goes over the sidebar, not under it */
    .vkTree.is-under{ z-index: 1035; }
}


/* ---------------------------------------------------------------- the grid's next batches (vk_grid.js) */

.vkMore{
    clear: both;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 6px 0 48px 0;
    font-family: 'Montserrat', sans-serif; font-size: 13px; color: var(--vk-soft, #5f5e6b);
}
.vkMore[hidden]{ display: none; }
.vkMore.vkMore--edge{ position: absolute; left: 0; right: 0; top: 100%; }
.vkMore-dots{ display: inline-flex; gap: 5px; }
.vkMore-dots i{
    width: 7px; height: 7px; border-radius: 50%; background: var(--vk-violet, #6e1fd1); opacity: .25;
    animation: vkMoreDot 1s infinite ease-in-out;
}
.vkMore-dots i:nth-child(2){ animation-delay: .15s; }
.vkMore-dots i:nth-child(3){ animation-delay: .3s; }
@keyframes vkMoreDot{ 0%, 80%, 100%{ opacity: .25; transform: translateY(0); } 40%{ opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce){ .vkMore-dots i{ animation: none; opacity: .6; } }
/* a card still waiting for its picture: out of sight and out of the way - the grid is a CSS grid underneath, where it
   would otherwise take a cell (view/js/vk_grid.js) */
.containernews .slide.vkCard-in{ position: absolute !important; left: 0; top: 0; visibility: hidden !important; opacity: 0 !important; pointer-events: none; }
/* A card's place and size change at once: its class "effect" (style.css) animated every property, so each layout
   slid the cards for 0.2 s through wrong places - over each other and past the edge (2026-09-27). What it animates
   for the eye stays. While a card is dragged, Packery animates the others itself (script.js).
   Not transform either (2026-10-10, his words: "cuando se suelta el elemento en otro sitio es como si hubiera un glitch instantaneo y los elementos
   hicieran el amago de reordenarse ... No ha de pasar ese amago"): Packery slides a card with a transform and, once there, sets its place and takes
   the transform away in the same frame - this transition animated that taking away, so every card that had moved jumped one place further and slid
   back (filmed frame by frame after a drop: at the end of the 0.2 s slide, +229 px, then 0.2 s back). The pictures' own hover zoom is on the image. */
.containernews .conty > .capsaitem.effect{ transition-property: opacity, box-shadow, background-color, border-color, color, filter; }


/* ---------------------------------------------------------------- page changes (vk_nav.js) */

.vkNavBar{
    position: fixed; left: 0; top: 0; z-index: 100001;
    height: 3px; width: 0; opacity: 0;
    background: var(--vk-violet, #6e1fd1); pointer-events: none;
    transition: width 2s cubic-bezier(.1, .6, .3, 1), opacity .2s ease;
}
.vkNavBar.is-on{ width: 85%; opacity: 1; }
/* while the next page comes, the content beside the sidebar dims (after a beat, so a quick one
   does not flicker); the new content arrives undimmed */
html.vk-nav-busy:not(.vk-glitch-out) .bytLightbox{ opacity: .55; transition: opacity .15s ease .12s; }          /* brief BZ 4b: the cards leave with a glitch instead (view/js/vk_glitch.js); a live search still dims */
.detailphoto .vkHead-title:focus:not(:focus-visible){ outline: none; }


/* ---------------------------------------------------------------- messages */

.vkToast{
    position: fixed; left: 50%; bottom: 24px; z-index: 100000;
    transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    max-width: calc(100vw - 32px);
    padding: 12px 18px; border-radius: 12px;
    background: var(--vk-inv, #16161a); color: #ffffff;
    font-family: 'Montserrat', sans-serif; font-size: 13px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    transition: opacity .2s ease, transform .2s ease;
}
.vkToast.is-on{ opacity: 1; transform: translate(-50%, 0); }

/* A file's section shown from its card ("Ver en la barra", view/js/sidebar_tree.js vkTreeReveal()): the row
   lights up and fades. The cards' button itself sits with their other small tags. */
.vkTree .vkRow.is-located{ animation: vkLocated 2.6s ease-out; }
@keyframes vkLocated{
    0%, 35%{ background: var(--vk-violet-tint-e7dbfb, #e7dbfb); box-shadow: inset 3px 0 0 var(--vk-violet, #6e1fd1); }
    100%{ background: transparent; box-shadow: inset 3px 0 0 transparent; }
}
button.vkLocate{ border: 0; cursor: pointer; font: inherit; line-height: inherit; }
button.vkLocate:hover{ opacity: .7; }
/* A menu opened from the page's title ("..." beside "Subir archivos") leaves out "Ver archivos": that is the page
   already (his point 12, 2026-09-26; view/js/sidebar_tree.js adds is-fromHead). */
.vkMenu.is-fromHead .vkMenu-view{ display: none !important; }      /* over .vkMenu .vkMenu-item display: flex !important */

/* His point 10, 2026-09-26: the top of the sidebar as his screenshot has it, measured in its pixels - his words:
   "Este diseño de la sidebar de la izquierda me gusta. Dile que lo clave exacto." The search a flat #efefef band
   42 px high right under the header, from 5 px in to the sidebar's edge; 8 px under it the tools, from 5 px in,
   their corners 6 px. "Nuevo" and the order chosen take the app's own colour ("lo que tiene que dinamizar son los
   botones azules de debajo del buscador"): view/custom/styles_custom.php, and a hub's for its own user
   (inc/header.php). */
/* HIS OWN CSS, sent 2026-09-28, applied as written: the search inset 9px on the left and running to
   the sidebar's edge on the right, 50px tall, lavender, with its bottom-left corner turned 16px -
   that is the "border-bottom-left redondeado" he meant. He sent height twice (42 then 50); 50 is the
   one that counts and the one written here. The focus colour follows the field, or it flashed grey. */
.vkTree-top{ padding: 0 0px 11px 9px; gap: 8px; }
.vkTree-tools{ padding-right: 8px; margin-bottom: 6px; margin-top: 3px; }      /* his margins, 2026-10-08 */
#vkTreeSearch{ height: 50px; background: var(--vk-violet-tint, #f1e9fa); border-radius: 0px 0px 0px 16px; border: 0px solid var(--vk-line-dddce5, #dddce5);
               padding: 0 40px 0 26px; }
#vkTreeSearch:focus{ outline-offset: -2px; background: var(--vk-violet-tint, #f1e9fa); }
.vkTree-searchIcon{ right: 18px; top: 17px; left: initial; }   /* his, 2026-09-28: the glass on the right */
/* THE GLASS, THE «+» AND THE x ON ONE LINE (2026-10-02, his words: "coloca otra vez el icono del search, y a su izquierda un "+" del mismo estilo,
   separado proporcionalmente alineado perfectamente"). Three 18 px icons on the field's middle line ((50 - 18) / 2 = 16 px from its top - his
   17 px left the glass 1 px low once it had a neighbour), 10 px apart: the glass where he put it, the «+» to its left, and the x - only while
   there is text - to the left of the «+». The «+» and the x are 32 px boxes around their icon (7 px each side), so a box sits 7 px outside its
   icon. The text stops before the icons. */
.vkTree-searchIcon{ top: 16px; }
.vkTree .vkTree-deep{ right: 39px; top: 9px; }       /* icon from 46 to 64 px off the right edge: 10 px left of the glass (18 to 36) */
.vkTree .vkTree-clear{ right: 67px; top: 9px; color: var(--vk-soft, #5f5e6b); }   /* icon from 74 to 92 px: 10 px left of the «+»; the glass's grey (it inherited black) */
#vkTreeSearch{ padding-right: 74px; }
#vkTreeSearch:not(:placeholder-shown){ padding-right: 102px; }
.vkTree-seg{ background: var(--vk-violet-tint, #f1e9fa); border: 0; }   /* his, 2026-09-28 */
.vkTree-new, .vkTree-seg, .vkTree-filter{ border-radius: 10px; border: 0; }   /* his, 2026-09-28; he struck the lavender out of this one - "Nuevo" keeps the app colour */

/* THE HEADER'S «SELECT ALL» AND ITS COUNT ONLY WHERE THERE IS SOMETHING TO SELECT (2026-10-02 night, his words, on a group's page that has only hub
   cards: "Esto debe de salir solamente si hay items seleccionables en el viewport"). A file's card carries .checkedcheck (parts/category_items.php,
   parts/bin.php); a page without one shows neither the box (inc/header.php #selectall) nor the count beside it (.countitems). Live, so a page
   changed by vk_nav or a grid that loads more is right at once; a browser without :has() keeps them, as before. */
body:not(:has(.checkedcheck)) #selectall,
body:not(:has(.checkedcheck)) #selectallmvl,
body:not(:has(.checkedcheck)) .countitems{ display: none !important; }

/* THE SIDEBAR'S SEARCH AND THE BODY'S CORNER BESIDE IT, IN THE LIGHT LOOK TOO (2026-10-03, his words with a screenshot of the light look: "haz esto como en la version en dark en
   cuanto a layout. El input y el redondeado de al lado del body, solo esta parte. La otra parte redondeada del body no hace falta."). The layout of his dark mockup
   (view/css/vk_dark.css, HIS MOCKUP OF 2026-10-03), the colours as they were: the field standing free - 12 px in from the sidebar's padding (21 px from its edge), 15 px from its
   right edge, 49 px tall, 11 px corners all round, the glass 24 px from its right edge and the «+» and the x after it - and the body's top-left corner rounded 19 px and fixed, filled
   with the white of the header and the sidebar around it. Not the corner by the right-hand bar ("no hace falta"). In light the sidebar has a 1 px line on its right: the corner
   reaches 1 px over it, so the line starts where the curve ends. The dark look keeps its own rules (vk_dark.css, more specific). */
.vkTree-search{ margin: 0 15px 0 12px; }
#vkTreeSearch, #vkTreeSearch:focus{ height: 49px; border-radius: 11px; }
#vkTreeSearch{ padding-right: 80px; }
#vkTreeSearch:not(:placeholder-shown){ padding-right: 108px; }
.vkTree-searchIcon{ right: 24px; }
.vkTree .vkTree-deep{ right: 45px; }
.vkTree .vkTree-clear{ right: 73px; }
@media (min-width: 1126px){
    .vkTree::before{
        content: ""; position: absolute; top: 0; left: calc(100% - 1px); width: 20px; height: 20px; pointer-events: none;
        background: radial-gradient(circle at 100% 100%, transparent 18.5px, var(--vk-surface, #ffffff) 19px);
    }
}

/* THE BUTTONS OF A PAGE'S HEAD AT THE HEIGHT THEY HAVE IN DARK, IN THE LIGHT LOOK TOO (2026-10-03, his words with a screenshot of the light look: "esto en la version light ponlo
   a la misma altura que esta en dark"). The 38 px of his dark mockup (view/css/vk_dark.css): in the band of the path, as near the header as they are to the right-hand bar. A
   transform, so they keep their place in the row and the title still stops where they begin; only where the path stands right above the head and the window is wide enough for
   the path and the buttons side by side (from 1600 px). */
@media (min-width: 1600px){
    .vkPath + .vkHead > .vkHead-top > .vkHead-actions{ transform: translateY(-54px); }     /* 38 + the 16 px the head came down (below) */
    /* (a hub's banner, 2026-10-11, had its own two rules here: the buttons over its top edge and the banner 6 px lower. Gone with brief CE, 2026-10-12: from 1126 px a page with a banner has no
       buttons of its own in the head - see the end of this block of rules, "A HUB'S OR GROUP'S PAGE WITH ITS BANNER ON TOP") */
}
/* THE TITLE BLOCK'S ROOM ABOVE AND BELOW (2026-10-08, his words "La parte del logo y las frases del lado tienen que ser como esto en cuanto a espacio arriba y espacio a bajo de
   separacion", with his picture of a group's page). Measured on his picture against the copy at 1875: the face and its two lines ~15 px lower under the path, and ~23 px more
   before what follows them (a group's hubs, the colours, the files). So the head comes 16 px further from the path and the face's row keeps 24 px more under it;
   the buttons that sit on the path's line from 1600 px rise by the same 16 px (above, and vk_dark.css), so they stay on it. From 1126 px: a phone's head is laid out apart. */
@media (min-width: 1126px){
    .vkPath + .vkHead{ margin-top: 30px; }            /* it meets the path's 14 px bottom margin, which collapses into it: 14 -> 30 between them */
    .vkHead > .vkHead-top{ margin-bottom: 24px; }
    /* THE START PAGE'S TITLE BLOCK AS FAR FROM THE PANEL'S TOP AS FROM THE CARDS (2026-10-12, his words with «Todos los hubs» circled: "dejar el mismo espasio arriba que abajo del bloque que te marco (admin y
       publico)"). Measured at 1875 (the letters, not the boxes): 24 px from the panel's top edge to the title's, 49 px from the line under it to the cards. The block comes 12.5 px down and the
       cards stay where they were: 36.5 px above and below. The admin's «Todos los hubs» and the web's start page (.vkHead--home: inc/sidebar_tree.php, core/vk/landing_shell.php). */
    .vkHead--home{ margin-top: 16.5px; }
    .vkHead--home > .vkHead-top{ margin-bottom: 11.5px; }
}
/* A HUB'S OR GROUP'S PAGE WITH ITS BANNER ON TOP (brief CE, 2026-10-12). His words, with his mockup of group «Moxprotocol»: "que te parece hacer asi pagina del hub? lo hacemos en todas
   partes? cuando haya una portada claro, sino no se muestra asi. Los botones de arriba pasan a ser visibles siempres desde la caja flotante y los que estan fijos desaparecen. Despues el
   banner se ve mas integrado tal i como ves. Adelante? en la web publica y en el admin."
   Only a page that HAS a banner (.vkHead--banner: inc/sidebar_tree.php, core/vk/landing_demo.php), and from 1126 px, where the panel has its tree and its right-hand bar (narrower, the page is
   as it was): the banner is the first thing of the panel, 4 px in from its edges on the left, the top and the right (his picture: x 398 to 1831 between the tree's edge at 394 and the bar's
   at 1835, y 90 under the header's 86). The path pill and the five keys that stand ON it are the floating line (view/js/vk_stickhead.js, view/css/vk_stickhead.css), which such a page always
   shows; the page's own path and keys are hidden but stay in the document - the line's copies click them. Under the banner nothing changes.
   The numbers: the tree is calc(16.7% + 78px) wide and the content column (style.css, calc(83% - 76px) from the right) has its text 31 px in, so the tree's edge + 4 is 25px + .3vw before the
   column's text; the right-hand bar is 67 px wide and the column keeps 86 px for it, so the banner goes 15 px past the column's text; the header is 90 px, the column starts 104 px down (103
   as the document stands) and the head 4 px after that, so the banner climbs 13 px. */
@media (min-width: 1126px){
    .vkPath:has(+ .vkHead--banner){ display: none; }
    .vkPath + .vkHead--banner{ margin-top: 4px; }
    .vkHead--banner > .vkHead-top > .vkHead-actions{ display: none; }
    /* his values, 2026-10-12 ("añade estas propiedades al banner", then "implementa esto"): flush with the panel's edges. ROUNDED ALL ROUND AND 180 PX TALL (his "haz que tenga una altur de 180px u que
       tenga los bordes redondeados de 14px"): his margins run the band under what stands round the panel - 5 px under the header (90 px), 10 px under the tree (its edge is 16.7vw + 78px, the band
       starts 16.7vw + 68px) and 67 px under the right-hand bar - so its own corners would be hidden there. The band keeps his margins and is cut to what shows, with his 14 px corners (clip-path),
       and is 5 px taller than what shows: 235 px so that his 230 px ("el banner ponlo a una altura de 230px") show. Measured at 1875 and 1366. */
    .vkHead--banner{ --vkBannerH: 235px; }
    .vkHead--banner > .vkHead-banner{ margin: -22px -86px 3px calc(-39px - 0.3vw); border-radius: 0; clip-path: inset(5px 67px 0 10px round 14px); }
    /* ITS PARALLAX (his words, 2026-10-12: "Puedes hacer tambien que el banner tenga parallax? que se note y haga el efecto. que quede detras ya sabes, ma lento qu el scrol, casi fijo."): the
       picture is taller than its band by --vkPar of the band's height; view/js/vk_stickhead.js slides it down as the page scrolls (the CSS `translate` property, so the `transform` here and a
       framing's own - brief BY - are never overwritten), until the band has gone: the picture moves slower than the page, nearly fixed behind it. --vkPar is the strength (0 = none).
       CENTRED (his CSS, 2026-10-12: "para centrar la imagen: left: 0; top: 50%; transform: translate(0%, -50%)"): the picture opens on its middle, half its extra part above the band and half
       below, so the script slides it by that half only - the picture still covers the band at every scroll. With reduced motion it stays still, centred in its band. */
    .vkHead--banner > .vkHead-banner{ --vkPar: .8; position: relative; }
    .vkHead--banner > .vkHead-banner img{ position: absolute; left: 0; top: 50%; transform: translate(0%, -50%); width: 100%; height: calc(100% * (1 + var(--vkPar))); will-change: translate; }
    /* UNDER THE BANNER, HIS MOCKUP'S ROOM (measured on his picture against the page as it was, both from the banner's bottom edge): the logo's ring 25 px under it (it was 15), its left edge on the
       cards' (428 against the cards' 429; it stood 6 px outside them), the name 10 px further right (515, was 505: 5 of the row and 5 more between the logo and the name) - and the cards
       where they were (125 px under the banner in both), so the row's bottom margin gives back the 10 px it took on top. */
    .vkHead--banner > .vkHead-top{ margin: 10px 0 14px 5px; gap: 21px; }
}
@media (min-width: 1126px) and (prefers-reduced-motion: reduce){
    .vkHead--banner > .vkHead-banner img{ height: 100%; translate: none !important; }          /* his top 50% and translate -50% centre a band-high picture just as well */
}

/* ================================================================ HUB LABELS (brief AM, 2026-10-06; inc/sidebar_tree.php, view/js/sidebar_tree.js, view/js/vk_labels.js, core/vk/hub_labels.php)
   His words: "Añade la opcion de poder asignar tipos de hub, como labels. O poder seleccionar mas de 1 hub para mostrar en la sidebar d la izquierda."
   Under the search, one row: «Todos» and a chip per label some hub carries, with how many hubs. A chip on is filled as the page's chips are (the app's violet tint, so dark takes it from
   vk_theme.css); one or more on shows only the hubs of those labels. The labels' strip scrolls sideways when there are more than room (never wraps: the sidebar's list must not move
   down), an edge with more behind it fades, and «Todos» before it and the «⋯» at its end - outside the strip, so always in reach: «Todos» is the way back - stay where they are; the «⋯»
   opens the window that renames and deletes labels. */
.vkLbl{ position: relative; display: flex; align-items: center; gap: 2px; margin: 10px 15px 10px 12px; min-width: 0; }      /* his margins, 2026-10-08 (it was 0 15px 0 12px) */
.vkLbl-strip{
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; gap: 6px; padding: 2px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.vkLbl-strip::-webkit-scrollbar{ display: none; }
.vkLbl-strip.is-r{ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
.vkLbl-strip.is-l{ -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 22px), transparent); }
.vkLbl-strip.is-l.is-r{ -webkit-mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent); }
.vkTree .vkLbl-chip{
    flex: 0 0 auto; height: 30px; margin: 0; padding: 0 12px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 99px; background: var(--vk-surface, #ffffff);
    display: inline-flex; align-items: center; gap: 7px;
    font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1; white-space: nowrap;
    color: var(--vk-text, #16161a); cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.vkLbl-n{ font-weight: 400; color: var(--vk-soft, #5f5e6b); font-variant-numeric: tabular-nums; }
.vkTree .vkLbl-chip:hover{ border-color: var(--vk-violet, #6e1fd1); }
.vkTree .vkLbl-chip[aria-pressed="true"]{ border-color: var(--vk-violet, #6e1fd1); background: var(--vk-violet-tint, #f1e9fa); color: var(--vk-violet-4f1697, #4f1697); }
.vkLbl-chip[aria-pressed="true"] .vkLbl-n{ color: var(--vk-violet-4f1697, #4f1697); }
.vkLbl-chip--all[aria-pressed="true"]{ cursor: default; }
.vkTree .vkLbl-chip--all{ margin-right: 2px; }                      /* «Todos» is outside the strip, which has 2 px of its own: 6 px to the first label, as between labels */
.vkLbl-name{ max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.vkTree .vkLbl-more{
    flex: 0 0 auto; width: 30px; height: 30px; margin: 0; padding: 0;
    border: 1px solid transparent; border-radius: 50%; background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--vk-soft-3c3b46, #3c3b46); cursor: pointer;
}
.vkTree .vkLbl-more:hover, .vkTree .vkLbl-more[aria-expanded="true"]{ border-color: var(--vk-violet, #6e1fd1); color: var(--vk-violet-4f1697, #4f1697); }
@media (prefers-reduced-motion: reduce){ .vkTree .vkLbl-chip{ transition: none; } }
/* THE TREE'S LABELS AS KEYS, AND «A-Z | MANUAL» AS «CLARO | OSCURO» (2026-10-08, his words "aqui sigue el estilo de botones. foto1: las etiquets tendrian un diseño como el de
   los botones de la caja flotante del body de extensiones de archivo. Y el switcher, foto 2. ha de ser como esto."). The labels: the raised key of the floating line's file-type
   chips (view/css/vk_stickhead.css) - the pressed one in the look's accent; the strip, which scrolls and so clips, gets room for the bezels and the shadow, given back with
   negative margins. The switch: the people window's «Tema» (view/css/vk_dashboard.css .vkPeople-theme) - its ground with a margin inside, the pressed one a small pill in it. */
.vkTree .vkLbl{ gap: 8px; }
.vkTree .vkLbl-chip--all{ margin-right: 4px; }
.vkTree .vkLbl-strip{ gap: 12px; padding: 5px 6px 12px; margin: -5px 0 -12px; }
.vkTree .vkLbl-chip, .vkTree .vkLbl-chip:hover{
    border: 0; border-radius: 9px;
    background: linear-gradient(180deg, #fdfdfe 0%, #f1f3f6 100%);
    box-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .9),
        0 0 0 1px #d6dbe2, 0 0 0 3px #eef1f4, 0 -1px 0 3px #dfe4ea, 0 6px 10px 1px rgba(30, 45, 65, .14);
    transition: background .15s ease, transform .15s ease;
}
.vkTree .vkLbl-chip:hover{ background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%); }
.vkTree .vkLbl-chip[aria-pressed="true"]{
    background: linear-gradient(180deg, color-mix(in srgb, var(--vk-violet, #6e1fd1) 5%, #ffffff) 0%, color-mix(in srgb, var(--vk-violet, #6e1fd1) 13%, #ffffff) 100%);
    box-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .9),
        0 0 0 1px color-mix(in srgb, var(--vk-violet, #6e1fd1) 30%, #ffffff), 0 0 0 3px color-mix(in srgb, var(--vk-violet, #6e1fd1) 7%, #ffffff),
        0 -1px 0 3px color-mix(in srgb, var(--vk-violet, #6e1fd1) 18%, #ffffff), 0 6px 10px 1px color-mix(in srgb, var(--vk-violet, #6e1fd1) 16%, transparent);
}
.vkTree .vkLbl-chip:active{ transform: translateY(1px); }
html[data-theme="dark"] .vkTree .vkLbl-chip, html[data-theme="dark"] .vkTree .vkLbl-chip:hover{
    background: linear-gradient(180deg, #303139 0%, #2a2b32 100%);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(255, 255, 255, .05),
        0 0 0 1px #16161b, 0 0 0 3px #25262c, 0 -1px 0 3px #34353d, 0 6px 12px 1px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .vkTree .vkLbl-chip:hover{ background: linear-gradient(180deg, #34353e 0%, #2d2e36 100%); }
html[data-theme="dark"] .vkTree .vkLbl-chip[aria-pressed="true"]{
    background: linear-gradient(180deg, color-mix(in srgb, var(--vk-violet, #ba93f5) 26%, #303139) 0%, color-mix(in srgb, var(--vk-violet, #ba93f5) 18%, #2a2b32) 100%);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(255, 255, 255, .05),
        0 0 0 1px #16161b, 0 0 0 3px color-mix(in srgb, var(--vk-violet, #ba93f5) 14%, #25262c), 0 -1px 0 3px color-mix(in srgb, var(--vk-violet, #ba93f5) 26%, #34353d),
        0 6px 12px 1px rgba(0, 0, 0, .45);
}
@media (prefers-reduced-motion: reduce){ .vkTree .vkLbl-chip:active{ transform: none; } }
/* ROOM TO SCROLL AT THE SIDES (2026-10-08, his words "esto no es nada practico ni funciona bien para scrollear. porfavir mejora que haya mas fuelle a los lados para scrollear y
   que sea suave y que se pueda scrollear con haciendo un sweep tambien"; the smooth wheel and the swipe are view/js/sidebar_tree.js). The strip reaches into the gaps beside
   «Todos» and «⋯» (negative margins) and pads its ends with 16 px, so the first label stands where it stood, an end chip has air when the strip is scrolled to it, and an edge with
   more behind it fades over 34 px, softly, instead of cutting a chip at 22. While a swipe drags it: the grabbing hand, no text picked up, no key pressed down. */
.vkTree .vkLbl-strip{ padding: 5px 16px 18px; margin: -5px -6px -18px -10px; -webkit-user-select: none; user-select: none; }      /* 18 below: the keys' shadow reaches 17 px under them (12 cut it in the light look) */
.vkTree .vkLbl-strip.is-r{ -webkit-mask-image: linear-gradient(to left, transparent 2px, rgba(0, 0, 0, .35) 14px, #000 34px); mask-image: linear-gradient(to left, transparent 2px, rgba(0, 0, 0, .35) 14px, #000 34px); }
.vkTree .vkLbl-strip.is-l{ -webkit-mask-image: linear-gradient(to right, transparent 2px, rgba(0, 0, 0, .35) 14px, #000 34px); mask-image: linear-gradient(to right, transparent 2px, rgba(0, 0, 0, .35) 14px, #000 34px); }
.vkTree .vkLbl-strip.is-l.is-r{
    -webkit-mask-image: linear-gradient(to right, transparent 2px, rgba(0, 0, 0, .35) 14px, #000 34px, #000 calc(100% - 34px), rgba(0, 0, 0, .35) calc(100% - 14px), transparent calc(100% - 2px));
    mask-image: linear-gradient(to right, transparent 2px, rgba(0, 0, 0, .35) 14px, #000 34px, #000 calc(100% - 34px), rgba(0, 0, 0, .35) calc(100% - 14px), transparent calc(100% - 2px));
}
.vkTree .vkLbl-strip.is-drag, .vkTree .vkLbl-strip.is-drag .vkLbl-chip{ cursor: grabbing; }
.vkTree .vkLbl-strip.is-drag .vkLbl-chip:active{ transform: none; }
.vkTree .vkTree-seg{ padding: 4px; gap: 2px; border-radius: 10px; }
.vkTree .vkTree-seg button{ border-radius: 7px; padding: 0 11px; }

/* the window that manages the labels (view/js/vk_labels.js builds it): a panel under the row, as wide as the row; each label with how many hubs carry it, «Renombrar» and «Borrar» - and, in
   the row itself, the field to rename or the question before deleting (a deleted label leaves the hubs that carried it) */
.vkLblPanel{
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
    max-height: min(62vh, 440px); overflow-y: auto; padding: 8px;
    background: var(--vk-surface, #ffffff); border: 1px solid var(--vk-line, #e4e3ea); border-radius: 14px;
    box-shadow: 0 14px 34px rgba(30, 20, 60, .16);
    font-family: 'Montserrat', sans-serif; color: var(--vk-text, #16161a);
}
.vkLblPanel[hidden]{ display: none; }
.vkLblPanel-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 8px; }
.vkLblPanel-title{ font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vk-soft, #5f5e6b); }
.vkTree .vkLblPanel-x{
    width: 26px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent;
    display: flex; align-items: center; justify-content: center; color: var(--vk-soft, #5f5e6b); cursor: pointer;
}
.vkTree .vkLblPanel-x:hover{ background: var(--vk-fieldh-e7e5ee, #e7e5ee); color: var(--vk-text, #16161a); }
.vkLblPanel-list{ list-style: none; margin: 0; padding: 0; }
.vkLblRow{
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    min-height: 40px; margin: 0; padding: 4px 6px 4px 8px; border-radius: 10px;
}
.vkLblRow:hover{ background: var(--vk-field-f4f3f7, #f4f3f7); }
.vkLblRow-name{ flex: 1 1 90px; min-width: 90px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }      /* a name keeps 90 px: what does not fit goes to the next line */
.vkLblRow-n{ flex: 1 1 auto; min-width: 0; padding-left: 27px; font-size: 11.5px; color: var(--vk-soft, #5f5e6b); white-space: nowrap; }                /* second line, under the name (the box is 16 px and 11 px of gap); brief CF: it was a column of its own at the right */
.vkLblRow-br{ flex: 0 0 100%; height: 0; margin-top: -4px; }                                                              /* the line break between the name and the switch above and the count and the buttons below (brief CF) */
.vkLblRow-acts{ flex: 0 0 auto; display: flex; align-items: center; gap: 2px; margin-left: auto; }                       /* the buttons stand at the right of the second line (the count, then «Hubs…» «Renombrar» «Borrar»); where that is too narrow (a 1366 px laptop: 269 px of panel) they wrap on, to the right */
.vkTree .vkLblRow-btn{
    height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: 8px; background: transparent;
    font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--vk-violet-4f1697, #4f1697); cursor: pointer; white-space: nowrap;
}
.vkTree .vkLblRow-btn:hover{ background: var(--vk-violet-tint, #f1e9fa); }
.vkTree .vkLblRow-btn--danger{ color: var(--vk-err, #b3261e); }
.vkTree .vkLblRow-btn--danger:hover{ background: var(--vk-err-tint, #fdecea); }
.vkTree .vkLblRow-btn--solid{ background: var(--vk-err, #b3261e); color: #ffffff; }
.vkTree .vkLblRow-btn--solid:hover{ background: var(--vk-err, #b3261e); opacity: .9; }
.vkTree .vkLblRow input[type="text"]{
    flex: 1 1 120px; min-width: 0; height: 32px; margin: 0; padding: 0 10px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 8px; background: var(--vk-surface, #ffffff);
    font-family: inherit; font-size: 13px; color: var(--vk-text, #16161a); box-shadow: none;
}
.vkTree .vkLblRow input[type="text"]:focus{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 0; border-color: var(--vk-violet, #6e1fd1); }
.vkLblRow-ask{ flex: 1 1 100%; font-size: 12.5px; line-height: 1.4; color: var(--vk-text, #16161a); }
.vkLblRow.is-asking{ background: var(--vk-err-tint, #fdecea); }
.vkLblRow.is-asking .vkLblRow-acts{ margin-left: auto; }
.vkLblPanel-note{ margin: 4px 8px 2px; min-height: 0; font-size: 12px; line-height: 1.4; color: var(--vk-soft, #5f5e6b); }
.vkLblPanel-note:empty{ display: none; }
.vkLblPanel-note.is-bad{ color: var(--vk-err, #b3261e); font-weight: 600; }
.vkLblPanel-none{ margin: 6px 8px 8px; font-size: 12.5px; line-height: 1.45; color: var(--vk-soft, #5f5e6b); }
/* THE PANEL FINDS, MAKES AND PICKS (2026-10-08, his words "aqui deberia poder crear labels y buscarlas dentro del dropdown para poder añadirlo a la busqueda"; view/js/vk_labels.js):
   the field under the title, as wide as the list, the glass on its right; «Crear «…»» under it while no label has the name typed; each label's box (the app's checkbox key,
   view/css/vk_checks.css) before its name - the box and the name are one target. A label no hub carries: its box dimmed. */
.vkLblPanel-find{ position: relative; margin: 2px 2px 6px; }
.vkTree .vkLblPanel-q{
    width: 100%; height: 38px; margin: 0; padding: 0 38px 0 12px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px; background: var(--vk-field-f7f7fa, #f7f7fa); box-shadow: none;
    font-family: inherit; font-size: 13px; color: var(--vk-text, #16161a); -webkit-appearance: none; appearance: none;
}
.vkTree .vkLblPanel-q::placeholder{ color: var(--vk-soft-6b6a76, #6b6a76); }
.vkTree .vkLblPanel-q:focus{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: -1px; background: var(--vk-surface, #ffffff); }
.vkLblPanel-find .vkI{ position: absolute; right: 12px; top: 11px; color: var(--vk-soft, #5f5e6b); pointer-events: none; }
.vkTree .vkLblPanel-new{
    display: flex; align-items: center; gap: 8px; width: calc(100% - 4px); min-height: 36px; margin: 0 2px 4px; padding: 0 12px;
    border: 1px dashed var(--vk-line-dddce5, #dddce5); border-radius: 10px; background: transparent;
    font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: left; color: var(--vk-violet-4f1697, #4f1697); cursor: pointer;
}
.vkTree .vkLblPanel-new:hover, .vkTree .vkLblPanel-new:focus-visible{ background: var(--vk-violet-tint, #f1e9fa); border-color: var(--vk-violet, #6e1fd1); }
.vkTree .vkLblPanel-new[hidden], .vkLblRow[hidden]{ display: none; }
.vkTree .vkLblPanel-new span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vkTree .vkLblRow-pick{
    flex: 1 1 90px; min-width: 90px; max-width: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: 11px; cursor: pointer; font-weight: 600;
}
.vkTree .vkLblRow-pick .vkLblRow-name{ flex: 1 1 auto; min-width: 0; }
.vkTree .vkLblRow-pick input[type="checkbox"]{ width: 16px; height: 16px; margin: 0; transform: none; float: none; }
.vkTree .vkLblRow-pick:has(input:disabled){ cursor: default; }
.vkTree .vkLblRow-pick:has(input:disabled) .vkLblRow-name{ opacity: .6; }
.vkLblRow.is-new{ background: var(--vk-violet-tint, #f1e9fa); }

/* PUBLIC OR PRIVATE, AND HUBS FROM THE LABEL (brief CF, 2026-10-12; view/js/vk_labels.js). The switch «Pública» ends the name's line: a small track with a knob, the soft ink when it is off (private) and the
   look's accent when it is on; the whole of it is one button. «Hubs…» opens, in the label's own row, the checklist of the hubs: a title with how many are ticked, a field that narrows the list, the list
   itself (a group, then the hubs inside it one step in; it scrolls on its own) and «Guardar» / «Cancelar». */
.vkTree .vkLblSw{
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 28px; margin: 0; padding: 0 6px 0 4px;
    border: 0; border-radius: 8px; background: transparent; box-shadow: none;
    font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--vk-soft, #5f5e6b); cursor: pointer;
}
.vkTree .vkLblSw:hover{ background: var(--vk-violet-tint, #f1e9fa); }
.vkTree .vkLblSw:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 1px; }
.vkTree .vkLblSw:disabled{ opacity: .6; cursor: progress; }
.vkLblSw-track{ position: relative; flex: 0 0 auto; width: 28px; height: 16px; border-radius: 8px; background: var(--vk-line-strong, #cfcdd9); transition: background .15s ease; }
.vkLblSw-knob{ position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(22, 22, 26, .3); transition: transform .15s ease; }
.vkTree .vkLblSw[aria-checked="true"]{ color: var(--vk-violet-4f1697, #4f1697); }
.vkTree .vkLblSw[aria-checked="true"] .vkLblSw-track{ background: var(--vk-violet, #6e1fd1); }
.vkTree .vkLblSw[aria-checked="true"] .vkLblSw-knob{ transform: translateX(12px); }
@media (prefers-reduced-motion: reduce){ .vkLblSw-track, .vkLblSw-knob{ transition: none; } }
.vkLblRow.is-hubs{ display: block; padding: 8px; background: var(--vk-field-f4f3f7, #f4f3f7); }
.vkLblHubs-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 6px; }
.vkLblHubs-title{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--vk-text, #16161a); }
.vkLblHubs-n{ flex: 0 0 auto; font-size: 11.5px; color: var(--vk-soft, #5f5e6b); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vkLblHubs-find{ position: relative; margin: 0 0 6px; }
.vkTree .vkLblHubs-find input[type="text"]{
    display: block; flex: none; width: 100%; height: 34px; margin: 0; padding: 0 36px 0 10px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 8px; background: var(--vk-surface, #ffffff); box-shadow: none;
    font-family: inherit; font-size: 12.5px; color: var(--vk-text, #16161a); -webkit-appearance: none; appearance: none;
}
.vkLblHubs-find .vkI{ position: absolute; right: 11px; top: 9px; color: var(--vk-soft, #5f5e6b); pointer-events: none; }
.vkLblHubs-list{ list-style: none; margin: 0; padding: 2px; max-height: 232px; overflow-y: auto; background: var(--vk-surface, #ffffff); border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px; }
.vkLblHubs-it{ margin: 0; padding: 0; }
.vkLblHubs-it[hidden], .vkLblHubs-none[hidden]{ display: none; }
.vkTree .vkLblHubs-it label{
    display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0; padding: 0 8px 0 calc(8px + var(--d, 0) * 18px);
    border-radius: 7px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--vk-text, #16161a);
}
.vkTree .vkLblHubs-it.is-top label{ font-weight: 700; }
.vkTree .vkLblHubs-it label:hover{ background: var(--vk-field-f4f3f7, #f4f3f7); }
.vkTree .vkLblHubs-it input[type="checkbox"]{ flex: 0 0 auto; width: 16px; height: 16px; margin: 0; transform: none; float: none; }
.vkLblHubs-name{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vkLblHubs-it.is-context .vkLblHubs-name{ opacity: .55; }
.vkLblHubs-none{ margin: 6px 4px 0; font-size: 12px; color: var(--vk-soft, #5f5e6b); }
.vkLblHubs-acts{ display: flex; justify-content: flex-end; margin-top: 8px; }

/* THE LABELS IN «EDITAR HUB» (modals/modal_views/modal_users/modify_company_modal.php): every label as a chip to tick, a field that makes a new one on the spot. The hub carries the ticked ones
   once the window is saved. The text field and its button sit on one line; the line under them says what happened. */
#modify_company_modal .vkLblEdit{ float: none; clear: both; display: flow-root; margin-bottom: 14px; }                 /* the window floats its columns: this block holds its own */
#modify_company_modal .vkLblEdit > .col-lg-12{ float: none; width: auto; }
#modify_company_modal .vkLblEdit #vkLblEditTitle{ float: none; width: auto; display: block; margin: 10px 0 2px; }          /* .modalcommon.co label floats every label at 100 % */
#modify_company_modal .vkLblEdit-help{ clear: both; margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--vk-soft-6b6a76, #6b6a76); }
#modify_company_modal .vkLblEdit-list{ clear: both; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
#modify_company_modal .vkLblTick{ position: relative; margin: 0; float: none; width: auto; display: inline-flex; cursor: pointer; font-weight: 400; max-width: 100%; }
#modify_company_modal .vkLblTick input{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; transform: none; pointer-events: none; }
#modify_company_modal .vkLblTick span{
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 34px; padding: 0 14px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 99px; background: var(--vk-surface, #ffffff);
    font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; line-height: 1; color: var(--vk-text, #16161a);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .15s ease;
}
#modify_company_modal .vkLblTick:hover span{ border-color: var(--vk-violet, #6e1fd1); }
#modify_company_modal .vkLblTick input:checked + span{ border-color: var(--vk-violet, #6e1fd1); background: var(--vk-violet-tint, #f1e9fa); color: var(--vk-violet-4f1697, #4f1697); }
#modify_company_modal .vkLblTick input:checked + span::before{ content: "✓"; font-size: 12px; }
#modify_company_modal .vkLblTick input:focus-visible + span{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
#modify_company_modal .vkLblEdit-new{ display: flex; align-items: center; gap: 8px; }
#modify_company_modal .vkLblEdit-new .form-control{ flex: 1 1 auto; float: none; width: auto; min-width: 0; height: 42px; margin: 0; }
#modify_company_modal .vkLblEdit-new .btn{
    flex: 0 0 auto; height: 42px; margin: 0; padding: 0 18px; border: 1px solid var(--vk-text, #16161a); border-radius: 10px; background: var(--vk-surface, #ffffff);
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--vk-text, #16161a); box-shadow: none;
}
#modify_company_modal .vkLblEdit-new .btn:hover:not(:disabled){ background: var(--vk-inv, #16161a); color: #ffffff; }
#modify_company_modal .vkLblEdit-new .btn:disabled{ opacity: .6; cursor: progress; }
#modify_company_modal .vkLblEdit-note{ min-height: 18px; margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--vk-soft, #5f5e6b); }
#modify_company_modal .vkLblEdit-note.is-ok{ color: var(--vk-ok, #1d7a3e); }
#modify_company_modal .vkLblEdit-note.is-bad{ color: var(--vk-err, #b3261e); font-weight: 600; }

/* A HUB DRAGGED ONTO ANOTHER HUB'S ROW (brief AL, 2026-10-07; view/js/sidebar_tree.js): the row it would go inside lights up while the pointer is on its middle - the same outline as a card dropped on a hub (.addHightlight) -
   and says so; near the row's edges the drag is still the order of the list. «Recientes» lights up too, as a refusal. */
.vkTree .vkNode.is-hubdrop > .vkRow,
.vkTree .vkTree-vault.is-hubdrop,
.vkTree .vkTree-recent.is-hubdrop{ box-shadow: inset 0 0 0 2px var(--vk-violet, #6e1fd1); background: rgba(var(--vk-violet-rgb, 110, 31, 209), .10) !important; }
.vkTree .vkTree-vault.is-hubdrop::after{ content: 'No admite filas'; margin-left: auto; font: 600 11px 'Montserrat', sans-serif; color: var(--vk-err, #b3261e); }
.vkTree .vkNode.is-hubdrop > .vkRow::after{ content: 'Soltar para meterlo dentro'; position: absolute; left: 34px; bottom: calc(100% - 4px); padding: 2px 8px; border-radius: 8px 8px 8px 2px; pointer-events: none;
    background: var(--vk-violet, #6e1fd1); color: #ffffff; font: 600 11px 'Montserrat', sans-serif; white-space: nowrap; z-index: 3; }        /* a tab on the row's top edge: the dragged row is over the row itself */
.vkTree .vkTree-recent.is-hubdrop::after{ content: 'No admite hubs'; margin-left: auto; font: 600 11px 'Montserrat', sans-serif; color: var(--vk-err, #b3261e); }
.vkTree .vkNode.ui-sortable-helper{ z-index: 20; }
.vkTree.is-hubdragging .vkNode.ui-sortable-helper{ opacity: .62; }

/* THE WINDOW OF «MOVER UN HUB» (brief AL; modals/modal_template/modal_hub_move.php): inside the old .modalcommon, whose rules float and size every label and button - hence #vkHubMove on everything. The look of «Portada de la tarjeta». */
#vkHubMove .modal-dialog{ width: min(620px, calc(100vw - 32px)); max-width: none; }
#vkHubMove .modal-content{ padding: 30px 34px 26px; font-family: 'Montserrat', sans-serif; color: var(--vk-text, #16161a); text-align: left; }
#vkHubMove h1{ float: none; margin: 0 0 14px; padding-right: 40px; font-size: 22px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
#vkHubMove .vkHm-lines{ max-height: calc(100vh - 270px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; border-bottom: 1px solid rgba(128, 128, 128, .28); margin-bottom: 6px; }        /* a long plan scrolls inside, so «Cancelar» and «Mover» are always in view */
#vkHubMove .vkHm-lines p{ margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--vk-text, #16161a); overflow-wrap: anywhere; }
#vkHubMove .vkHm-lines p.is-first{ font-weight: 600; }
#vkHubMove .vkHm-lines p:not(.is-first){ font-size: 13px; color: var(--vk-soft, #5f5e6b); }
#vkHubMove .vkHm-note{ margin: 4px 0 18px; font-size: 12px; line-height: 1.5; color: var(--vk-soft, #5f5e6b); }
#vkHubMove .vkHm-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
#vkHubMove .vkHm-btn{
    height: 44px; padding: 0 26px; border: 1px solid var(--vk-text, #16161a); border-radius: 10px; background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    font: 600 13px 'Montserrat', sans-serif; cursor: pointer;
}
#vkHubMove .vkHm-btn.is-main{ background: #0f52ff; border-color: #0f52ff; color: #ffffff; }
#vkHubMove .vkHm-btn.is-main:hover:not(:disabled){ background: #0b3fd0; border-color: #0b3fd0; }
#vkHubMove .vkHm-btn:disabled{ opacity: .55; cursor: not-allowed; }
#vkHubMove .vkHm-btn:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
#vkHubMove .vkHm-say{ flex: 1 1 200px; font-size: 12.5px; line-height: 1.45; color: var(--vk-soft, #5f5e6b); }
#vkHubMove .vkHm-say:empty{ display: none; }
#vkHubMove .vkHm-say.is-bad{ color: var(--vk-err, #b3261e); font-weight: 600; }
@media (max-width: 640px){
    #vkHubMove .modal-content{ padding: 24px 16px 20px; }
    #vkHubMove h1{ font-size: 20px; }
    #vkHubMove .vkHm-lines{ max-height: calc(100vh - 380px); }
    #vkHubMove .vkHm-btn{ flex: 1 1 100%; }
}

/* the line a hub dragged by an administrator would be put at (brief AL; view/js/sidebar_tree.js showHubDrop): drawn over the tree, the tree itself stands still */
#vkDropLine{ position: fixed; height: 3px; border-radius: 2px; background: var(--vk-violet, #6e1fd1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); pointer-events: none; z-index: 1100; }
#vkDropLine[hidden]{ display: none; }

/* brief HW (2026-10-18): a hub's web at a glance, for the administrator. The globe on a hub's row (green = the web is online, grey = it is off) and the chip on the hub's page. */
.vkWebGlobe{ display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: 6px; padding: 2px; border-radius: 50%; cursor: pointer; color: var(--vk-soft, #5f5e6b); opacity: .7; }
.vkWebGlobe.is-on{ color: var(--vk-ok, #1d7a3e); opacity: 1; }
.vkWebGlobe:hover, .vkWebGlobe:focus-visible{ background: var(--vk-field, #efeef4); opacity: 1; }
.vkWebGlobe .vkI{ width: 14px; height: 14px; }
.vkWebChip{ display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 11px; font-weight: 600; line-height: 1.4; padding: 2px 9px; border-radius: 99px; border: 1px solid transparent;
    background: var(--vk-field, #efeef4); color: var(--vk-soft-4d4c58, #4d4c58); text-decoration: none; cursor: pointer; }
.vkWebChip:hover{ text-decoration: none; filter: brightness(.96); }
.vkWebChip-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--vk-soft, #8a8996); }
.vkWebChip.is-on .vkWebChip-dot{ background: var(--vk-ok, #1d7a3e); }
.vkWebChip--none{ background: transparent; border-color: currentColor; }