/* "Ajustes del sistema" (modals/modal_template/infoapp.php), 2026-09-26: inside the old .modalcommon,
   whose rules float and size every label and input - hence #systemsettings on everything here. */

#systemsettings .modal-dialog{ width: min(860px, calc(100vw - 32px)); max-width: none; }
#systemsettings .modal-content{ padding: 32px 36px 28px; font-family: 'Montserrat', sans-serif; color: var(--vk-text, #16161a); text-align: left; }
#systemsettings h1{ float: none; margin: 0 0 18px; font-size: 24px; font-weight: 700; }
#systemsettings .vkSet-form{ float: none; width: 100%; display: flex; flex-direction: column; gap: 22px; }
#systemsettings .vkSet-block{ display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--vk-line-soft, #efeef4); }
#systemsettings .vkSet-block:first-child{ padding-top: 0; border-top: 0; }
#systemsettings .vkSet-block h2{ float: none; margin: 0; font-size: 16px; font-weight: 700; color: var(--vk-text, #16161a); }
#systemsettings .vkSet-note{ margin: -4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--vk-soft, #5f5e6b); }
#systemsettings .vkSet-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
/* ROWS WHOSE LABELS AND BOXES LINE UP (2026-10-03, his words: "pon en fila y alineados todos los campos y los campos de archivos tambien. que no esten descuadrados
   verticalmente"): a field takes two rows of its grid, its label (with its help) and its box, so a longer help pushes the boxes of the whole row down together and they stay
   level; the three colours share one row. */
#systemsettings .vkSet-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
#systemsettings .vkSet-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px){ #systemsettings .vkSet-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#systemsettings .vkSet-aligned > .vkSet-field{ display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 6px; align-items: start; }
:is(#systemsettings, #modify_company_modal) .vkSet-field{ min-width: 0; display: flex; flex-direction: column; gap: 6px; }
:is(#systemsettings, #modify_company_modal) .vkSet-field > label, #systemsettings .vkSet-pair label{
    float: none; width: auto; margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; color: var(--vk-text, #16161a);
}
:is(#systemsettings, #modify_company_modal) .vkSet-help{ font-size: 11.5px; font-weight: 500; color: var(--vk-soft-6b6a76, #6b6a76); }
#systemsettings input[type="text"], #systemsettings input[type="email"], #systemsettings input[type="password"], #systemsettings input[type="number"], #systemsettings select{
    float: none; width: 100%; height: 42px; margin: 0; padding: 0 12px; 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: 13.5px; box-shadow: none;
}
#systemsettings input:focus, #systemsettings select:focus{ border-color: var(--vk-violet, #6e1fd1); outline: 0; }
#systemsettings .vkSet-pair{ display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
#systemsettings .vkSet-pair > div{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#systemsettings .vkSet-field > label.vkSet-check{
    float: none; width: auto; margin: 2px 0 0; display: flex; flex-direction: row; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 500; color: var(--vk-soft, #5f5e6b); text-align: left; cursor: pointer;
}
#systemsettings .vkSet-check input{ width: 16px; height: 16px; margin: 0; transform: none; accent-color: var(--vk-violet, #6e1fd1); }   /* style.css scales every checkbox */

#systemsettings .vkSet-test{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
#systemsettings .vkSet-testTo{ flex: 1 1 240px; width: auto; }
#systemsettings .vkSet-testBtn,
#systemsettings .vkRemRow-open{
    height: 42px; padding: 0 20px; border: 1px solid var(--vk-text, #16161a); border-radius: 10px; background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
#systemsettings .vkSet-testBtn:hover,
#systemsettings .vkRemRow-open:hover{ background: var(--vk-inv, #16161a); color: #ffffff; }
#systemsettings .vkSet-testBtn:disabled{ opacity: .6; cursor: progress; }
#systemsettings .vkSet-testSay{ flex: 1 1 260px; font-size: 12.5px; line-height: 1.45; color: var(--vk-soft, #5f5e6b); }
#systemsettings .vkSet-testSay.is-ok{ color: var(--vk-ok, #1d7a3e); font-weight: 600; }
#systemsettings .vkSet-testSay.is-bad{ color: var(--vk-err, #b3261e); font-weight: 600; }
#systemsettings .vkSet-log[hidden]{ display: none; }

/* "Web remota" in Ajustes del sistema, since 2026-09-30: one row - the dot, the word, the address, and the way into the window of its own (below). */
#systemsettings .vkRemRow{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; background: var(--vk-raised, #fbfafd); }
#systemsettings .vkRemRow .vkRem-remote{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; font-size: 14px; color: var(--vk-text, #16161a); }
#systemsettings .vkRemRow .vkRem-url{ min-width: 0; }
#systemsettings .vkSet-log summary{ font-size: 12px; font-weight: 600; color: var(--vk-violet-4f1697, #4f1697); cursor: pointer; }
#systemsettings .vkSet-log pre{
    max-height: 220px; overflow: auto; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px;
    background: var(--vk-inv, #16161a); color: #e9e8f0; font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-all;
}

/* THE LOGOS (2026-10-03, his words: "adapta esto mejor, porque estos cuadros son demasiado grandes. al fin y al cabo solo es un logo. arreglalo, tambien que la subida y la muestra
   funcionen bien. porque a veces tengo problemas"): the logo in a 64 px tile and the browser's own file button beside it, its file's name shown. The legacy drop box
   `.modal input[type="file"]` (style.css: 265 px tall, its text hidden; inc/header.php adds the upload picture with !important) is for the upload window, not for a logo:
   it hid which file had been chosen. view/js/vk_settings.js shows the chosen picture in the tile at once. */
:is(#systemsettings, #modify_company_modal) .vkSet-logo{ display: flex; align-items: center; gap: 14px; min-width: 0; }
:is(#systemsettings, #modify_company_modal) .vkSet-logoPic{ flex: 0 0 64px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box;
    border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; background: var(--vk-field-f7f6fa, #f7f6fa); }
:is(#systemsettings, #modify_company_modal) .vkSet-logoPic img{ display: block; max-width: 100%; max-height: 100%; padding: 6px; box-sizing: border-box; object-fit: contain; }
:is(#systemsettings, #modify_company_modal) .vkSet-logoPick{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#systemsettings .vkSet-logoDrop{ display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: 12.5px; font-weight: 500; color: var(--vk-soft, #5f5e6b); cursor: pointer; }      /* «Quitar logo» (2026-10-08) */
:is(#systemsettings, #modify_company_modal) .vkSet-logo input[type="file"]{ float: none; width: 100%; height: auto; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
    background: none !important; text-indent: 0; color: var(--vk-soft, #5f5e6b); font-size: 12.5px; }
:is(#systemsettings, #modify_company_modal) .vkSet-logo input[type="file"]::file-selector-button{ height: 34px; margin-right: 10px; padding: 0 14px; border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px;
    background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a); font: 600 12.5px 'Montserrat', sans-serif; cursor: pointer; }
:is(#systemsettings, #modify_company_modal) .vkSet-logo input[type="file"]::file-selector-button:hover{ border-color: var(--vk-violet, #6e1fd1); }
:is(#systemsettings, #modify_company_modal) .vkSet-logoNote{ font-size: 11.5px; line-height: 1.4; color: var(--vk-soft-6b6a76, #6b6a76); }
:is(#systemsettings, #modify_company_modal) .vkSet-logoNote.is-new{ color: var(--vk-ok, #1d7a3e); }
:is(#systemsettings, #modify_company_modal) .vkSet-logoNote.is-bad{ color: var(--vk-err, #b3261e); }

#systemsettings .vkSet-save{ align-self: flex-start; float: none; height: 44px; margin: 0; padding: 0 26px; border-radius: 10px; }

@media (max-width: 640px){
    #systemsettings .modal-content{ padding: 24px 18px 20px; }
    #systemsettings .vkSet-grid, #systemsettings .vkSet-grid--3, #systemsettings .vkSet-grid--4{ grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- a hub's space (his queue item 28, 2026-09-28)
 *
 * "hacer tambien anadir mas espacio a un hub si lo requiere o poder regularlo. establece reguladores".
 * The fixed <select> that could offer nothing became a slider by steps, an exact figure in GB and two
 * quick additions, over a bar of what the hub already uses. Nothing here refuses: the system capacity is
 * a warning, his answer. Markup: modals/modal_views/modal_users/modal_read_users.php; view/js/vk_settings.js.
 */
.vkSpace-bar{ width: 100%; height: 10px; border-radius: 19px; background: var(--vk-fieldh-eaeaea, #eaeaea); overflow: hidden; margin: 6px 0 4px; }
.vkSpace-fill{ height: 10px; border-radius: 19px; background: #0f52ff; transition: width .15s ease; }
.vkSpace-fill.is-over{ background: #d93636; }
.vkSpace-read{ margin: 0 0 8px; font-size: 12px; color: var(--vk-soft-5b5a66, #5b5a66); }
.vkSpace-read .vkSpace-used, .vkSpace-read .vkSpace-limit{ font-weight: 700; color: var(--vk-text, #16161a); }
.vkSpace-range{ width: 100%; margin: 0 0 8px; accent-color: var(--vk-link, #0f52ff); }
.vkSpace-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vkSpace-row .vkSpace-gb{ width: 110px; flex: 0 0 auto; }
.vkSpace-unit{ font-size: 12px; font-weight: 700; color: var(--vk-soft-5b5a66, #5b5a66); margin-right: 4px; }
.vkSpace-add{
    border: 1px solid var(--vk-line-d9d9e3, #d9d9e3); background: var(--vk-surface, #ffffff); border-radius: 8px; padding: 6px 10px;
    font: 600 12px 'Montserrat', sans-serif; color: var(--vk-text, #16161a); cursor: pointer;
}
.vkSpace-add:hover{ border-color: var(--vk-link, #0f52ff); color: var(--vk-link, #0f52ff); }
.vkSpace-warn{ margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--vk-err, #b3261e); }
.vkSpace-sys{ margin: 10px 0 0; font-size: 11px; color: var(--vk-soft-8a8a94, #8a8a94); }
.vkSpace-over{ color: var(--vk-err, #b3261e); font-weight: 600; }

/* ---------------------------------------------------------------- Web remota, a window of its own (2026-09-30)
 *
 * His words: "me puedes poner todo lo de la web remota y el correo remoto en un modal aparte, de una manera intuitiva y limpia? que sea usable".
 * Markup: modals/modal_template/modal_remote.php; behaviour: the second script above. It sits inside the old .modalcommon like Ajustes del sistema
 * does, whose rules float and size every label and input - hence #vkRemote on everything. The dot, the address and the state colours are shared with the row in
 * Ajustes (.vkRem-remote).
 *
 * Since 2026-10-01 the window is a PROCESS, not a set of tabs (his words: "This modal should be showing a process instead of a simple looklike are just some buttons
 * that you do not know where to push first"), and since 2026-10-02 a STEP-BY-STEP FORM (his words: "what if it would be a step by step form? in option per time in 3 or four
 * steps"): the remote's line, four dots (green with a tick when done, the accent for the one he is on, grey for the ones to come), ONE screen at a time - step 1 carries the
 * colour of the web's state, step 2 the list of what goes out as checkboxes, step 3 the summary, step 4 the five phases of a Publicar as chips - and Recoger at the foot. The
 * gear in the head shows the settings view - "Volver" and the two tabs Conexión and Correo - in place of the process: #vkRemote[data-tab] is "status" (the process), "conn"
 * or "mail"; #vkRemote[data-step] is the screen.
 */
.vkRem-dot{ width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--vk-faint-a4a3ae, #a4a3ae); }
.vkRem-remote.is-up .vkRem-dot, .vkRem-pill.is-up .vkRem-dot{ background: #1d7a3e; }
.vkRem-remote.is-down .vkRem-dot, .vkRem-pill.is-down .vkRem-dot{ background: #b3261e; }
.vkRem-remote.is-busy .vkRem-dot, .vkRem-pill.is-busy .vkRem-dot{ background: #e09a1a; animation: vkRemPulse 1.4s ease-in-out infinite; }
@keyframes vkRemPulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: .35; } }
@media (prefers-reduced-motion: reduce){ .vkRem-remote.is-busy .vkRem-dot, .vkRem-pill.is-busy .vkRem-dot{ animation: none; } }
.vkRem-remote.is-down strong{ color: var(--vk-err, #b3261e); }
.vkRem-url{ font-weight: 500; color: var(--vk-soft-6b6a76, #6b6a76); word-break: break-all; }

#vkRemote .modal-dialog{ width: min(820px, calc(100vw - 32px)); max-width: none; }
/* the window scrolls on its own, also when the page has lost Bootstrap's modal-open - a second window closing takes it off the body, and the window then
   stood still while the wheel moved the page behind (his "no tiene scroll y no puedo seleccionar", step 2, 2026-10-07); at its ends the wheel stops there */
#vkRemote.in{ overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
#vkRemote .modal-content{ padding: 32px 36px 30px; font-family: 'Montserrat', sans-serif; color: var(--vk-text, #16161a); text-align: left; }
#vkRemote .vkRem-head{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 6px; }
#vkRemote h1{ float: none; margin: 0; font-size: 24px; font-weight: 700; }
#vkRemote .vkRem-pill{ display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px 0 10px; border-radius: 13px; background: var(--vk-field-f3f2f6, #f3f2f6); font-size: 12px; font-weight: 600; color: var(--vk-soft-3b3a46, #3b3a46); }
#vkRemote .vkRem-pill.is-up{ background: var(--vk-ok-tint, #e6f4ea); color: var(--vk-ok, #1d7a3e); }
#vkRemote .vkRem-pill.is-down{ background: var(--vk-err-tint-fdeceb, #fdeceb); color: var(--vk-err, #b3261e); }
#vkRemote .vkRem-pill.is-busy{ background: var(--vk-warn-tint, #fff6e5); color: var(--vk-warn-7a4d00, #7a4d00); }
#vkRemote[data-tab="status"] .vkRem-pill{ display: none; }                      /* the process says it in full, on its own line */
#vkRemote .vkRem-gear{
    margin-left: auto; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 50%; background: var(--vk-surface, #ffffff); color: var(--vk-soft-3b3a46, #3b3a46); cursor: pointer;
}
#vkRemote .vkRem-gear .fa{ font-size: 17px; line-height: 1; }
#vkRemote .vkRem-gear:hover{ background: var(--vk-inv, #16161a); border-color: var(--vk-text, #16161a); color: #ffffff; }
#vkRemote .vkRem-gear:focus-visible, #vkRemote .vkRem-back:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
#vkRemote:not([data-tab="status"]) .vkRem-gear{ display: none; }                   /* in the settings view "Volver" is the way out */

/* the settings view: "Volver", then its two tabs; the process is hidden meanwhile */
#vkRemote .vkRem-setbar{ display: none; flex-direction: column; gap: 4px; margin: 0 0 4px; }
#vkRemote:not([data-tab="status"]) .vkRem-setbar{ display: flex; }
#vkRemote .vkRem-back{ align-self: flex-start; padding: 6px 0; border: 0; background: none; font: 600 13px 'Montserrat', sans-serif; color: var(--vk-violet-4f1697, #4f1697); cursor: pointer; }
#vkRemote .vkRem-back:hover{ text-decoration: underline; }

#vkRemote .vkRem-tabs{ display: flex; gap: 2px; margin: 0 0 24px; border-bottom: 1px solid var(--vk-line, #e4e3ea); overflow-x: auto; }
#vkRemote .vkRem-tab{
    flex: 0 0 auto; margin: 0 0 -1px; padding: 12px 18px; border: 0; border-bottom: 3px solid transparent; background: none;
    font: 600 13.5px 'Montserrat', sans-serif; color: var(--vk-soft-6b6a76, #6b6a76); cursor: pointer;
}
#vkRemote .vkRem-tab:hover{ color: var(--vk-text, #16161a); }
#vkRemote .vkRem-tab.is-on{ color: var(--vk-text, #16161a); border-bottom-color: var(--vk-link, #0f52ff); }
#vkRemote .vkRem-tab.is-dirty::after{ content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: #e09a1a; vertical-align: middle; }
#vkRemote .vkRem-tab:focus-visible, #vkRemote .vkRem-btn:focus-visible, #vkRemote .vkRem-link:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
#vkRemote .vkRem-pane{ display: flex; flex-direction: column; gap: 22px; min-width: 0; }
#vkRemote .vkRem-pane[hidden]{ display: none; }
#vkRemote .vkRem-process{ gap: 14px; }

/* the first tab: the state, then the three actions */
#vkRemote .vkRem-statusBox{ display: flex; flex-direction: column; gap: 12px; }
#vkRemote .vkRem-status{ padding: 10px 16px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 14px; background: var(--vk-raised, #fbfafd); font-size: 13px; line-height: 1.5; color: var(--vk-soft-3b3a46, #3b3a46); }
#vkRemote .vkRem-status.is-up{ border-color: var(--vk-ok-line, #cfe8d6); background: var(--vk-ok-tint-f6fbf7, #f6fbf7); }
#vkRemote .vkRem-status.is-down{ border-color: var(--vk-err-line, #f1c9c5); background: var(--vk-err-tint-fef8f7, #fef8f7); }
#vkRemote .vkRem-status.is-busy{ border-color: var(--vk-warn-line, #f1d9a6); background: var(--vk-warn-tint-fffaf0, #fffaf0); }
#vkRemote .vkRem-stopBtn{ margin-top: 2px; align-self: flex-start; }
#vkRemote .vkRem-pubPrivate{ margin: 4px 0 2px; padding: 8px 12px; border-radius: 10px; background: var(--vk-err-tint-fdeceb, #fdeceb); border: 1px solid var(--vk-err-line, #f1c9c5); font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--vk-err, #b3261e); }
#vkRemote [hidden]{ display: none !important; }
#vkRemote .vkRem-status p{ float: none; margin: 0 0 4px; }
#vkRemote .vkRem-remote{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--vk-text, #16161a); }
#vkRemote .vkRem-remote .vkRem-url{ font-size: 13px; }
#vkRemote .vkRem-remote .vkRem-checkBtn{ margin-left: auto; }
#vkRemote .vkRem-detail{ color: var(--vk-soft, #5f5e6b); }
#vkRemote .vkRem-when{ font-size: 11.5px; color: var(--vk-soft-8a8994, #8a8994); }
#vkRemote .vkRem-more{ margin-top: 8px; font-size: 12.5px; color: var(--vk-soft, #5f5e6b); }
#vkRemote .vkRem-more summary{ font-weight: 600; color: var(--vk-violet-4f1697, #4f1697); cursor: pointer; }
#vkRemote .vkRem-more p{ margin: 6px 0 0; }
#vkRemote .vkRem-half{ padding: 12px 14px; border-radius: 12px; background: var(--vk-warn-tint, #fff6e5); border: 1px solid var(--vk-warn-line, #f1d9a6); font-size: 12.5px; line-height: 1.5; color: var(--vk-warn-4a3200, #4a3200); }
#vkRemote .vkRem-half ul{ list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#vkRemote .vkRem-half li{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
#vkRemote .vkRem-small, #vkRemote .vkRem-continue{
    height: 32px; padding: 0 14px; border: 1px solid var(--vk-text, #16161a); border-radius: 8px; background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    font: 600 12px 'Montserrat', sans-serif; cursor: pointer;
}
#vkRemote .vkRem-small:hover, #vkRemote .vkRem-continue:hover{ background: var(--vk-inv, #16161a); color: #ffffff; }
#vkRemote .vkRem-small:disabled{ opacity: .6; cursor: progress; }

/* THE DOTS: 1 Tu web al día, 2 Qué sale, 3 Confirma, 4 Publicando. data-dot: done (green, a tick), now (the accent), grey (passed with the web's state not known), later (grey).
   A line joins each dot to the next, green after one that is done. */
#vkRemote .vkRem-dots{ list-style: none; display: flex; align-items: center; margin: 2px 0 4px; padding: 0; }
#vkRemote .vkRem-dots > li{ display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--vk-soft-8a8994, #8a8994); white-space: nowrap; }
#vkRemote .vkRem-dots > li + li::before{ content: ''; flex: 0 0 auto; width: 26px; height: 2px; margin: 0 10px; border-radius: 1px; background: var(--vk-fieldh-e4e3ea, #e4e3ea); }
#vkRemote .vkRem-dots > li[data-dot="done"] + li::before{ background: #1d7a3e; }
#vkRemote .vkRem-dotBadge{
    width: 26px; height: 26px; flex: 0 0 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--vk-fieldh-e9e8ef, #e9e8ef); color: var(--vk-soft-6b6a76, #6b6a76); font: 700 12px 'Montserrat', sans-serif;
}
#vkRemote .vkRem-dotTick{ display: none; font-size: 12px; }
#vkRemote .vkRem-dots > li[data-dot="now"]{ color: var(--vk-text, #16161a); }
#vkRemote .vkRem-dots > li[data-dot="now"] .vkRem-dotBadge{ background: #0f52ff; color: #ffffff; }
#vkRemote .vkRem-dots > li[data-dot="done"]{ color: var(--vk-ok, #1d7a3e); }
#vkRemote .vkRem-dots > li[data-dot="done"] .vkRem-dotBadge{ background: #1d7a3e; color: #ffffff; }
#vkRemote .vkRem-dots > li[data-dot="grey"] .vkRem-dotBadge{ background: var(--vk-faint-a4a3ae, #a4a3ae); color: #ffffff; }
#vkRemote .vkRem-dots > li[data-dot="done"] .vkRem-dotNum, #vkRemote .vkRem-dots > li[data-dot="grey"] .vkRem-dotNum{ display: none; }
#vkRemote .vkRem-dots > li[data-dot="done"] .vkRem-dotTick, #vkRemote .vkRem-dots > li[data-dot="grey"] .vkRem-dotTick{ display: inline-block; }

/* ONE SCREEN AT A TIME. Step 1 takes the colour of the web's state (data-state: green, orange, grey, busy); the others are plain cards. */
#vkRemote .vkRem-wiz{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; margin: 0; padding: 18px 22px 20px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 14px; background: var(--vk-surface, #ffffff); }
#vkRemote .vkRem-wiz > *{ max-width: 100%; }
#vkRemote .vkRem-wizTitle{ margin: 0; font-size: 18px; line-height: 1.3; outline: 0; }
#vkRemote .vkRem-wizTitle:focus, #vkRemote .vkRem-wizTitle:focus-visible{ outline: none; }   /* the title takes the focus on each step for screen readers only: it is not a control, so no ring */
#vkRemote .vkRem-wiz[data-state="green"]{ border-color: var(--vk-ok-line, #cfe8d6); background: var(--vk-ok-tint-f6fbf7, #f6fbf7); }
#vkRemote .vkRem-wiz[data-state="orange"], #vkRemote .vkRem-wiz[data-state="busy"]{ border-color: var(--vk-warn-line, #f1d9a6); background: var(--vk-warn-tint-fffaf0, #fffaf0); }
#vkRemote .vkRem-wiz[data-state="grey"]{ background: var(--vk-raised, #fbfafd); }
#vkRemote .vkRem-wiz .vkRem-line{ margin: 0; font-size: 12px; }
#vkRemote .vkRem-wiz .vkRem-prog{ width: 100%; }
#vkRemote .vkRem-step1Body{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
#vkRemote .vkRem-step1Body:empty{ display: none; }
#vkRemote .vkRem-stepText{ margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--vk-soft-3b3a46, #3b3a46); }
#vkRemote .vkRem-stepText.is-sub{ font-size: 12px; color: var(--vk-soft-6b6a76, #6b6a76); }
#vkRemote .vkRem-stepAct{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
#vkRemote .vkRem-stepAct .vkRem-link{ font-size: 12.5px; }
#vkRemote .vkRem-wiz[data-state="green"] .vkRem-stepText{ font-weight: 600; color: var(--vk-ok, #1d7a3e); }
/* "Atrás" on the left, the way on on the right; a hint beside "Siguiente" sits on the left */
#vkRemote .vkRem-nav{ position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; width: 100%; margin-top: 4px; padding: 14px 0 2px; border-top: 1px solid var(--vk-line-soft, #efeef4); background: inherit; justify-content: flex-end; }
#vkRemote .vkRem-nav .vkRem-backBtn{ margin-right: auto; }
#vkRemote .vkRem-stick{ position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; width: 100%; padding-top: 10px; background: inherit; }
#vkRemote .vkRem-stick .vkRem-nav{ position: static; margin-top: 0; }
#vkRemote .vkRem-nav .vkRem-gate{ order: -1; margin-right: auto; }
#vkRemote .vkRem-nav .vkRem-btn{ min-width: 150px; }
#vkRemote .vkRem-lead{ margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--vk-soft-3b3a46, #3b3a46); }
#vkRemote a.vkRem-btn{ display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
#vkRemote .vkRem-after{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
#vkRemote .vkRem-after .vkRem-btn{ min-width: 190px; }

/* step 2: a box per hub that is on the web or has a web of its own - the hub's own tick (its switch «En la web»), then ALL its top sections as ticks (two columns) - and the persons with a link. An unticked hub greys its sections, unless it has a web of its own. */
#vkRemote .vkRem-choices{ width: 100%; display: flex; flex-direction: column; gap: 10px; }
#vkRemote .vkRem-hub{ padding: 10px 14px 12px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; background: var(--vk-raised-fcfcfe, #fcfcfe); }
#vkRemote .vkRem-hub.is-off{ background: var(--vk-field-f6f5f9, #f6f5f9); }
#vkRemote .vkRem-hub.is-locked .vkRem-secs{ opacity: .45; }
#vkRemote .vkRem-pick{ display: flex; align-items: flex-start; gap: 10px; float: none; width: auto; margin: 0; padding: 3px 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--vk-text, #16161a); text-align: left; cursor: pointer; }
#vkRemote .vkRem-pick input{ width: 16px; height: 16px; flex: 0 0 16px; margin: 2px 0 0; transform: none; accent-color: var(--vk-violet, #6e1fd1); cursor: pointer; }
#vkRemote .vkRem-pickText{ min-width: 0; }
#vkRemote .vkRem-pick input:disabled{ cursor: not-allowed; }
#vkRemote .vkRem-hubPick{ font-size: 14px; font-weight: 700; }
#vkRemote .vkRem-pickMeta{ margin-left: 8px; font-size: 11.5px; font-weight: 500; color: var(--vk-soft-8a8994, #8a8994); }
#vkRemote .vkRem-secs .vkRem-pickMeta{ display: block; margin: 0; }                                  /* a section's or a person's own line under its name */
#vkRemote .vkRem-secs{ list-style: none; margin: 4px 0 0 7px; padding: 0 0 0 16px; border-left: 2px solid var(--vk-line, #e4e3ea); columns: 2 250px; column-gap: 26px; }
#vkRemote .vkRem-secRow{ break-inside: avoid; margin: 0; padding: 0; }
#vkRemote .vkRem-pickNote{ display: block; margin: -1px 0 4px 26px; font-size: 11.5px; font-weight: 600; color: var(--vk-warn, #9a6100); }
#vkRemote .vkRem-pickNone{ margin: 4px 0 0 7px; font-size: 12px; color: var(--vk-soft-8a8994, #8a8994); }
#vkRemote .vkRem-groupHead{ margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--vk-text, #16161a); }
#vkRemote .vkRem-persons{ width: 100%; padding: 10px 14px 12px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; background: var(--vk-raised-fcfcfe, #fcfcfe); }
#vkRemote .vkRem-persons .vkRem-secs{ columns: 1; border-left: 0; margin-left: 0; padding-left: 0; }
#vkRemote .vkRem-persons .vkRem-note{ margin: 6px 0 0; }
#vkRemote .vkRem-others .vkRem-groupHead{ margin-bottom: 0; }
#vkRemote .vkRem-live{ width: 100%; margin: 0; padding: 9px 14px; border-radius: 10px; background: var(--vk-field-f3f2f6, #f3f2f6); font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--vk-text, #16161a); }
#vkRemote .vkRem-liveSub{ display: block; font-weight: 500; color: var(--vk-soft, #5f5e6b); }

/* step 3: one plain summary, what step 2 changed, the red line when persons go */
#vkRemote .vkRem-summary{ margin: 0; font-size: 15px; font-weight: 700; line-height: 1.55; color: var(--vk-text, #16161a); }
#vkRemote .vkRem-changesBox{ width: 100%; padding: 10px 14px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; background: var(--vk-raised, #fbfafd); }
#vkRemote .vkRem-changesHead{ margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--vk-soft, #5f5e6b); }
#vkRemote .vkRem-changes{ list-style: none; margin: 0; padding: 0; }
#vkRemote .vkRem-changes li{ margin: 0; padding: 1px 0; font-size: 13px; line-height: 1.5; color: var(--vk-text, #16161a); }
#vkRemote .vkRem-changes li::before{ content: '\f105'; margin-right: 8px; font: normal 13px/1 FontAwesome; color: var(--vk-faint-b8b7c2, #b8b7c2); }
#vkRemote .vkRem-changes li.is-none, #vkRemote .vkRem-changes li.is-note{ color: var(--vk-soft-8a8994, #8a8994); }
#vkRemote .vkRem-changes li.is-none::before, #vkRemote .vkRem-changes li.is-note::before{ content: none; }

/* step 3 and 4: the gate, and the five phases of a Publicar as chips joined by chevrons */
#vkRemote .vkRem-gate, #vkRemote .vkRem-gate3{ margin: 0; font-size: 12.5px; font-weight: 600; color: var(--vk-warn, #9a6100); }
#vkRemote .vkRem-pipe{ list-style: none; margin: 2px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 20px; }
#vkRemote .vkRem-pipe > li{
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 34px; margin: 0; padding: 4px 8px; border-radius: 17px;
    background: var(--vk-field-f3f2f6, #f3f2f6); color: var(--vk-soft, #5f5e6b); font-size: 11.5px; font-weight: 600; line-height: 1.25; text-align: center;
}
#vkRemote .vkRem-pipe > li + li::before{
    content: '\f105'; position: absolute; left: -14px; top: 50%; width: 8px; margin-top: -8px; font: normal 16px/16px FontAwesome; color: var(--vk-faint-b8b7c2, #b8b7c2); text-align: center;
}
#vkRemote .vkRem-pipe > li.is-done{ background: var(--vk-ok-tint, #e6f4ea); color: var(--vk-ok, #1d7a3e); }
#vkRemote .vkRem-pipe > li.is-done::after{ content: '\f00c'; margin-left: 6px; font: normal 11px/1 FontAwesome; }
#vkRemote .vkRem-pipe > li.is-now{ background: #0f52ff; color: #ffffff; }
#vkRemote .vkRem-note{ margin: 0; font-size: 12px; line-height: 1.5; color: var(--vk-soft-8a8994, #8a8994); }

/* the foot: Recoger, apart from the process */
#vkRemote .vkRem-foot{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 4px 0; border-top: 1px solid var(--vk-line-soft, #efeef4); }
#vkRemote .vkRem-footRow{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--vk-soft, #5f5e6b); }
#vkRemote .vkRem-footRow .vkRem-link{ font-size: 13px; }
#vkRemote .vkRem-foot .vkRem-line{ margin: 0; font-size: 12px; }
#vkRemote .vkRem-foot .vkRem-prog{ width: 100%; }

/* buttons, helps and lines */
#vkRemote .vkRem-btn{
    height: 44px; padding: 0 20px; 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;
}
#vkRemote .vkRem-btn:hover{ background: var(--vk-inv, #16161a); color: #ffffff; }
#vkRemote .vkRem-btn.is-main{ background: #0f52ff; border-color: #0f52ff; color: #ffffff; }
#vkRemote .vkRem-btn.is-main:hover{ background: #0b3fd0; border-color: #0b3fd0; }
#vkRemote .vkRem-btn:disabled{ opacity: .55; cursor: not-allowed; }
#vkRemote .vkRem-btn[data-busy]:disabled{ cursor: progress; }
#vkRemote .vkRem-link{ padding: 0; border: 0; background: none; font: 600 12px 'Montserrat', sans-serif; color: var(--vk-violet-4f1697, #4f1697); cursor: pointer; }
#vkRemote .vkRem-link:hover{ text-decoration: underline; }
#vkRemote .vkRem-link:disabled{ opacity: .5; cursor: not-allowed; text-decoration: none; }
#vkRemote .vkRem-help{ display: block; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--vk-soft-6b6a76, #6b6a76); }
#vkRemote .vkRem-line{ margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--vk-soft, #5f5e6b); }
#vkRemote .vkRem-line:empty{ display: none; }
#vkRemote .vkRem-line.is-ok{ color: var(--vk-ok, #1d7a3e); }
#vkRemote .vkRem-line.is-bad{ color: var(--vk-err, #b3261e); font-weight: 600; }
#vkRemote .vkRem-line.is-warn{ color: var(--vk-warn, #9a6100); font-weight: 600; }

/* the bar of the action that runs (2026-09-30, view/js/vk_settings.js): what it is doing in words, a bar filled by the bytes (or the files) done, and the numbers.
   A phase that cannot be measured (looking at the folder, unpacking on the server, the data) has no width of its own: the bar only moves. */
#vkRemote .vkRem-prog{ margin: 8px 0 2px; }
#vkRemote .vkRem-prog[hidden]{ display: none; }
#vkRemote .vkRem-progWords{ margin: 0 0 7px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--vk-text, #16161a); }
#vkRemote .vkRem-progBar{ height: 8px; border-radius: 4px; background: var(--vk-fieldh-e9e8ef, #e9e8ef); overflow: hidden; }
#vkRemote .vkRem-progBar > span{ display: block; height: 100%; width: 0; border-radius: 4px; background: #0f52ff; transition: width .5s ease; }
#vkRemote .vkRem-progBar.is-moving > span{ width: 34%; transition: none; animation: vkRemSlide 1.3s ease-in-out infinite; }
@keyframes vkRemSlide{ 0%{ margin-left: -34%; } 100%{ margin-left: 100%; } }
#vkRemote .vkRem-progNums{ margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--vk-soft, #5f5e6b); font-variant-numeric: tabular-nums; }
#vkRemote .vkRem-progNums:empty{ display: none; }
@media (prefers-reduced-motion: reduce){
    #vkRemote .vkRem-progBar.is-moving > span{ animation: none; width: 100%; opacity: .5; }
}
#vkRemote .vkRem-checkSay{ margin: -8px 0 0; }
#vkRemote .vkRem-muted{ color: var(--vk-soft-8a8994, #8a8994); }

/* Conexión and Correo: groups of fields, one help line under each */
#vkRemote .vkRem-group{ display: flex; flex-direction: column; gap: 12px; }
#vkRemote .vkRem-group + .vkRem-group{ padding-top: 22px; border-top: 1px solid var(--vk-line-soft, #efeef4); }
#vkRemote h2{ float: none; margin: 0; font-size: 16px; font-weight: 700; color: var(--vk-text, #16161a); }
#vkRemote .vkRem-note{ margin: -4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--vk-soft, #5f5e6b); }
#vkRemote .vkRem-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
#vkRemote .vkRem-field{ min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#vkRemote .vkRem-field.is-wide{ grid-column: 1 / -1; }
#vkRemote .vkRem-field > label{ float: none; width: auto; margin: 0; font-size: 13px; font-weight: 600; color: var(--vk-text, #16161a); }
#vkRemote .vkRem-field .vkRem-help{ font-size: 11.5px; }
#vkRemote input[type="text"], #vkRemote input[type="email"], #vkRemote input[type="password"], #vkRemote select{
    float: none; width: 100%; height: 42px; margin: 0; padding: 0 12px; 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: 13.5px; box-shadow: none;
}
#vkRemote input:focus, #vkRemote select:focus{ border-color: var(--vk-violet, #6e1fd1); outline: 0; }
#vkRemote input:disabled, #vkRemote select:disabled{ background: var(--vk-field-f3f2f6, #f3f2f6); color: var(--vk-soft-6b6a76, #6b6a76); cursor: not-allowed; }
#vkRemote .vkRem-field > label.vkRem-check{
    display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 12.5px; font-weight: 500; color: var(--vk-soft, #5f5e6b); text-align: left; cursor: pointer;
}
#vkRemote .vkRem-check input{ width: 16px; height: 16px; margin: 0; transform: none; accent-color: var(--vk-violet, #6e1fd1); flex: 0 0 16px; }   /* style.css scales every checkbox */
#vkRemote .vkRem-field > label.vkRem-plain{ color: var(--vk-err, #b3261e); font-weight: 600; }

/* a password: never on the page - "Guardada ✓ · Cambiar · Borrar", or the box */
#vkRemote .vkRem-pass{ display: flex; flex-direction: column; min-height: 42px; justify-content: center; }
#vkRemote .vkRem-passSaved, #vkRemote .vkRem-passForget{ display: none; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-height: 42px; font-size: 13px; color: var(--vk-soft, #5f5e6b); }
#vkRemote .vkRem-ok{ font-weight: 700; color: var(--vk-ok, #1d7a3e); }
#vkRemote .vkRem-pass.is-saved:not(.is-changing):not(.is-forget) .vkRem-passSaved{ display: flex; }
#vkRemote .vkRem-pass.is-forget .vkRem-passForget{ display: flex; }
#vkRemote .vkRem-passEdit{ display: flex; align-items: center; gap: 12px; }
#vkRemote .vkRem-pass.is-saved:not(.is-changing) .vkRem-passEdit{ display: none; }
#vkRemote .vkRem-pass.is-forget .vkRem-passEdit{ display: none; }
#vkRemote .vkRem-pass:not(.is-saved) [data-vkrem-pass="cancel"]{ display: none; }
#vkRemote .vkRem-forgetBox{ display: none; }

/* the buttons of a tab, and what a test found */
#vkRemote .vkRem-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
#vkRemote .vkRem-row .vkRem-saveSay{ flex: 1 1 220px; margin: 0; }
#vkRemote .vkRem-mailTo{ flex: 1 1 260px; width: auto; min-width: 0; }
#vkRemote .vkRem-adv{ margin-top: -2px; }
#vkRemote .vkRem-adv summary{ font-size: 12.5px; font-weight: 600; color: var(--vk-violet-4f1697, #4f1697); cursor: pointer; margin-bottom: 12px; }
#vkRemote .vkRem-certBtn{ height: 36px; margin-top: 10px; padding: 0 16px; font-size: 12.5px; }
#vkRemote .vkRem-hint{ margin: -8px 0 0; font-size: 12px; line-height: 1.5; color: var(--vk-soft-8a8994, #8a8994); }
#vkRemote .vkRem-pending{ margin: 0; padding: 10px 14px; border: 1px solid var(--vk-warn-line, #f1d9a6); border-radius: 10px; background: var(--vk-warn-tint, #fff6e5); font-size: 12.5px; line-height: 1.5; color: var(--vk-warn-4a3200, #4a3200); }
#vkRemote .vkRem-pending[hidden], #vkRemote .vkRem-why[hidden], #vkRemote .vkRem-result[hidden]{ display: none; }
#vkRemote .vkRem-why{ margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--vk-warn, #9a6100); font-weight: 600; }
#vkRemote .vkRem-testBox{ margin-top: 4px; padding-top: 22px; border-top: 1px solid var(--vk-line-soft, #efeef4); }
#vkRemote .vkRem-result{ display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; font-size: 13px; line-height: 1.5; }
#vkRemote .vkRem-result.is-ok{ border-color: var(--vk-ok-line, #cfe8d6); background: var(--vk-ok-tint-f3faf5, #f3faf5); color: var(--vk-ok-14532d, #14532d); }
#vkRemote .vkRem-result.is-warn{ border-color: var(--vk-warn-line, #f1d9a6); background: var(--vk-warn-tint, #fff6e5); color: var(--vk-warn-5b3b00, #5b3b00); }
#vkRemote .vkRem-result.is-bad{ border-color: var(--vk-err-line, #f1c9c5); background: var(--vk-err-tint-fef4f3, #fef4f3); color: var(--vk-err-8a1b14, #8a1b14); }
#vkRemote .vkRem-mark{ flex: 0 0 22px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #6b6a76; color: #ffffff; font-size: 12px; font-weight: 700; }
#vkRemote .vkRem-result.is-ok .vkRem-mark{ background: #1d7a3e; }
#vkRemote .vkRem-result.is-warn .vkRem-mark{ background: #d98e04; }
#vkRemote .vkRem-result.is-bad .vkRem-mark{ background: #b3261e; }
#vkRemote .vkRem-resultBody{ min-width: 0; flex: 1 1 auto; }
#vkRemote .vkRem-result p{ float: none; margin: 0; word-break: break-word; }
#vkRemote .vkRem-log{ margin-top: 8px; }
#vkRemote .vkRem-log summary{ font-size: 12px; font-weight: 600; color: var(--vk-violet-4f1697, #4f1697); cursor: pointer; }
#vkRemote .vkRem-log pre{
    max-height: 220px; overflow: auto; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px;
    background: var(--vk-inv, #16161a); color: #e9e8f0; font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-all;
}

/* RECOGER'S REVIEW (brief J, 2026-10-02; core/vk/review.php): the notice above the dots - what persons added and nobody has taken -, the review view (by person, each thing with a tick:
   ticked is taken, unticked is refused) and, in the foot, what entered (a link each) and what was refused. #vkRemote[data-tab="review"] is the view in place of the process, like the
   settings one: its «Volver» is the same bar, without the two tabs. */
#vkRemote .vkRem-wait{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; border: 1px solid var(--vk-warn-line, #f1d9a6); border-radius: 12px; background: var(--vk-warn-tint-fffaf0, #fffaf0); font-size: 13px; font-weight: 600; color: var(--vk-warn-4a3200, #4a3200); }
#vkRemote .vkRem-waitDot{ width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #e09a1a; }
#vkRemote .vkRem-waitText{ flex: 1 1 auto; min-width: 0; }
#vkRemote .vkRem-waitBtn{ min-width: 0; height: 32px; padding: 0 14px; font-size: 12px; }
#vkRemote[data-tab="review"] .vkRem-tabs{ display: none; }
#vkRemote .vkRem-review{ gap: 12px; }
#vkRemote .vkRem-revList{ display: flex; flex-direction: column; gap: 12px; }
#vkRemote .vkRem-revPerson{ padding: 10px 14px 12px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; background: var(--vk-raised-fcfcfe, #fcfcfe); }
#vkRemote .vkRem-revHead{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--vk-text, #16161a); }
#vkRemote .vkRem-revHead small{ font-size: 11.5px; font-weight: 500; color: var(--vk-soft-8a8994, #8a8994); }
#vkRemote .vkRem-revItems{ list-style: none; margin: 0; padding: 0; }
#vkRemote .vkRem-revItem{ margin: 0; padding: 0; border-top: 1px solid var(--vk-line-soft, #efeef4); }
#vkRemote .vkRem-revItem:first-child{ border-top: 0; }
#vkRemote .vkRem-revItem label{ display: flex; align-items: flex-start; gap: 10px; float: none; width: 100%; margin: 0; padding: 7px 0; text-align: left; cursor: pointer; }
#vkRemote .vkRem-revItem input{ width: 16px; height: 16px; flex: 0 0 16px; margin: 3px 0 0; transform: none; accent-color: var(--vk-violet, #6e1fd1); cursor: pointer; }
#vkRemote .vkRem-revText{ display: block; min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--vk-text, #16161a); overflow-wrap: anywhere; }
#vkRemote .vkRem-revText b{ font-weight: 700; }
#vkRemote .vkRem-revMeta{ display: block; font-size: 11.5px; font-weight: 500; color: var(--vk-soft-8a8994, #8a8994); }
#vkRemote .vkRem-revWarn{ display: block; margin-top: 1px; font-size: 11.5px; font-weight: 700; color: var(--vk-err, #b3261e); }
/* what a change of a hub's colours and links would change (brief W): one sentence a line, quieter than the line it belongs to */
#vkRemote .vkRem-revChanges{ display: block; margin: 3px 0 2px; }
#vkRemote .vkRem-revChange{ position: relative; display: block; padding-left: 13px; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--vk-soft-3b3a46, #3b3a46); }
#vkRemote .vkRem-revChange::before{ content: ''; position: absolute; left: 3px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--vk-faint, #9a99a6); }
#vkRemote .vkRem-revItem.is-off .vkRem-revText{ color: var(--vk-soft-8a8994, #8a8994); text-decoration: line-through; text-decoration-color: var(--vk-faint-c9c8d2, #c9c8d2); }
#vkRemote .vkRem-revNone{ margin: 0; padding: 10px 2px; font-size: 13px; color: var(--vk-soft, #5f5e6b); }
#vkRemote .vkRem-recAfter{ width: 100%; padding: 10px 14px 12px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; background: var(--vk-raised-fcfcfe, #fcfcfe); }
#vkRemote .vkRem-recHead{ margin: 8px 0 3px; font-size: 12px; font-weight: 700; color: var(--vk-soft, #5f5e6b); }
#vkRemote .vkRem-recHead:first-child{ margin-top: 0; }
#vkRemote .vkRem-recList{ list-style: none; margin: 0; padding: 0; }
#vkRemote .vkRem-recList li{ margin: 0; padding: 2px 0; font-size: 13px; line-height: 1.45; color: var(--vk-text, #16161a); overflow-wrap: anywhere; }
#vkRemote .vkRem-recList li::before{ content: '\f105'; margin-right: 8px; font: normal 13px/1 FontAwesome; color: var(--vk-faint-b8b7c2, #b8b7c2); }
#vkRemote .vkRem-recList a{ font-weight: 700; color: var(--vk-violet-4f1697, #4f1697); text-decoration: none; }
#vkRemote .vkRem-recList a:hover{ text-decoration: underline; }
#vkRemote .vkRem-recList .vkRem-recWho{ color: var(--vk-soft-8a8994, #8a8994); font-size: 12px; }
#vkRemote .vkRem-recOut li{ color: var(--vk-soft, #5f5e6b); }

@media (max-width: 640px){
    #vkRemote .modal-content{ padding: 24px 16px 20px; }
    #vkRemote h1{ font-size: 22px; }
    #vkRemote .vkRem-grid{ grid-template-columns: minmax(0, 1fr); }
    #vkRemote .vkRem-wiz{ padding: 14px; }
    #vkRemote .vkRem-dots{ justify-content: center; }
    #vkRemote .vkRem-dots > li + li::before{ width: 34px; margin: 0 8px; }
    #vkRemote .vkRem-dots .vkRem-dotWord{ display: none; }                                  /* the step's own title says where he is */
    #vkRemote .vkRem-nav .vkRem-btn{ flex: 1 1 100%; }
    #vkRemote .vkRem-nav .vkRem-backBtn{ margin-right: 0; order: 2; }
    #vkRemote .vkRem-secs{ columns: 1; }
    #vkRemote .vkRem-pipe{ grid-template-columns: minmax(0, 1fr); gap: 16px 0; }
    #vkRemote .vkRem-pipe > li + li::before{ content: '\f107'; left: 50%; top: -9px; margin: -8px 0 0 -4px; }
    #vkRemote .vkRem-stepAct .vkRem-btn{ width: 100%; }
    #vkRemote .vkRem-tab{ padding: 12px 14px; }
    #vkRemote .vkRem-row .vkRem-btn{ flex: 1 1 100%; }
    #vkRemote .vkRem-remote .vkRem-checkBtn{ margin-left: 0; }
    #vkRemote .vkRem-checkSay{ margin-top: -8px; }
}

/* ---------------------------------------------------------------- «Publicar cambios», the button in the header (2026-10-02, brief G)
 *
 * Markup: inc/header.php (a span with the button inside, after the logo); behaviour: view/js/vk_pubbtn.js, which lights it. Drawn greyed and disabled; lit (data-state="lit") it is the
 * accent and opens the window of the Web remota. Under 1126 px the white header is gone - the right-hand bar runs across the top and the header is the small blue corner at its end -
 * so there it is the icon alone, white on that blue. The title sits on the span as well: a disabled button shows none of its own.
 */
header .secondline .vkPubBtnWrap{ float: right; display: inline-block; margin: 20px 10px 0 0; line-height: 0; }   /* on the right, left of the bell (2026-10-02 night, his drawing; inc/header.php) */
header .secondline .vkPubBtn{
    float: none; width: auto;                                     /* style.css gives every button of the header a 67 px box floated right */
    height: 40px; margin: 0; padding: 0 18px 0 16px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 20px;
    background: var(--vk-field-f3f2f6, #f3f2f6); color: var(--vk-soft-8a8995, #8a8995); font: 600 13px/1 'Montserrat', sans-serif; white-space: nowrap; cursor: default; box-shadow: none; outline: 0;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
header .secondline .vkPubBtn .fa{ font-size: 17px; line-height: 1; }
/* grey, it opens the window too (2026-10-02 night, his choice «El botón gris también abre» - view/js/vk_pubbtn.js): a hand and a slightly darker grey under the pointer */
header .secondline .vkPubBtn:not([disabled]){ cursor: pointer; }
@media (min-width: 1126px){ header .secondline .vkPubBtn:not([disabled]):not([data-state="lit"]):hover{ border-color: var(--vk-line-strong-cfcde0, #cfcde0); color: var(--vk-soft, #5f5e6b); } }   /* not on the blue corner of narrow screens */
header .secondline .vkPubBtn[data-state="lit"]{ border-color: #0f52ff; background: #0f52ff; color: #ffffff; cursor: pointer; box-shadow: 0 2px 8px rgba(var(--vk-link-rgb, 15, 82, 255), .28); }
header .secondline .vkPubBtn[data-state="lit"]:hover{ border-color: #0a3fd0; background: #0a3fd0; }
/* his own CSS, 2026-10-02 night, as he sent it */
header .secondline .vkPubBtn[data-state="lit"] {border-radius: 999px;}
/* the pill in every state (2026-10-02 night, his words: "cuando lo dejas activo los bordes redondeados se van!!"): pressed, or with the focus back from
   the window, style.css «header .secondline button:focus{ border-radius: 0 }» outweighed the button's own radius - measured 0px */
header .secondline .vkPubBtn:focus, header .secondline .vkPubBtn:active{ border-radius: 999px; }
header .secondline .vkPubBtn:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ header .secondline .vkPubBtn{ transition: none; } }
/* THE RAISED KEY (2026-10-08, his words "el boton de publicar cambios hazlo en este estilo", a picture: «Get Started Now»). Measured on his picture: a dark teal key,
 * its face from (48,66,78) at the top to (44,71,78) at the foot, a bright line along its top (83,101,113), a lighter edge at its foot (59,81,89), sitting in a
 * slightly lighter bezel with a light hairline on top, and a dark shadow under it; corners about a fifth of its height; light text (230,251,255).
 * With changes waiting («lit») it is his key exactly; with nothing to publish the same key in a neutral tone (light or dark look), so the waiting
 * changes still stand out. Wide screens only: from 1125 px down it stays the icon on the blue corner (below). */
@media (min-width: 1126px){
    header .secondline .vkPubBtn, header .secondline .vkPubBtn[data-state="lit"], header .secondline .vkPubBtn:focus, header .secondline .vkPubBtn:active{ border-radius: 9px; }   /* was the pill (his 999px, 2026-10-02) */
    header .secondline .vkPubBtn{
        border: 0; font-weight: 500; letter-spacing: .01em;
        background: linear-gradient(180deg, #fdfdfe 0%, #f1f3f6 100%); color: #6f7a86;
        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 4px #eef1f4, 0 -1px 0 4px #dfe4ea, 0 7px 12px 2px rgba(30, 45, 65, .16);
        transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    header .secondline .vkPubBtn:not([disabled]):not([data-state="lit"]):hover{ color: #3f4a55; background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%); }
    header .secondline .vkPubBtn[data-state="lit"], header .secondline .vkPubBtn[data-state="lit"]:hover{
        background: linear-gradient(180deg, #31434f 0%, #2f4550 50%, #2c474e 100%); color: #e6fbff;
        box-shadow: inset 0 1.5px 0 rgba(150, 176, 189, .5), inset 0 -1px 0 rgba(104, 146, 158, .45),
            0 0 0 1px #1c2934, 0 0 0 4px #253442, 0 -1px 0 4px #3e5161, 0 8px 14px 2px rgba(8, 12, 20, .5);
    }
    header .secondline .vkPubBtn[data-state="lit"]:hover{ background: linear-gradient(180deg, #364a57 0%, #334c57 50%, #304e55 100%); color: #ffffff; }
    /* the light look: the same key in light colours (his words, 2026-10-08: "parece que pasa a version light no esta adaptado. debes de utilizar el mismo cnceopto pero con
       colores claros") - a pale teal face, a white line on top, a light bezel with its hairline, a soft shadow, the text deep teal; with nothing to publish the neutral key above */
    html:not([data-theme="dark"]) header .secondline .vkPubBtn[data-state="lit"], html:not([data-theme="dark"]) header .secondline .vkPubBtn[data-state="lit"]:hover{
        background: linear-gradient(180deg, #f7fbfc 0%, #ebf3f5 50%, #e3eef1 100%); color: #1d4650;
        box-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .85),
            0 0 0 1px #c3d5db, 0 0 0 4px #eaf2f4, 0 -1px 0 4px #d3e1e6, 0 7px 12px 2px rgba(25, 55, 70, .18);
    }
    html:not([data-theme="dark"]) header .secondline .vkPubBtn[data-state="lit"]:hover{ background: linear-gradient(180deg, #ffffff 0%, #eff6f8 50%, #e8f1f4 100%); color: #0f3640; }
    header .secondline .vkPubBtn:not([disabled]):active{ transform: translateY(1px); }
    header .secondline .vkPubBtn[disabled]{ opacity: .6; }
    header .secondline .vkPubBtn:focus-visible{ outline-offset: 6px; }   /* clear of the bezel */
    /* further from the radar and a smaller icon (his words, 2026-10-08: "Separa un poco mas el boton publicar cambios del radar. Haz el icono del boton publicar cambios
       mas pequeño"): 10 px more to its right, the icon 17 -> 13 px */
    header .secondline .vkPubBtnWrap{ margin-right: 20px; }
    header .secondline .vkPubBtn .fa{ font-size: 13px; }
}
/* THE SELECTION'S KEYS (2026-10-08, his words "estos botones han de quedar asi (header, al apretar el checkbox)", a picture): what the header shows once files are picked -
 * move (#moveItems_head), send by e-mail, edit them all, to the trash, the download link (.shareitem_head, inc/header.php; shown and hidden by view/js/script.js) - as the raised
 * key of «Publicar cambios» with nothing to publish: the face, the line on top, the bezel with its hairline, the shadow. Measured on his picture: «move» a 52 px key with a
 * 24 px white mark, 28 px from the radar and 34 px from the others; the others 38 x 36, 14 px apart, their marks a light grey; all centred 51 px down the header (the
 * bar sits under its 10 px top edge), as «Publicar cambios»; corners 12 / 10 px. «Move» keeps its pulse (style.css .littleAnim).
 * Light colours in the light look, the same concept. Their colour was the installation's main colour, inline (style="background:..."): hence !important. The display stays
 * the script's (block / none), so nothing here can show a hidden key. Wide screens only: from 1125 px down the bar is the column on the right (style.css). */
@media (min-width: 1126px){
    header .secondline .editers_laptop .shareitem_head, header .secondline .editers_laptop #moveItems_head{
        width: 38px; height: 36px; padding: 0 !important; margin: 23px 7px 0 !important; border: 0; border-radius: 10px !important; text-align: center; text-decoration: none;
        background: linear-gradient(180deg, #fdfdfe 0%, #f1f3f6 100%) !important; color: #6f7a86 !important;
        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 4px #eef1f4, 0 -1px 0 4px #dfe4ea, 0 7px 12px 2px rgba(30, 45, 65, .16) !important;
        transition: background .15s ease, color .15s ease, transform .15s ease;
    }
    header .secondline .editers_laptop .shareitem_head i{ display: block; padding: 0 !important; font-size: 15px !important; line-height: 36px !important; color: inherit !important; }
    header .secondline .editers_laptop .shareitem_head:hover, header .secondline .editers_laptop #moveItems_head:hover{ background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%) !important; color: #3f4a55 !important; }
    header .secondline .editers_laptop .shareitem_head:active{ transform: translateY(1px); }
    header .secondline .editers_laptop a.shareitem_head:last-of-type{ margin-right: 2px !important; }
    header .secondline .editers_laptop #moveItems_head{
        width: 52px; height: 52px; margin: 15px 26px 0 14px !important; border-radius: 12px !important; color: #1f2430 !important;
    }
    header .secondline .editers_laptop #moveItems_head i{ font-size: 24px !important; line-height: 52px !important; }
    header .secondline .editers_laptop #moveItems_head:hover{ color: #000000 !important; }
    html[data-theme="dark"] header .secondline .editers_laptop .shareitem_head, html[data-theme="dark"] header .secondline .editers_laptop #moveItems_head{
        background: linear-gradient(180deg, #303139 0%, #2a2b32 100%) !important; color: #9d9ea4 !important;
        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 4px #25262c, 0 -1px 0 4px #34353d, 0 8px 14px 2px rgba(0, 0, 0, .45) !important;
    }
    html[data-theme="dark"] header .secondline .editers_laptop #moveItems_head{ color: #f1f2f6 !important; }
    html[data-theme="dark"] header .secondline .editers_laptop .shareitem_head:hover, html[data-theme="dark"] header .secondline .editers_laptop #moveItems_head:hover{
        background: linear-gradient(180deg, #34353e 0%, #2d2e36 100%) !important; color: #e2e4ec !important;
    }
    html[data-theme="dark"] header .secondline .editers_laptop #moveItems_head:hover{ color: #ffffff !important; }
}
@media (prefers-reduced-motion: reduce){ header .secondline .editers_laptop .shareitem_head{ transition: none; } header .secondline .editers_laptop .shareitem_head:active{ transform: none; } }
/* «DOWNLOAD ALL» AS A KEY (2026-10-08, his words "el boton de descarga en conjunto tambien tiene que tener el estilo de los botones!"): the floating button that downloads the
   selection (parts/category.php .massivedownload, shown and hidden by view/js/script.js - its display is left to it) was a tab out of the right edge with a 10 px white border; now
   the raised key in the installation's blue - the main action, as in the windows (view/css/vk_modalkeys.css) - standing clear of the edge. Wide screens only: the narrow view has its own. */
@media (min-width: 1126px){
    html body .massivedownload:not(.vkBarDl){
        --vk-key: var(--vk-brand, #0f52ff);
        right: 28px; bottom: 30px; width: 58px; height: 58px; padding: 0; border: 0 !important; border-radius: 14px; text-align: center;
        background: linear-gradient(180deg, color-mix(in srgb, var(--vk-key) 78%, #ffffff) 0%, var(--vk-key) 55%, color-mix(in srgb, var(--vk-key) 86%, #000000) 100%) !important;
        color: #ffffff !important;
        box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(255, 255, 255, .14),
            0 0 0 1px color-mix(in srgb, var(--vk-key) 75%, #000000), 0 0 0 4px color-mix(in srgb, var(--vk-key) 12%, #ffffff),
            0 -1px 0 4px color-mix(in srgb, var(--vk-key) 22%, #ffffff), 0 10px 18px 2px color-mix(in srgb, var(--vk-key) 28%, transparent) !important;
        transition: filter .15s ease, transform .15s ease;
    }
    html body .massivedownload:not(.vkBarDl) i{ font-size: 20px; line-height: 58px; color: inherit; }
    html[data-theme="dark"] body .massivedownload:not(.vkBarDl){
        box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(255, 255, 255, .12),
            0 0 0 1px color-mix(in srgb, var(--vk-key) 55%, #000000), 0 0 0 4px color-mix(in srgb, var(--vk-key) 22%, #1e1e24),
            0 -1px 0 4px color-mix(in srgb, var(--vk-key) 38%, #1e1e24), 0 10px 18px 2px rgba(0, 0, 0, .5) !important;
    }
    html body .massivedownload:not(.vkBarDl):hover{ filter: brightness(1.08); }
    html body .massivedownload:not(.vkBarDl):active{ transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce){ html body .massivedownload{ transition: none; } html body .massivedownload:active{ transform: none; } }
@media (max-width: 1125px){
    header .secondline .vkPubBtnWrap{ position: fixed; z-index: 1003; top: 4px; right: 8px; float: none; margin: 0; }
    header .secondline .vkPubBtn{ width: 40px; padding: 0; justify-content: center; border-color: transparent; background: transparent; color: rgba(255, 255, 255, .45); }
    header .secondline .vkPubBtn .vkPubBtn-word{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }      /* the icon alone; the word stays for a screen reader */
    header .secondline .vkPubBtn[data-state="lit"]{ border-color: var(--vk-surface, #ffffff); background: var(--vk-surface, #ffffff); color: var(--vk-link, #0f52ff); box-shadow: none; }
    header .secondline .vkPubBtn[data-state="lit"]:hover{ border-color: var(--vk-surface, #ffffff); background: var(--vk-accent-tint-e9efff, #e9efff); }
}

/* ---------------------------------------------------------------- "Ajustes del sistema" in five tabs (2026-10-02, brief G)
 *
 * His words: "En el modal de ajustes del sistema coloca tabs: (los tabs equivalen a botones del sidebar azul de la derecha)". Markup: modals/modal_template/infoapp.php; behaviour: the
 * last script of view/js/vk_settings.js. The tabs are those of «Web pública» (vk_public.css .vkPub-tab): same height, same line under the one he is on. General is the form this window
 * always had; Contraseña, Espacio, Almacenamiento and Sesiones were buttons of the bar.
 */
#systemsettings .vkSet-tabs{ display: flex; gap: 2px; margin: 0 0 24px; border-bottom: 1px solid var(--vk-line, #e4e3ea); overflow-x: auto; }
#systemsettings .vkSet-tab{
    flex: 0 0 auto; margin: 0 0 -1px; padding: 12px 18px; border: 0; border-bottom: 3px solid transparent; background: none;
    font: 600 13.5px 'Montserrat', sans-serif; color: var(--vk-soft-6b6a76, #6b6a76); cursor: pointer;
}
#systemsettings .vkSet-tab:hover{ color: var(--vk-text, #16161a); }
#systemsettings .vkSet-tab.is-on{ color: var(--vk-text, #16161a); border-bottom-color: var(--vk-link, #0f52ff); }
#systemsettings .vkSet-tab:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
#systemsettings .vkSet-pane{ display: flex; flex-direction: column; gap: 22px; min-width: 0; }
#systemsettings .vkSet-pane[hidden]{ display: none; }
#systemsettings .vkSet-pwForm{ float: none; width: 100%; display: flex; flex-direction: column; gap: 22px; }
#systemsettings .vkSet-pwForm .vkSet-block{ padding-top: 0; border-top: 0; }

/* Espacio: the card modal_read_users.php draws (loaded into #vkSetSpaceBody), in the window's look - its own close button is not needed here */
#systemsettings .vkSet-spaceBody .clos{ display: none; }
#systemsettings .vkSet-spaceBody form{ float: none; width: 100%; display: flex; flex-direction: column; gap: 16px; }
#systemsettings .vkSet-spaceBody h2{ float: none; width: 100%; margin: 0; font-size: 16px; font-weight: 700; color: var(--vk-text, #16161a); }
#systemsettings .vkSet-spaceBody .formLayoutInputs, #systemsettings .vkSet-spaceBody .form-group{ float: none; width: 100%; margin: 0; padding-left: 0; padding-right: 0; }
#systemsettings .vkSet-spaceBody label{ float: none; width: auto; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--vk-text, #16161a); }
#systemsettings .vkSet-spaceBody .vkSpace-row .form-control{ height: 42px; }
#systemsettings .vkSet-spaceBody input[type="submit"]{
    float: none; width: auto !important; height: 44px; margin: 0; padding: 0 26px; border-radius: 10px; font-weight: 600;
}
#systemsettings .vkSet-spaceBody .send_user_link{ overflow-wrap: anywhere; font-size: 12.5px; }

/* Almacenamiento: where the files are kept (modals/modal_template/modal_storage/modal_storage.php) */
#systemsettings .vk-st{ display: flex; flex-direction: column; gap: 14px; padding-top: 0; border-top: 0; }
#systemsettings .vk-st-now{ padding: 12px 14px; border-radius: 10px; background: var(--vk-field-f7f6fa, #f7f6fa); font-size: 13px; word-break: break-all; }
#systemsettings .vk-st-dim{ font-size: 12px; color: var(--vk-soft-6b6a76, #6b6a76); }
#systemsettings .vk-st-msg{ padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
#systemsettings .vk-st-msg.bad{ background: var(--vk-err-tint, #fdecea); color: var(--vk-err, #b3261e); }
#systemsettings .vk-st-msg.good{ background: var(--vk-ok-tint-eaf6ec, #eaf6ec); color: var(--vk-ok-1f7a3f, #1f7a3f); }
#systemsettings .vk-st-msg.warn{ background: var(--vk-warn-tint-fff6e0, #fff6e0); color: var(--vk-warn-7a5a00, #7a5a00); }
#systemsettings .vk-st-bar{ height: 8px; margin-bottom: 6px; border-radius: 4px; background: var(--vk-page, #e6e6e6); overflow: hidden; }
#systemsettings #vkStBarFill{ height: 100%; width: 0; background: #0f52ff; transition: width .25s; }
#systemsettings .vk-st-actions{ display: flex; flex-wrap: wrap; gap: 10px; }
#systemsettings .vkSet-btn{
    height: 42px; padding: 0 20px; border: 1px solid var(--vk-text, #16161a); border-radius: 10px; background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
#systemsettings .vkSet-btn:hover:not(:disabled){ background: var(--vk-inv, #16161a); color: #ffffff; }
#systemsettings .vkSet-btn.is-main{ background: var(--vk-inv, #16161a); color: #ffffff; }
#systemsettings .vkSet-btn.is-main:hover:not(:disabled){ background: #4f1697; border-color: #4f1697; }
#systemsettings .vkSet-btn:disabled{ opacity: .45; cursor: not-allowed; }
#systemsettings .vkSet-btn:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }

/* Sesiones: the sessions this browser has open (core/vk/session.php vk_slot_tab()) */
#systemsettings .vkSet-sesList{ list-style: none; margin: 0; padding: 0; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 14px; overflow: hidden; }
#systemsettings .vkSet-sesRow{ float: none; width: auto; margin: 0; border-top: 1px solid var(--vk-line-soft, #efeef4); background: var(--vk-surface, #ffffff); }
#systemsettings .vkSet-sesRow:first-child{ border-top: 0; }
#systemsettings .vkSet-sesRow > a, #systemsettings .vkSet-sesRow.is-here{ display: flex; flex-direction: column; gap: 1px; padding: 12px 16px; color: var(--vk-text, #16161a) !important; text-decoration: none !important; }
#systemsettings .vkSet-sesRow > a:hover{ background: var(--vk-violet-tint, #f1e9fa); }
#systemsettings .vkSet-sesRow.is-here{ background: var(--vk-field-f7f6fa, #f7f6fa); }
#systemsettings .vkSet-sesName{ font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
#systemsettings .vkSet-sesRole{ font-size: 12px; color: var(--vk-soft, #5f5e6b); }
#systemsettings .vkSet-sesNew{
    align-self: flex-start; display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 10px; background: var(--vk-inv, #16161a); color: #ffffff !important;
    font-size: 13px; font-weight: 600; text-decoration: none !important;
}
#systemsettings .vkSet-sesNew:hover{ background: #4f1697; }
#systemsettings .vkSet-sesList a:focus-visible, #systemsettings .vkSet-sesNew:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }

/* THE EDIT-HUB WINDOW'S LOGOS (queue 2026-10-06 item 6, his "pon los input files en el mismo estilo y ui ux como hiciste en el modal de ajuste del sistema"):
   the rules above serve both windows; here only what that window's Bootstrap columns need - one logo a row, aligned, no legacy upload box. */
#modify_company_modal .vkHubLogos{ display: flex; flex-wrap: wrap; row-gap: 16px; float: none; clear: both; width: 100%; margin-bottom: 18px; }   /* a legacy .form-group floats: as a flex box it shrank to nothing */
#modify_company_modal .vkHubLogos > [class*="col-"]{ float: none; }
#modify_company_modal .vkHubLogos .vkSet-field{ margin: 0; }

/* ---------------------------------------------------------------- «MUDAR LA WEB» (brief MS, 2026-10-21; first the six-step tab of brief DM, 2026-10-20): a pane of the Web remota window of its own, like the review -
 * «Volver» is the way out, the two tabs of the settings are not shown. Markup: modals/modal_template/modal_remote.php (the section) and view/js/vk_move.js (everything inside it): the destination screen, the summary,
 * the list of stages that runs by itself, the end with the QR. The cards are the window's own (.vkRem-wiz); these rules are the stages' list, the green/red lines and the main screen's bands.
 * A MOVE HALF DONE (#vkRemote[data-move="on"], set by the server and kept by view/js/vk_settings.js) hides the process on the main screen - Actualizar tu web and Publicar are not offered for a half-moved web - and
 * leaves the band that says so, with «Continuar la mudanza». */
#vkRemote[data-tab="move"] .vkRem-tabs{ display: none; }
#vkRemote[data-move="on"] #vkRemPane-status .vkRem-dots, #vkRemote[data-move="on"] #vkRemPane-status .vkRem-wiz, #vkRemote[data-move="on"] #vkRemPane-status .vkRem-wait, #vkRemote[data-move="on"] #vkRemPane-status > .vkRem-foot, #vkRemote[data-move="on"] #vkRemPane-status .vkRem-hintBand{ display: none !important; }
#vkRemote .vkRem-moveBtn{ margin-left: 0; }
#vkRemote .vkRem-remote .vkRem-moveBtn{ background: var(--vk-inv, #16161a); border-color: var(--vk-inv, #16161a); color: #ffffff; }
#vkRemote .vkRem-remote .vkRem-moveBtn:hover{ background: #4f1697; border-color: #4f1697; }
#vkRemote .vkRem-moveBand, #vkRemote .vkRem-hintBand{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 6px 0 4px; padding: 12px 14px; border: 1px solid var(--vk-warn-line, #f1d9a6); border-radius: 12px; background: var(--vk-warn-tint-fffaf0, #fffaf0); color: var(--vk-warn-4a3200, #4a3200); }
#vkRemote .vkRem-moveBand[data-phase="ready"]{ border-color: var(--vk-ok-line, #cfe8d6); background: var(--vk-ok-tint-f6fbf7, #f6fbf7); color: var(--vk-ok-14532d, #14532d); }
#vkRemote .vkRem-moveBand[data-phase="running"]{ border-color: var(--vk-line, #e4e3ea); background: var(--vk-raised, #fbfafd); color: var(--vk-text, #16161a); }
#vkRemote .vkRem-moveBand p, #vkRemote .vkRem-hintBand p{ float: none; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; }
#vkRemote .vkRem-hintBand[hidden]{ display: none; }
#vkRemote .vkRem-moveDone{ margin: 6px 0 0; }
#vkRemote .vkMove-title{ margin: 0; font-size: 20px; line-height: 1.3; outline: 0; }
#vkRemote .vkMove-intro{ margin: -10px 0 0; }
#vkRemote .vkMove-body{ display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#vkRemote .vkMove-card{ width: 100%; }
#vkRemote .vkMove-card .vkRem-wizTitle{ font-size: 17px; }
#vkRemote .vkMove-card .vkRem-grid{ width: 100%; }
#vkRemote .vkMove-card[aria-busy="true"]{ opacity: .85; }
#vkRemote .vkMove-does{ margin: 0; }
#vkRemote .vkMove-sub{ margin: 4px 0 0; font-size: 13px; font-weight: 600; width: 100%; }
#vkRemote .vkMove-found{ margin: 0; font-size: 12.5px; font-weight: 600; color: var(--vk-ok, #1d7a3e); }
#vkRemote .vkMove-mail{ width: 100%; }
#vkRemote .vkMove-mail > summary{ font-size: 13px; font-weight: 700; color: var(--vk-violet-4f1697, #4f1697); cursor: pointer; margin-bottom: 12px; }
#vkRemote .vkMove-mail .vkRem-note{ margin: 0 0 12px; }
#vkRemote .vkMove-cert{ margin: 0; }
#vkRemote .vkMove-result{ width: 100%; }
#vkRemote .vkMove-result .vkRem-btn{ margin-top: 10px; }
#vkRemote .vkMove-lines{ list-style: none; display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 4px 0 2px; padding: 0; }
#vkRemote .vkMove-lines > li{ display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--vk-text, #16161a); }
#vkRemote .vkMove-mark{ flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font: 700 12px/1 'Montserrat', sans-serif;
    background: var(--vk-fieldh-e9e8ef, #e9e8ef); color: var(--vk-soft-6b6a76, #6b6a76); }
#vkRemote .vkMove-lines > li.is-ok .vkMove-mark{ background: #1d7a3e; color: #ffffff; }
#vkRemote .vkMove-lines > li.is-bad .vkMove-mark{ background: var(--vk-err, #b3261e); color: #ffffff; }
#vkRemote .vkMove-lines > li.is-bad .vkMove-text{ color: var(--vk-err, #b3261e); font-weight: 600; }
#vkRemote .vkMove-lines > li.is-warn .vkMove-mark{ background: #e09a1a; color: #ffffff; }
#vkRemote .vkMove-lines > li.is-warn .vkMove-text{ color: var(--vk-warn-7a4d00, #7a4d00); font-weight: 600; }
#vkRemote .vkMove-lines > li.is-note .vkMove-text{ color: var(--vk-soft, #5f5e6b); }
#vkRemote .vkMove-text{ min-width: 0; overflow-wrap: anywhere; }
#vkRemote .vkMove-will, #vkRemote .vkMove-wont{ width: 100%; padding: 12px 14px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; background: var(--vk-raised, #fbfafd); }
#vkRemote .vkMove-head{ margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--vk-soft, #5f5e6b); }
#vkRemote .vkMove-willText{ margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; font-weight: 600; }
#vkRemote .vkMove-list{ margin: 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--vk-text, #16161a); }
/* the stages: ONE list, a tick for each that is done, the one that runs lit with its own bar under it */
#vkRemote .vkMove-stages{ list-style: none; display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 2px 0 0; padding: 0; }
#vkRemote .vkMove-stages > li{ display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 0; padding: 6px 4px; font-size: 13.5px; font-weight: 600; color: var(--vk-soft-8a8994, #8a8994); }
#vkRemote .vkMove-stageTitle{ display: block; line-height: 26px; }
#vkRemote .vkMove-badge{ width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--vk-fieldh-e9e8ef, #e9e8ef); color: var(--vk-soft-6b6a76, #6b6a76); font: 700 12px 'Montserrat', sans-serif; }
#vkRemote .vkMove-tick{ display: none; font-size: 12px; }
#vkRemote .vkMove-stageText{ min-width: 0; overflow-wrap: anywhere; }
#vkRemote .vkMove-stageDoes{ display: none; margin: 2px 0 0; font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--vk-soft, #5f5e6b); }
#vkRemote .vkMove-stages > li[data-state="now"], #vkRemote .vkMove-stages > li[data-state="next"], #vkRemote .vkMove-stages > li[data-state="pause"], #vkRemote .vkMove-stages > li[data-state="bad"]{ color: var(--vk-text, #16161a); }
#vkRemote .vkMove-stages > li[data-state="now"] .vkMove-stageDoes, #vkRemote .vkMove-stages > li[data-state="next"] .vkMove-stageDoes, #vkRemote .vkMove-stages > li[data-state="pause"] .vkMove-stageDoes, #vkRemote .vkMove-stages > li[data-state="bad"] .vkMove-stageDoes{ display: block; }
#vkRemote .vkMove-stages > li[data-state="now"] .vkMove-badge, #vkRemote .vkMove-stages > li[data-state="next"] .vkMove-badge{ background: #0f52ff; color: #ffffff; }
#vkRemote .vkMove-stages > li[data-state="pause"] .vkMove-badge{ background: #e09a1a; color: #ffffff; }
#vkRemote .vkMove-stages > li[data-state="bad"] .vkMove-badge{ background: var(--vk-err, #b3261e); color: #ffffff; }
#vkRemote .vkMove-stages > li[data-state="done"]{ color: var(--vk-ok, #1d7a3e); }
#vkRemote .vkMove-stages > li[data-state="done"] .vkMove-badge{ background: #1d7a3e; color: #ffffff; }
#vkRemote .vkMove-stages > li[data-state="done"] .vkMove-num{ display: none; }
#vkRemote .vkMove-stages > li[data-state="done"] .vkMove-tick{ display: inline-block; }
#vkRemote .vkMove-stages .vkRem-prog{ margin: 8px 0 2px; max-width: 520px; }
#vkRemote .vkMove-notice{ width: 100%; margin: 0; padding: 10px 14px; border: 1px solid var(--vk-warn-line, #f1d9a6); border-radius: 12px; background: var(--vk-warn-tint-fffaf0, #fffaf0); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--vk-warn-4a3200, #4a3200); }
#vkRemote .vkMove-notice.is-bad{ border-color: var(--vk-err-line, #f1c9c5); background: var(--vk-err-tint-fef8f7, #fef8f7); color: var(--vk-err, #b3261e); }
/* the end: «Hecho», the old address redirecting, the phone's QR, what can be deleted at the old hosting */
#vkRemote .vkMove-end{ border-color: var(--vk-ok-line, #cfe8d6); background: var(--vk-ok-tint-f6fbf7, #f6fbf7); }
#vkRemote .vkMove-pair{ width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; background: var(--vk-raised, #fbfafd); }
#vkRemote .vkMove-pair .vkMove-head{ margin: 0; }
#vkRemote .vkMove-pair .vkBz-qrwrap{ display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
#vkRemote .vkMove-pair .vkBz-qr{ flex: none; width: 216px; height: 216px; background: #ffffff; border-radius: 10px; overflow: hidden; }
#vkRemote .vkMove-pair .vkBz-qr svg{ display: block; width: 100%; height: 100%; }
#vkRemote .vkMove-pair .vkBz-qrside{ flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
#vkRemote .vkMove-pair .vkBz-qrside p, #vkRemote .vkMove-pair .vkBz-ask p{ float: none; margin: 0; font-size: 13px; line-height: 1.5; }
#vkRemote .vkMove-pair .vkBz-url{ width: 100%; height: 38px; padding: 0 10px; font-size: 12px; }
#vkRemote .vkMove-pair .vkBz-ask{ display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 10px; }
#vkRemote .vkMove-pair .vkBz-line{ display: flex; flex-wrap: wrap; gap: 8px; }
#vkRemote .vkMove-pair .vkBz-code{ font-size: 18px; letter-spacing: .08em; }
#vkRemote .vkMove-pair .vkBz-state, #vkRemote .vkMove-pair .vkBz-count{ font-size: 12px; color: var(--vk-soft, #5f5e6b); }
#vkRemote .vkMove-htaccess{ margin: 0; padding: 10px 14px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; background: var(--vk-raised, #fbfafd); font-size: 13px; line-height: 1.5; color: var(--vk-text, #16161a); }
#vkRemote .vkMove-htaccess code{ font-weight: 700; }
#vkRemote .vkMove-foot{ padding-top: 14px; border-top: 1px solid var(--vk-line-soft, #efeef4); }
#vkRemote .vkMove-foot .vkRem-line{ margin: 0 0 10px; }
#vkRemote .vkMove-foot .vkMove-undoAsk{ display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 2px solid var(--vk-warn-line, #f1d9a6); border-radius: 12px; background: var(--vk-warn-tint-fffaf0, #fffaf0); }
#vkRemote .vkMove-say{ margin: 0; }
#vkRemote .vkMove-again{ margin: 0; }
#vkRemote .vkMove-againAsk{ width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 2px solid var(--vk-warn-line, #f1d9a6); border-radius: 12px; background: var(--vk-warn-tint-fffaf0, #fffaf0); }
#vkRemote .vkMove-againAsk .vkRem-line{ margin: 0; }
@media (max-width: 640px){
    #vkRemote .vkMove-pair .vkBz-qr{ width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 272px; }
}

/* ---------------------------------------------------------------- CONNECTION PROFILES (brief PF, 2026-10-20): the bar at the top of the tab «Conexión» (modals/modal_template/modal_remote.php, view/js/vk_profiles.js) */
#vkRemote .vkRem-prof{ gap: 14px; }
#vkRemote .vkRem-profRow{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#vkRemote .vkRem-profRow > label{ float: none; width: auto; margin: 0; font-size: 13px; font-weight: 600; color: var(--vk-text, #16161a); }
#vkRemote .vkRem-profSel{ flex: 1 1 320px; width: auto; min-width: 0; max-width: 560px; height: 44px; }
#vkRemote .vkRem-profBadge{ display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; background: #1d7a3e; color: #ffffff; font: 700 11.5px 'Montserrat', sans-serif; }
#vkRemote .vkRem-profBadge[hidden]{ display: none; }
#vkRemote .vkRem-profBtns .vkRem-btn{ height: 40px; padding: 0 16px; }
#vkRemote .vkRem-profBtns .vkRem-profUse{ margin-left: auto; }
#vkRemote .vkRem-profRename .vkRem-profNameIn{ flex: 1 1 260px; width: auto; min-width: 0; height: 40px; }
#vkRemote .vkRem-profAsk{ display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; background: var(--vk-field-f7f6fa, #f7f6fa); }
#vkRemote .vkRem-profAsk[hidden], #vkRemote .vkRem-profRename[hidden]{ display: none; }
#vkRemote .vkRem-profAsk .vkRem-line{ margin: 0; }
#vkRemote .vkRem-prof .vkRem-profNote{ font-size: 12px; }
#vkRemote .vkRem-prof .vkRem-profSay{ margin: 0; }
#vkRemote .vkRem-profMail .vkRem-profName{ color: var(--vk-text, #16161a); }
@media (max-width: 640px){
    #vkRemote .vkRem-profBtns .vkRem-profUse{ margin-left: 0; }
}