/* The admin's first page: the library's figures and charts, across the whole column (the upload
   box beside them went on 2026-09-26). Markup: inc/dashboard.php, placed by parts/upload.php.
   Its boxes move by their handle (view/js/vk_dashboard.js): each zone is a grid that packs them
   densely, so whatever the order they always fit, with no holes.
   Same look as the sidebar and the page headers (view/css/sidebar_tree.css): white cards on the
   grey page, Montserrat, violet. */

.vkDashWrap{
    margin: 0 15px 0px 0;          /* his value, 2026-10-08 (was 0 61px 40px 0); below 1126 px the rule further down still gives 0 8px 40px 8px */
    font-family: 'Montserrat', sans-serif; color: var(--vk-text, #16161a);
}
.vkDash{ display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------------------------------------------------------------- figures */

/* ---------------------------------------------------------------- the boxes and their handle */

.vkBoxes{ display: grid; grid-auto-flow: row dense; min-width: 0; }
.vkBoxes--kpis{ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }      /* five figures, one row (2026-09-29) */
.vkBoxes--panels{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: start; }
.vkBox{ position: relative; min-width: 0; }
.vkBoxes--kpis > .vkBox > .vkKpi{ height: 100%; }
.vkBox--wide{ grid-column: span 2; }
.vkBox--w2{ grid-column: span 2; }
.vkBox--w3{ grid-column: span 3; }
.vkBox--w4{ grid-column: span 4; }
.vkBox--w6{ grid-column: 1 / -1; }
.vkBox-grip{
    position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: transparent; color: var(--vk-soft-8a8995, #8a8995); cursor: grab;
    opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.vkBox:hover > .vkBox-grip, .vkBox-grip:focus-visible, .vkBoxes.ui-sortable-disabled .vkBox-grip{ opacity: 1; }
.vkBox-grip:hover{ background: var(--vk-violet-tint, #f1e9fa); color: var(--vk-violet-4f1697, #4f1697); }
.vkBox-grip:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
@media (hover: none){ .vkBox-grip{ opacity: .7; } }
.vkBox-placeholder{ border: 2px dashed var(--vk-violet-line, #cdb7ee); border-radius: 16px; background: var(--vk-violet-tint-faf7fe, #faf7fe); visibility: visible !important; }
.vkBox.ui-sortable-helper{ z-index: 50; }
.vkBox.ui-sortable-helper > .vkKpi, .vkBox.ui-sortable-helper > .vkPanel{ box-shadow: 0 18px 40px rgba(22, 22, 26, .18); }

/* ---------------------------------------------------------------- figures */

.vkKpi{
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
    padding: 14px 16px; background: var(--vk-surface, #ffffff); border: 1px solid var(--vk-line, #e4e3ea); border-radius: 16px;
}
.vkKpi-label{ font-size: 11.5px; font-weight: 600; color: var(--vk-soft, #5f5e6b); }
.vkKpi-value{ font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.vkKpi-note{ font-size: 11.5px; color: var(--vk-soft, #5f5e6b); }
.vkKpi-note--up{ color: var(--vk-ok-1f7a3a, #1f7a3a); }
.vkKpi-note--down{ color: var(--vk-err, #b3261e); }
.vkKpi-bar{ display: block; height: 6px; margin: 2px 0; border-radius: 99px; background: var(--vk-field, #efeef4); overflow: hidden; }
.vkKpi-bar i{ display: block; height: 100%; border-radius: 99px; background: var(--vk-violet, #6e1fd1); }
/* people with a link: in short; the card opens them all (view/js/vk_access.js) */
.vkKpi--people{ cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.vkKpi--people:hover{ border-color: var(--vk-violet-line, #cdb7ee); background: var(--vk-raised-fdfbff, #fdfbff); }
.vkKpi--people:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
.vkKpi-open{ margin-top: auto; padding-top: 4px; font-size: 12px; font-weight: 600; color: var(--vk-violet-4f1697, #4f1697); }
.vkKpi-note a.vkPeopleOpen{ color: var(--vk-violet-4f1697, #4f1697) !important; font-weight: 600; }

/* ---------------------------------------------------------------- panels */

.vkPanel{
    min-width: 0; padding: 18px 20px;
    background: var(--vk-surface, #ffffff); border: 1px solid var(--vk-line, #e4e3ea); border-radius: 16px;
}
.vkPanel-head{ margin-bottom: 12px; }
.detailphoto .vkPanel-title{
    float: none; width: auto; margin: 0; padding: 0;
    font-family: inherit; font-size: 15px; font-weight: 700; color: var(--vk-text, #16161a); text-transform: none;
}
.vkPanel-sub{ margin: 2px 0 0 0; font-size: 12px; color: var(--vk-soft, #5f5e6b); }
.vkPanel-empty{ margin: 0; font-size: 13px; color: var(--vk-soft, #5f5e6b); }

.vkLegend{ display: flex; gap: 16px; margin: 8px 0 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--vk-soft-3c3b46, #3c3b46); }
.vkLegend li{ display: flex; align-items: center; gap: 6px; }
.vkLegend span{ color: var(--vk-soft-8a8995, #8a8995); }
.vkLegend-bar{ width: 12px; height: 12px; border-radius: 3px; background: var(--vk-violet, #6e1fd1); }
.vkLegend-line{ width: 16px; height: 3px; border-radius: 2px; background: #f5a623; }

.vkChart{ display: block; width: 100%; height: auto; }
.vkChart-grid{ stroke: var(--vk-line-soft, #efeef4); stroke-width: 1; }
.vkChart-axis{ font-size: 12.5px; fill: var(--vk-soft-8a8995, #8a8995); font-family: 'Montserrat', sans-serif; }
.vkChart-axis--line{ fill: #c98a17; }
.vkChart-bar{ fill: #6e1fd1; }
.vkChart-bar:hover{ fill: var(--vk-violet-4f1697, #4f1697); }
.vkChart-line{ fill: none; stroke: #f5a623; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.vkChart-dot{ fill: var(--vk-surface, #ffffff); stroke: #f5a623; stroke-width: 2.5; }

.vkTypesBox{ display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.vkRing{ width: 132px; height: 132px; flex-shrink: 0; align-self: center; }
.vkRing-total{ font-size: 18px; font-weight: 700; fill: var(--vk-text, #16161a); font-family: 'Montserrat', sans-serif; }
.vkRing-label{ font-size: 9px; fill: var(--vk-soft, #5f5e6b); font-family: 'Montserrat', sans-serif; }
.vkTypes{ flex-grow: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.vkTypes li{ display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.vkTypes i{ grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 3px; }
.vkTypes-name{ font-size: 13px; font-weight: 600; }
.vkTypes-ext{ grid-column: 2; grid-row: 2; font-size: 11px; color: var(--vk-soft-8a8995, #8a8995); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vkTypes-n{ grid-column: 3; grid-row: 1 / 3; font-size: 12px; color: var(--vk-soft-3c3b46, #3c3b46); white-space: nowrap; }

.vkBars{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.vkBars-line{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: 13px; }
.vkBars-line a{ color: var(--vk-text, #16161a) !important; font-weight: 600; text-decoration: none !important; }
.vkBars-line a:hover{ color: var(--vk-violet-4f1697, #4f1697) !important; text-decoration: underline !important; }
.vkBars-line > span:first-child{ font-weight: 600; }
.vkBars-n{ font-size: 12px; color: var(--vk-soft, #5f5e6b); white-space: nowrap; }
.vkBars-track{ display: block; height: 8px; border-radius: 99px; background: var(--vk-violet-tint, #f1e9fa); overflow: hidden; }
.vkBars-track i{ display: block; height: 100%; border-radius: 99px; background: var(--vk-violet, #6e1fd1); }

.vkFiles{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.vkBox--w6 .vkFiles{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.vkFiles li{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.vkFiles-pic{
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; overflow: hidden;
    background: var(--vk-field-f1f0f5, #f1f0f5); display: flex; align-items: center; justify-content: center;
}
.vkFiles-pic img{ width: 100%; height: 100%; object-fit: cover; }
.vkFiles-ext{ font-size: 10px; font-weight: 700; color: var(--vk-soft, #5f5e6b); }
.vkFiles-text{ flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vkFiles-name{ font-size: 13px; font-weight: 600; color: var(--vk-text, #16161a) !important; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.vkFiles-name:hover{ color: var(--vk-violet-4f1697, #4f1697) !important; text-decoration: underline !important; }
.vkFiles-meta{ font-size: 11.5px; color: var(--vk-soft, #5f5e6b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vkFiles-n{ flex-shrink: 0; font-size: 12px; color: var(--vk-soft-3c3b46, #3c3b46); white-space: nowrap; }

/* ---------------------------------------------------------------- people with a link */
/* "Personas con enlace" (modals/modal_views/modal_users/people_list.php): since 2026-09-26 one line
   per person, opened to change it, and a search on top - his words: "que ocupe una linea y que se pueda
   expandir para editar" and "un buscador arriba para buscar por email o nombre" (view/js/vk_access.js).
   Redrawn on 2026-10-03, his words: "mejora el UI y el UX de este modal" - one row of tools, one scroll,
   the open row in four blocks with their labels in one column. */

#userscat .vkPeopleModal [hidden]{ display: none !important; }      /* the rows' own display would win */

/* ONE SCROLL (2026-10-03): the window fits the screen and only the list scrolls; the title, the search and «A alguien nuevo» stay where they are. Until then the
   list scrolled inside a window that scrolled as well. 70 px = the dialog's margin and the window's, above and below (15 + 20: view/css/style.css). The × leaves
   the flow, or it would take a row of its own in the column */
#userscat .modal-content:has(> .vkPeopleModal){ display: flex; flex-direction: column; max-height: calc(100vh - 70px); }
#userscat .modal-content:has(> .vkPeopleModal) > .close{ position: absolute; top: 26px; right: 30px; z-index: 3; margin: 0; }
#userscat .vkAcc.vkPeopleModal{ flex: 1 1 auto; min-height: 0; clear: none; gap: 16px; overflow-y: auto; }    /* its own scroll only on a screen too short for the form and a list */
#userscat .vkPeople-head{ display: flex; flex-direction: column; gap: 6px; padding-right: 40px; }
#userscat .vkPeopleModal .vkPeople-head .vkAcc-sub{ margin: 0; }      /* view/css/vk_access.css pulls every subtitle 16 px up, and it loads after this file */

/* the search, how many, «A alguien nuevo»: one row */
#userscat .vkPeople-bar{ display: flex; align-items: center; gap: 12px; }
#userscat .vkPeople-search{ float: none; width: auto; flex: 1 1 auto; min-width: 0; margin: 0; display: block; font-weight: 400; }
#userscat .vkPeople-search input{
    width: 100%; height: 42px; margin: 0; padding: 0 12px 0 38px; border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px;
    background: var(--vk-surface, #ffffff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8995' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") no-repeat 13px center;
    color: var(--vk-text, #16161a); font-size: 14px;
}
#userscat .vkPeople-search input:focus{ border-color: var(--vk-violet, #6e1fd1); outline: 0; }
#userscat .vkPeople-count{ flex-shrink: 0; font-size: 12.5px; color: var(--vk-soft, #5f5e6b); white-space: nowrap; }
#userscat .vkPeople-addBtn{
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 42px; margin: 0; padding: 0 16px;
    border: 1px solid var(--vk-violet, #6e1fd1); border-radius: 10px; background: var(--vk-surface, #ffffff); color: var(--vk-violet-4f1697, #4f1697);
    font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
#userscat .vkPeople-addBtn:hover, #userscat .vkPeople-addBtn[aria-expanded="true"]{ background: var(--vk-violet-tint, #f1e9fa); }

/* the list: what scrolls */
#userscat .vkPeopleModal .vkDash--inModal{ flex: 1 1 auto; min-height: 0; margin: 0; }
#userscat .vkPeopleModal .vkPeople{
    position: relative;                                       /* the rows' unseen words (.vkAcc-sr, absolute) are clipped here: placed by the window, they stretched it past the screen */
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--vk-line, #e4e3ea); border-radius: 14px; background: var(--vk-surface, #ffffff);
}
.vkPeople-list{ margin: 0; padding: 0; list-style: none; }
#userscat .vkAcc-person.vkPeople-row{ display: block; padding: 0; gap: 0; border: 0; border-top: 1px solid var(--vk-line-soft, #efeef4); border-radius: 0; background: var(--vk-surface, #ffffff); text-align: left; }
#userscat .vkAcc-person.vkPeople-row:first-child{ border-top: 0; }
#userscat .vkAcc-person.vkPeople-row.is-open{ background: var(--vk-raised-faf9fc, #faf9fc); }
.vkPeople-nobody{ margin: 0; padding: 18px; font-size: 13px; color: var(--vk-soft, #5f5e6b); }

/* closed: one line - the chevron, their initials, name and e-mail, what they see, when they came; «Copiar enlace» and «Entrar» after it */
.vkPeople-line{ display: flex; align-items: center; gap: 10px; padding-right: 16px; }
.vkDash .vkPeople .vkPeople-toggle{
    flex: 1 1 auto; min-width: 0; min-height: 62px; margin: 0; padding: 10px 0 10px 16px;
    display: grid; grid-template-columns: 14px 34px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr);
    align-items: center; gap: 0 14px;
    border: 0; border-radius: 0; background: none; color: var(--vk-text, #16161a); font-family: inherit; text-align: left; cursor: pointer;
}
.vkPeople-chev{ display: flex; color: var(--vk-soft-8a8995, #8a8995); transition: transform .15s ease; }
.vkPeople-row.is-open .vkPeople-chev{ transform: rotate(90deg); color: var(--vk-violet-4f1697, #4f1697); }
.vkPeople-avatar{
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--vk-violet-tint, #f1e9fa); color: var(--vk-violet-4f1697, #4f1697); font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1;
}
.vkPeople-who{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vkPeople-who strong{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.vkPeople-who span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.3; color: var(--vk-soft, #5f5e6b); }
.vkDash .vkPeople .vkPeople-toggle:hover .vkPeople-who strong{ color: var(--vk-violet-4f1697, #4f1697); }
.vkPeople-sees, .vkPeople-when{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--vk-soft, #5f5e6b); }
.vkPeople-sees{ font-weight: 600; color: var(--vk-violet-4f1697, #4f1697); }
.vkPeople-sees.is-none{ font-weight: 400; color: var(--vk-soft, #5f5e6b); }
.vkPeople-when{ text-align: right; }
.vkDash .vkPeople .vkPeople-copy{
    flex-shrink: 0; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--vk-inv, #16161a); color: #ffffff;
    font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.vkDash .vkPeople .vkPeople-copy:hover{ background: var(--vk-invh-3b3b44, #3b3b44); }
.vkPeople-noLink{ flex-shrink: 0; min-width: 104px; font-size: 12px; font-weight: 600; color: var(--vk-err, #b3261e); text-align: center; }

/* open: four blocks - Persona, Ve, Puede, Enlace - each label in the column under the initials, right-aligned, and what it holds under the name
   (16 + 62 + 14 = 92 px, where the name begins: 16 + 14 + 14 + 34 + 14) */
.vkPeople-more{ display: flex; flex-direction: column; gap: 14px; padding: 2px 20px 20px 16px; }
.vkPeople-sec{ display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.vkPeople-secLabel{ min-height: 30px; display: flex; align-items: center; justify-content: flex-end; font-size: 12px; font-weight: 600; color: var(--vk-soft, #5f5e6b); text-align: right; }
.vkPeople-secBody{ min-width: 0; }

/* Persona: their name and e-mail, and «Editar» turning each into a field */
.vkPeople-id{ min-height: 30px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.vkPeople-idRow{ min-width: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; }
.vkPeople-idVal{ min-width: 0; font-weight: 600; color: var(--vk-text, #16161a); overflow-wrap: anywhere; }
.vkPeople-idVal.is-none{ font-weight: 400; color: var(--vk-soft-8a8995, #8a8995); }
.vkPeople-idRow.is-editing{ flex: 1 1 100%; flex-wrap: nowrap; }
.vkDash .vkPeople .vkPeople-idInput{
    flex: 0 1 300px; width: 300px; min-width: 0; height: 32px; margin: 0; padding: 0 10px; border: 1px solid var(--vk-violet, #6e1fd1); border-radius: 8px;
    background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a); font-family: inherit; font-size: 13px;
}
.vkDash .vkPeople .vkPeople-idInput:focus{ outline: 0; box-shadow: 0 0 0 3px var(--vk-violet-tint, #f1e9fa); }

/* Ve: whole hubs first, then by hub (its name before its sections, never alone at the end of a line); two lines until «+N más» (view/js/vk_access.js chipsFit()) */
.vkPeople-where{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12.5px; overflow-wrap: anywhere; }
.vkPeople-chips{ position: relative; align-self: stretch; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.vkPeople-chips.is-clamped{ overflow: hidden; }
.vkPeople-group{ display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.vkPeople-hubTag{
    flex-shrink: 0; display: inline-flex; align-items: center; height: 30px; margin-left: 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--vk-soft, #5f5e6b); white-space: nowrap;
}
.vkPeople-chips > .vkPeople-group:first-child .vkPeople-hubTag{ margin-left: 0; }
.vkPeople-nothing{ min-height: 30px; display: flex; align-items: center; font-size: 12.5px; color: var(--vk-soft, #5f5e6b); }
.vkPeople-whereFoot{ display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; }
.vkPeople-where a{ color: var(--vk-violet-4f1697, #4f1697) !important; font-weight: 600; }
.vkPeople-chip{
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0;
    padding: 3px 3px 3px 11px; border-radius: 99px; background: var(--vk-violet-tint, #f1e9fa);
}
.vkPeople-chip a{ min-width: 0; font-size: 12.5px; text-decoration: none !important; }
.vkPeople-chip a:hover{ text-decoration: underline !important; }
.vkPeople-chip small{ flex-shrink: 0; font-size: 11px; color: var(--vk-soft-6b6a76, #6b6a76); }
.vkDash .vkPeople .vkPeople-drop{
    width: 24px; height: 24px; flex-shrink: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--vk-violet-4f1697, #4f1697); cursor: pointer;
}
.vkDash .vkPeople .vkPeople-drop:hover{ background: var(--vk-surface, #ffffff); color: var(--vk-err, #b3261e); }

/* Puede: a switch per action (view/js/vk_access.js); "Ver" always */
.vkPeople-can{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vkPeople-canLabel{ margin-right: 4px; font-size: 12px; font-weight: 600; color: var(--vk-soft, #5f5e6b); }
.vkDash .vkPeople .vkCan, #userscat .vkPeople-newCan .vkCan{
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 99px; background: var(--vk-surface, #ffffff); color: var(--vk-soft, #5f5e6b);
    font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.vkDash .vkPeople .vkCan .vkCan-tick, #userscat .vkPeople-newCan .vkCan .vkCan-tick{ display: none; }
.vkDash .vkPeople .vkCan.is-on, #userscat .vkPeople-newCan .vkCan.is-on{ border-color: var(--vk-violet, #6e1fd1); background: var(--vk-violet-tint, #f1e9fa); color: var(--vk-violet-4f1697, #4f1697); }
.vkDash .vkPeople .vkCan.is-on .vkCan-tick, #userscat .vkPeople-newCan .vkCan.is-on .vkCan-tick{ display: block; }
.vkDash .vkPeople button.vkCan:hover, #userscat .vkPeople-newCan button.vkCan:hover{ border-color: var(--vk-violet, #6e1fd1); color: var(--vk-violet-4f1697, #4f1697); }
.vkDash .vkPeople .vkCan.is-fixed, #userscat .vkPeople-newCan .vkCan.is-fixed{ cursor: default; opacity: .75; }
.vkDash .vkPeople .vkCan:focus-visible, #userscat .vkPeople-newCan .vkCan:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }

/* Enlace: its language, its look («Tema», 2026-10-03), where it opens and whether that hub comes unfolded (each saved as it changes), then the link itself.
   The window's old rules float every label and select and size them (.modalcommon in view/css/style.css): these say it all again */
.vkPeople-linkBox{ display: flex; flex-direction: column; gap: 10px; }
.vkPeople-landing{ min-height: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.vkPeople-field{ min-width: 0; display: inline-flex; align-items: center; gap: 8px; }
.vkDash .vkPeople .vkPeople-fLabel{ float: none; width: auto; margin: 0; font-size: 12px; font-weight: 600; color: var(--vk-soft, #5f5e6b); white-space: nowrap; }
.vkDash .vkPeople .vkPeople-select{
    float: none; width: auto; min-width: 0; height: 32px; margin: 0; padding: 0 8px 0 10px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 8px; background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.vkDash .vkPeople .vkPeople-land{ max-width: 260px; }        /* its longest place sets its width: narrower, the switch after it stays on the line */
.vkDash .vkPeople .vkPeople-select:focus{ border-color: var(--vk-violet, #6e1fd1); outline: 0; }
/* «Tema»: two buttons in one, as «A-Z | Manual» in the tree (view/css/sidebar_tree.css .vkTree-seg); in the form too */
.vkPeople-theme{ display: inline-flex; align-items: stretch; height: 32px; padding: 3px; gap: 2px; border-radius: 9px; background: var(--vk-violet-tint, #f1e9fa); }
.vkPeople-theme button{
    display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 11px; border: 0; border-radius: 6px; background: transparent;
    color: var(--vk-soft-3c3b46, #3c3b46); font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.vkPeople-theme button i{ font-size: 11px; }
.vkPeople-theme button[aria-pressed="true"]{ background: var(--vk-inv, #16161a); color: #ffffff; }
.vkPeople-theme button[aria-pressed="false"]:hover{ color: var(--vk-violet-4f1697, #4f1697); }
.vkPeople-theme button:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 1px; }
.vkPeople-theme button.is-busy{ opacity: .6; cursor: progress; }
/* «con el hub desplegado»: a switch. The box stays a real checkbox, unseen, over the track (style.css shrinks and scales every checkbox) */
.vkDash .vkPeople .vkPeople-switch{
    position: relative; float: none; width: auto; margin: 0; display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 500; color: var(--vk-soft, #5f5e6b); white-space: nowrap; cursor: pointer;
}
.vkDash .vkPeople .vkPeople-switch input{ position: absolute; left: 0; top: 50%; width: 30px; height: 18px; margin: -9px 0 0; padding: 0; opacity: 0; transform: none; cursor: pointer; }
.vkPeople-switchTrack{ position: relative; flex-shrink: 0; width: 30px; height: 18px; border-radius: 99px; background: var(--vk-line-strong-cfcde0, #cfcde0); transition: background .15s ease; }
.vkPeople-switchTrack::after{
    content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #ffffff;
    box-shadow: 0 1px 2px rgba(22, 22, 26, .25); transition: transform .15s ease;
}
.vkPeople-switch input:checked + .vkPeople-switchTrack{ background: var(--vk-violet, #6e1fd1); }
.vkPeople-switch input:checked + .vkPeople-switchTrack::after{ transform: translateX(12px); }
.vkPeople-switch input:focus-visible + .vkPeople-switchTrack{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
/* the link, «Copiar enlace», «Enlace nuevo» and «Anular enlace»; under it what the link allows (decision 007, part 5) */
.vkPeople-link{ min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vkDash .vkPeople .vkAcc-linkInput{
    flex: 1 1 300px; width: 0; min-width: 0; height: 36px; margin: 0; padding: 0 10px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 9px; background: var(--vk-surface, #ffffff); color: var(--vk-soft-3c3b46, #3c3b46); font-size: 12px;
}
.vkDash .vkPeople .vkAcc-copy{
    height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--vk-inv, #16161a); color: #ffffff;
    font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.vkPeople-none{ font-size: 12.5px; color: var(--vk-soft, #5f5e6b); }
.vkPeople-actions{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-left: 10px; }
.vkPeople-linkCan{ font-size: 12px; color: var(--vk-soft, #5f5e6b); }
.vkDash .vkPeople .vkAcc-textBtn{
    padding: 4px 0; border: 0; background: none; color: var(--vk-violet-4f1697, #4f1697);
    font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.vkDash .vkPeople .vkAcc-textBtn:hover{ text-decoration: underline; }
.vkDash .vkPeople .vkAcc-textBtn--danger{ color: var(--vk-err, #b3261e); }
.vkDash .vkPeople button:focus-visible, .vkDash .vkPeople a:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
.vkDash .vkPeople .vkPeople-toggle:focus-visible{ outline-offset: -2px; }
.vkDash .vkPeople .is-busy{ opacity: .6; cursor: progress; }
.vkPeople .vkAcc-sr, .vkPeople-bar .vkAcc-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- a person made, named, e-mailed, entered and deleted here (brief K, 2026-10-02) */

/* «A alguien nuevo» (beside the search since 2026-10-03), and the form it shows under it: name, e-mail, language, «Tema», the switches, the sections once it is made */
#userscat .vkPeople-addBtn:focus-visible, #userscat .vkPeople-new button:focus-visible, #userscat .vkPeople-new input:focus-visible, #userscat .vkPeople-new select:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
#userscat .vkPeople-new{
    flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 16px;
    border: 1px solid var(--vk-line, #e4e3ea); border-radius: 14px; background: var(--vk-raised-faf9fc, #faf9fc);
}
#userscat .vkPeople-newTop{ display: flex; align-items: flex-end; gap: 10px; }
#userscat .vkPeople-new .vkAcc-field{ flex: 1 1 0; }
#userscat .vkPeople-new .vkAcc-field.vkPeople-newLang{ flex: 0 0 160px; }          /* one class more than view/css/vk_access.css's .vkAcc-field, which loads after this file */
#userscat .vkPeople-new .vkAcc-field.vkPeople-newTheme{ flex: 0 0 auto; }
#userscat .vkPeople-new .vkPeople-theme{ align-self: flex-start; height: 42px; padding: 4px; border-radius: 10px; }
#userscat .vkPeople-new .vkPeople-theme button{ padding: 0 14px; border-radius: 7px; }
#userscat .vkPeople-new .vkAcc-field select{
    width: 100%; height: 42px; margin: 0; padding: 0 10px; border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px;
    background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a); font-family: inherit; font-size: 14px;
}
#userscat .vkPeople-newCan{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#userscat .vkPeople-newFoot{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
#userscat .vkPeople-new label.vkPeople-newPick{
    float: none; width: auto; margin: 0; display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--vk-soft-3c3b46, #3c3b46); cursor: pointer;
}
#userscat .vkPeople-newPick input{ width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--vk-violet, #6e1fd1); transform: none; }
#userscat .vkPeople-newHelp{ flex: 1 1 200px; font-size: 12px; color: var(--vk-soft, #5f5e6b); }
#userscat .vkPeople-new .vkAcc-create{ margin-left: auto; }

/* «Entrar», beside «Copiar enlace» in the closed line: the person's account in a tab of its own */
.vkPeople-enter{ flex-shrink: 0; margin: 0; }
.vkDash .vkPeople .vkPeople-enterBtn{
    height: 32px; padding: 0 12px; border: 1px solid var(--vk-text, #16161a); border-radius: 8px; background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.vkDash .vkPeople .vkPeople-enterBtn:hover{ background: var(--vk-inv, #16161a); color: #ffffff; }

/* what the app says after each change, also inside this window: the page's toast is under it (view/js/vk_access.js say()). Zero height and stuck to the bottom of the screen, so it moves nothing */
#userscat .vkPeople-noteWrap{ position: sticky; bottom: 16px; z-index: 8; height: 0; margin: 0; padding: 0; }
#userscat .vkPeople-note{
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: max-content; max-width: 100%; margin: 0; padding: 11px 16px;
    border-radius: 12px; background: var(--vk-inv, #16161a); color: #ffffff; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; text-align: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

/* deleting a person: the question in the row, under the buttons, where the blocks' contents begin */
.vkPeople-ask{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-left: 76px; }
.vkPeople-askText{ font-size: 12.5px; font-weight: 600; color: var(--vk-text, #16161a); }

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

/* the people window (modals/modal_views/modal_users/people_list.php) is wide */
#userscat.vkWide .modal-dialog{ width: min(1180px, calc(100vw - 32px)); max-width: none; }
.vkDash--inModal{ margin-top: 4px; }

@media (max-width: 1280px){
    .vkBoxes--panels .vkBox{ grid-column: 1 / -1; }
    .vkBox--w6 .vkFiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1125px){
    .vkDashWrap{ margin: 0 8px 40px 8px; }
}
@media (max-width: 1100px){
    .vkBoxes--kpis{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px){
    .vkBoxes--kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* the people window on a phone scrolls as one page, as it did: a list in a box of its own would be a sliver under the form */
    #userscat .modal-content:has(> .vkPeopleModal){ display: block; max-height: none; }
    #userscat .modal-content:has(> .vkPeopleModal) > .close{ top: 14px; right: 14px; }
    #userscat .vkAcc.vkPeopleModal, #userscat .vkPeopleModal .vkPeople{ overflow: visible; }
    #userscat .vkPeople-bar{ flex-wrap: wrap; }
    #userscat .vkPeople-search{ flex: 1 1 100%; }
    #userscat .vkPeople-addBtn{ margin-left: auto; }
    /* the closed line wraps under the name: what they see and when they came, then «Copiar enlace» and «Entrar» - side by side they left the name a sliver */
    .vkDash .vkPeople .vkPeople-toggle{ flex: 1 1 100%; grid-template-columns: 14px 34px minmax(0, 1fr); gap: 2px 12px; }
    .vkPeople-toggle > .vkPeople-sees, .vkPeople-toggle > .vkPeople-when{ grid-column: 3; text-align: left; white-space: normal; }
    .vkPeople-line{ flex-wrap: wrap; row-gap: 0; padding-bottom: 12px; }
    .vkPeople-line > .vkPeople-copy, .vkPeople-line > .vkPeople-noLink{ margin-left: 42px; }      /* under the initials: under the name, «Entrar» fell to a line of its own */
    .vkDash .vkPeople .vkPeople-copy{ padding: 0 10px; }
    .vkPeople-noLink{ min-width: 0; text-align: left; }
    /* open: each label over what it holds */
    .vkPeople-more{ padding: 0 14px 18px; gap: 12px; }
    .vkPeople-sec{ grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
    .vkPeople-secLabel{ min-height: 0; justify-content: flex-start; text-align: left; }
    .vkPeople-actions{ margin-left: 0; }
    .vkPeople-ask{ padding-left: 0; }
    #userscat .vkPeople-newTop{ flex-direction: column; align-items: stretch; }
    #userscat .vkPeople-new .vkAcc-field, #userscat .vkPeople-new .vkAcc-field.vkPeople-newLang, #userscat .vkPeople-new .vkAcc-field.vkPeople-newTheme{ flex: none; }
    #userscat .vkPeople-new .vkAcc-create{ margin-left: 0; width: 100%; }
    .vkPeople-idRow.is-editing{ flex-wrap: wrap; }
    .vkDash .vkPeople .vkPeople-idInput{ flex: 1 1 100%; width: 100%; }
}
@media (max-width: 600px){
    .vkBox--w6 .vkFiles{ grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- whole hubs (2026-09-26) */
/* in the people list, a whole hub goes first, dark */
.vkPeople-chip--hub{ background: var(--vk-inv, #16161a); }
.vkPeople-chip--hub .vkPeople-chipName{ font-size: 12.5px; font-weight: 600; color: #ffffff; }
.vkPeople-chip--hub small{ color: var(--vk-faint-cfcde0, #cfcde0); }
.vkDash .vkPeople .vkPeople-hubDrop{
    width: 24px; height: 24px; flex-shrink: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; color: #ffffff; cursor: pointer;
}
.vkDash .vkPeople .vkPeople-hubDrop:hover{ background: rgba(255, 255, 255, .16); }

/* a person's own page (inc/dashboard_person.php): their hubs, then the latest */
.vkDash--person{ margin-top: 4px; }
.vkHubCards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.vkHubCard{ display: flex; flex-direction: column; }
.vkHubCard-secs{ display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.vkHubCard-open{ margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--vk-violet-4f1697, #4f1697) !important; text-decoration: none !important; }
.vkHubCard-open:hover{ text-decoration: underline !important; }
.vkFiles--grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 1280px){ .vkFiles--grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px){ .vkFiles--grid{ grid-template-columns: minmax(0, 1fr); } .vkHubCards{ grid-template-columns: minmax(0, 1fr); } }
/* «LO ÚLTIMO» ON A PERSON'S PAGE IN THE HOUSE STYLE (2026-10-08, his words "mejora el UX UI de esta box, implementa el estio que hemos estado utilizando y adoptando";
   markup inc/dashboard_person.php). The box: the hubs' cards' own (radius 18, #282830 in the dark look, no border there). Its summary in Departure Mono, as every summary under
   a title. Each file a whole-row link that opens it (its page, its detail open) - a subtle key at rest (a face with a faint line on top and a hairline, as the hub cards' small
   tiles), the raised key under the pointer (the floating line's chips), the name in the look's accent and a «→» sliding in. The picture a small key tile with the card's bezel;
   a file with none shows its type in mono. Under the name, one mono line: where it is · the day. Dark and light. */
:is(.vkDash--person, .vkRowsLook) .vkPanel{ padding: 18px 18px 16px; border-radius: 18px; }
html[data-theme="dark"] :is(.vkDash--person, .vkRowsLook) .vkPanel{ background: none; padding: 15px 0px 0px 0px; }      /* his value (2026-10-08): no panel box in dark, the content at the edge */
:is(.vkDash--person, .vkRowsLook) .vkPanel-head{ margin: 0 4px 14px; }
.detailphoto :is(.vkDash--person, .vkRowsLook) .vkPanel-title{ font-size: 16px; letter-spacing: .005em; }
:is(.vkDash--person, .vkRowsLook) .vkPanel-sub{ margin-top: 4px; font-family: var(--vk-departure) !important; font-synthesis: none; font-size: 11px; letter-spacing: .02em; color: var(--vk-soft-6b6a76, #6b6a76); }
:is(.vkDash--person, .vkRowsLook) .vkPanel-empty{ margin: 0 4px; font-family: var(--vk-departure) !important; font-size: 12px; }
:is(.vkDash--person, .vkRowsLook) .vkFiles--grid{ gap: 10px 12px; }
:is(.vkDash--person, .vkRowsLook) .vkFiles li{ display: block; min-width: 0; }
:is(.vkDash--person, .vkRowsLook) .vkFiles-row{
    position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 34px 8px 8px; border-radius: 12px;
    color: inherit !important; text-decoration: none !important; outline: 0;
    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);
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.vkFiles-row:hover, a.vkFiles-row:focus-visible{
    background: linear-gradient(180deg, #ffffff 0%, #f1f3f6 100%);
    box-shadow: inset 0 1.5px 0 #ffffff, 0 0 0 1px #d6dbe2, 0 0 0 3px #eef1f4, 0 6px 12px 1px rgba(30, 45, 65, .12);
    transform: translateY(-1px);
}
a.vkFiles-row:focus-visible{ outline: 2px solid var(--vk-hl, var(--vk-violet, #6e1fd1)) !important; outline-offset: 3px; }
a.vkFiles-row:active{ transform: translateY(0); }
html[data-theme="dark"] :is(.vkDash--person, .vkRowsLook) .vkFiles-row{
    background: linear-gradient(134deg, #5252524a, #342e426b, #29282ec4);      /* his value, 2026-10-08 (was 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"] :is(.vkDash--person, .vkRowsLook) a.vkFiles-row:hover, html[data-theme="dark"] :is(.vkDash--person, .vkRowsLook) a.vkFiles-row:focus-visible{
    background: linear-gradient(180deg, #34353e 0%, #2d2e36 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);
}
:is(.vkDash--person, .vkRowsLook) .vkFiles-pic{
    position: relative; width: 44px; height: 44px; border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f1f3f6 100%);
    box-shadow: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(30, 45, 65, .1), 0 3px 6px rgba(30, 45, 65, .12);
}
html[data-theme="dark"] :is(.vkDash--person, .vkRowsLook) .vkFiles-pic{
    background: linear-gradient(180deg, #35363e 0%, #2b2c33 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px #18181d, 0 3px 6px rgba(0, 0, 0, .4);
}
:is(.vkDash--person, .vkRowsLook) .vkFiles-pic img{ border-radius: inherit; }
:is(.vkDash--person, .vkRowsLook) .vkFiles-ext{ font: 400 10px/1 var(--vk-departure) !important; font-synthesis: none; letter-spacing: .04em; color: var(--vk-soft-6b6a76, #6b6a76); }
:is(.vkDash--person, .vkRowsLook) .vkFiles-ext.is-long{ font-size: 8px !important; letter-spacing: 0; }
:is(.vkDash--person, .vkRowsLook) .vkFiles-text{ gap: 4px; }
:is(.vkDash--person, .vkRowsLook) .vkFiles-name{ display: block; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--vk-text, #16161a); transition: color .15s ease; }
:is(.vkDash--person, .vkRowsLook) a.vkFiles-row:hover .vkFiles-name, :is(.vkDash--person, .vkRowsLook) a.vkFiles-row:focus-visible .vkFiles-name{ color: var(--vk-hl, var(--vk-violet-4f1697, #4f1697)); }
:is(.vkDash--person, .vkRowsLook) .vkFiles-meta{ display: flex; align-items: baseline; gap: 6px; min-width: 0; font: 400 10.5px/1.3 var(--vk-departure) !important; font-synthesis: none; color: var(--vk-soft-6b6a76, #6b6a76); }
:is(.vkDash--person, .vkRowsLook) .vkFiles-where{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vk-soft, #5f5e6b); }
:is(.vkDash--person, .vkRowsLook) .vkFiles-dot, :is(.vkDash--person, .vkRowsLook) .vkFiles-day{ flex: 0 0 auto; white-space: nowrap; }
:is(.vkDash--person, .vkRowsLook) .vkFiles-dot{ opacity: .6; }
:is(.vkDash--person, .vkRowsLook) .vkFiles-go{
    position: absolute; right: 12px; top: 50%; margin-top: -10px; height: 20px; display: flex; align-items: center;
    font-size: 18px; line-height: 1; color: var(--vk-hl, var(--vk-violet, #6e1fd1));
    opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease;
}
:is(.vkDash--person, .vkRowsLook) a.vkFiles-row:hover .vkFiles-go, :is(.vkDash--person, .vkRowsLook) a.vkFiles-row:focus-visible .vkFiles-go{ opacity: 1; transform: translateX(0); }
html[data-theme="dark"] :is(.vkDash--person, .vkRowsLook) .vkFiles-name{ color: #ececf1; }
html[data-theme="dark"] :is(.vkDash--person, .vkRowsLook) a.vkFiles-row:hover .vkFiles-name, html[data-theme="dark"] :is(.vkDash--person, .vkRowsLook) a.vkFiles-row:focus-visible .vkFiles-name{ color: var(--vk-hl, var(--vk-violet, #ba93f5)); }
html[data-theme="dark"] :is(.vkDash--person, .vkRowsLook) .vkFiles-where{ color: #a3a2ae; }
@media (prefers-reduced-motion: reduce){ :is(.vkDash--person, .vkRowsLook) .vkFiles-row, :is(.vkDash--person, .vkRowsLook) .vkFiles-go{ transition: none; } :is(.vkDash--person, .vkRowsLook) a.vkFiles-row:hover{ transform: none; } }
/* the comments box of the admin's first page wears these rows too (2026-10-09, his words: "hazla con el mismo diseño y estructura que hice cambiar en la cuenta del
   usuario con link"); its state at the end of the small line: amber while pending, green once solved */
.vkRowsLook .vkFiles-state{ flex: 0 0 auto; margin-left: 4px; padding: 1px 6px; border-radius: 6px; font: 600 9.5px/1.4 var(--vk-departure) !important; font-synthesis: none; letter-spacing: .03em; color: #8a5a00; background: #fff1d6; }
.vkRowsLook .vkFiles-state.is-solved{ color: #1f6b33; background: #dff3e4; }
html[data-theme="dark"] .vkRowsLook .vkFiles-state{ color: #f5c46a; background: rgba(245, 166, 35, .14); }
html[data-theme="dark"] .vkRowsLook .vkFiles-state.is-solved{ color: #7fd99a; background: rgba(61, 154, 80, .18); }
.vkRowsLook .vkNotesMore{ align-self: flex-start; margin-top: 14px; }

/* The "Hubs" box (his point 13, 2026-09-26): each main hub, the hubs inside it under it, all links. */
.vkKpi--hubs .vkKpi-unit{ font-size: 13px; font-weight: 600; color: var(--vk-soft, #5f5e6b); letter-spacing: 0; }
.vkHubs{ list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.vkHubs-row{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vkHubs-top{ font-size: 13px; font-weight: 700; color: var(--vk-violet-4f1697, #4f1697) !important; text-decoration: none !important; }
.vkHubs-kids{ font-size: 12px; color: var(--vk-soft, #5f5e6b); line-height: 1.5; }
.vkHubs-kids a{ color: var(--vk-text, #16161a) !important; text-decoration: none !important; }
.vkHubs a:hover{ text-decoration: underline !important; }
/* "Tipos de archivo": each type's name a link to all its files (his point 14) */
.vkTypes a.vkTypes-name{ color: inherit !important; text-decoration: none !important; }
.vkTypes a.vkTypes-name:hover{ color: var(--vk-violet-4f1697, #4f1697) !important; text-decoration: underline !important; }

/* ---------------------------------------------------------------- the latest comments (inc/dashboard.php, 2026-09-29) */

.vkNotesBox{ height: 100%; display: flex; flex-direction: column; }
.vkNoteRows, .vkNoteFiles{ margin: 0; padding: 0; list-style: none; display: grid; gap: 10px 20px; }
.vkNoteRows{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vkNoteRow{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.vkNoteRow-text{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vkNoteRow-body{ font-size: 13px; color: var(--vk-text, #16161a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vkNoteRow-meta{ font-size: 12px; color: var(--vk-soft, #5f5e6b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vkNoteRow-state{
    flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
    background: var(--vk-warn-tint-fff4d6, #fff4d6); color: var(--vk-warn-6f5200, #6f5200); white-space: nowrap;
}
.vkNoteRow-state.is-solved{ background: var(--vk-ok-tint-e5f7ee, #e5f7ee); color: var(--vk-ok-1f6b45, #1f6b45); }
.vkNoteRow-go{ flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--vk-violet-4f1697, #4f1697) !important; text-decoration: none !important; white-space: nowrap; }
.vkNoteRow-go:hover{ text-decoration: underline !important; }
.vkNotesMore{
    align-self: flex-start; margin-top: 14px; padding: 0; border: 0; background: none;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--vk-violet-4f1697, #4f1697); cursor: pointer;
}
.vkNotesMore:hover{ text-decoration: underline; }
.vkNotesModal .modal-content{ padding: 28px; }
.vkNotesModal-title{ margin: 0 0 18px; font-size: 20px; font-weight: 700; color: var(--vk-text, #16161a); }
.vkNotesModal-body{ max-height: 70vh; overflow-y: auto; }
@media (max-width: 1100px){ .vkNoteRows{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px){
    .vkNoteRow{ flex-wrap: wrap; }
    .vkNoteRow-text{ flex-basis: calc(100% - 56px); }
}