/* A hub's brand colours and links of interest (2026-09-30). Two things share this file, as they share view/js/vk_brand.js:
 *   1. THE BLOCK on a hub's page - "Colores de marca" (swatches, a click copies the HEX) and "Enlaces de interés" - written by core/vk/hub_brand.php
 *      vk_brand_block_html(); on the admin's, a hub user's and a person's page (inc/sidebar_tree.php, inside the title block) and on the public web's hub page
 *      (search.php), so nothing here leans on those pages' own rules. Every class starts with vkBrand-.
 *   2. THE WINDOW "Colores y enlaces" (modals/modal_template/modal_hub_brand.php), for the admin only, sitting inside the old .modalcommon like "Web pública"
 *      does, whose rules float and size every label and input - hence #vkBrand on everything. The look is that of #vkPublic (view/css/vk_public.css). */

/* ---------------------------------------------------------------- 1. the block */

.vkBrand{ display: flex; flex-direction: column; gap: 22px; min-width: 0; font-family: 'Montserrat', sans-serif; font-weight: 400; color: var(--vk-text, #16161a); }   /* 400: the public web's body is weight 200, which made the HEX and the host read pale */
.vkBrand:empty{ display: none; }
.vkBrand-group{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* .detailphoto h2 (style.css) floats and sizes every title: the same undoing as .vkHead-label */
.vkBrand .vkBrand-label, .detailphoto .vkBrand-label{
    float: none; width: auto; margin: 0; padding: 0;
    font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .06em;
    text-transform: uppercase; color: var(--vk-soft, #5f5e6b);
}

/* the colours: two groups, "Primarios" then "Secundarios" (brief I, 2026-10-02), each a grid of blocks of the colour over its name and its HEX; a click copies the HEX.
   The sub-label is quieter than the block's own label: a heading of its own (h3), undone like .vkBrand-label because .detailphoto h3 (style.css) floats and sizes every title */
.vkBrand-role{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* ON ONE LINE WHILE THEY FIT (brief T, 2026-10-02, his words: "los colores deberian de mostrarse en linea siempre todos. Siempre que haya espacio. Si no caben pues
   que se pongan como los pusiste ahora."): the two groups side by side, each with its label over its own row of colours; the second drops under the first only when
   it does not fit beside it. The label of the block takes the whole first line. */
.vkBrand-colors{ flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px 32px; }
.vkBrand-colors > .vkBrand-label{ flex: 0 0 100%; }
.vkBrand-colors > .vkBrand-role{ flex: 0 1 auto; max-width: 100%; }
.vkBrand .vkBrand-sub, .detailphoto .vkBrand-sub{
    float: none; width: auto; margin: 0; padding: 0;
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .02em;
    text-transform: none; color: var(--vk-soft-3c3b46, #3c3b46);
}
/* lower and wider boxes (brief T, his words: "un poco menos altas y un poco mas largas, asi es mas discreto, y ademas se ve mejor los items de abajo") */
.vkBrand-swatches{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vkBrand-swatches > li{ flex: 0 0 176px; margin: 0; padding: 0; min-width: 0; }
.vkBrand-sw{
    display: flex; flex-direction: column; align-items: stretch; width: 100%; height: 100%; padding: 0; margin: 0;
    border: 1px solid var(--vk-line, #e4e3ea); border-radius: 14px; background: var(--vk-surface, #ffffff); overflow: hidden;
    font: inherit; color: var(--vk-text, #16161a); text-align: left; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.vkBrand-sw:hover{ border-color: var(--vkv-accent, #6e1fd1); box-shadow: 0 6px 18px rgba(40, 20, 90, .08); }
.vkBrand-sw:focus-visible{ outline: 2px solid var(--vkv-accent, #6e1fd1); outline-offset: 2px; }
.vkBrand-chip{ display: block; height: 34px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1); }   /* the line keeps a white or a very light colour from vanishing into the card */
.vkBrand-name{ display: block; padding: 8px 12px 0; font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.vkBrand-hex{ display: block; padding: 1px 12px 8px; font-size: 12px; line-height: 1.3; letter-spacing: .02em; color: var(--vk-soft, #5f5e6b); font-variant-numeric: tabular-nums; }
.vkBrand-chip + .vkBrand-hex{ padding-top: 8px; }
.vkBrand-sw.is-copied{ border-color: var(--vk-ok, #1d7a3e); }
.vkBrand-sw.is-copied .vkBrand-hex{ color: var(--vk-ok, #1d7a3e); font-weight: 700; }
.vkBrand-sw.is-failed{ border-color: var(--vk-err, #b3261e); }
.vkBrand-sw.is-failed .vkBrand-hex{ color: var(--vk-err, #b3261e); font-weight: 700; }
.vkBrand-live, .vkBrand-sr{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the links: a card each, the title over where it goes, the arrow at its right */
.vkBrand-links{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 12px; }   /* 300 (was 240, brief BG): his "si hace falta puedes hacer un poco mas largo la caja de link" - room for a picture and two lines of description */
.vkBrand-links > li{ margin: 0; padding: 0; min-width: 0; }
.vkBrand-link{
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
    height: 100%; padding: 12px 14px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 14px; background: var(--vk-surface, #ffffff);
    color: var(--vk-text, #16161a) !important; text-decoration: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.vkBrand-link:hover, .vkBrand-link:focus-visible{ border-color: var(--vkv-accent, #6e1fd1); box-shadow: 0 6px 18px rgba(40, 20, 90, .08); }
.vkBrand-link:focus-visible{ outline: 2px solid var(--vkv-accent, #6e1fd1); outline-offset: 2px; }
.vkBrand-title{ grid-column: 1; font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.vkBrand-where{ grid-column: 1; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--vk-soft, #5f5e6b); overflow-wrap: anywhere; }
.vkBrand-ext{ grid-column: 2; grid-row: 1 / span 3; color: var(--vk-soft-6b6a76, #6b6a76); }
/* A DESCRIPTION AND A PICTURE (brief BG, 2026-10-12): under the title at most two lines with an ellipsis; the picture a 56 px square on the left, rows 1-3 of the box, the text beside it in column 2 and the arrow in 3.
   A link with neither is drawn exactly as before. The picture's corners are --vk-brand-thumb-radius (a rounded square; 50% would make it round as the hub marks are). */
.vkBrand-desc{ grid-column: 1; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--vk-soft, #5f5e6b); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.vkBrand-link--thumb{ grid-template-columns: 56px minmax(0, 1fr) auto; }
.vkBrand-link--thumb > .vkBrand-title, .vkBrand-link--thumb > .vkBrand-desc, .vkBrand-link--thumb > .vkBrand-where{ grid-column: 2; }
.vkBrand-link--thumb > .vkBrand-ext{ grid-column: 3; }
.vkBrand-thumb{ grid-column: 1; grid-row: 1 / span 3; align-self: center; display: block; width: 56px; height: 56px; overflow: hidden; border-radius: var(--vk-brand-thumb-radius, 14px);
    background: var(--vk-line, #e4e3ea); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.vkBrand-thumb img{ display: block; width: 100%; height: 100%; object-fit: cover; }
/* THE LINKS AS «PUBLICAR CAMBIOS» (2026-10-08, his words: "estos botones tambien tienen que tener el estilo que tiene el boton publicar, pero sin icono. Y conseva sus textos en
   los enlaces", then "sin icono de upload, pero con los iconos de los actuales"): the raised teal key of view/css/vk_settings.css (his «Get Started Now»), in both looks - its face,
   the bright line on top, the lighter edge at the foot, the bezel with its hairline, the shadow under it, Departure Mono - with each link's own title, address and icon (↗ or the
   envelope). Corners a fifth of the height, as on his picture; the gaps wide enough for the bezels and the shadow. */
.vkBrand-links{ gap: 20px 22px; padding: 4px 4px 10px; }
.vkBrand-links .vkBrand-link, .vkBrand-links .vkBrand-link:hover, .vkBrand-links .vkBrand-link:focus-visible{
    border: 0; border-radius: 12px; color: #d4e6ea !important; font-family: "Departure Mono", ui-monospace, Menlo, Consolas, monospace !important; font-synthesis: none;
    /* darker than «Publicar cambios» (his words, 2026-10-08: "hazlos mas oscuros, restaltan demasiado"): the face, the bezel and the lines about a third down */
    background: linear-gradient(180deg, #202c34 0%, #1f2e35 50%, #1d3034 100%);
    box-shadow: inset 0 1.5px 0 rgba(150, 176, 189, .26), inset 0 -1px 0 rgba(104, 146, 158, .26),
        0 0 0 1px #121a21, 0 0 0 4px #19222b, 0 -1px 0 4px #29353f, 0 8px 14px 2px rgba(4, 6, 10, .45);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.vkBrand-links .vkBrand-link:hover{ background: linear-gradient(180deg, #26343d 0%, #24363e 50%, #22393d 100%); color: #ffffff !important; }
.vkBrand-links .vkBrand-link:active{ transform: translateY(1px); }
.vkBrand-links .vkBrand-link:focus-visible{ outline-offset: 6px; }
.vkBrand-links .vkBrand-title{ color: inherit; font-weight: 400; }
.vkBrand-links .vkBrand-where{ color: rgba(212, 230, 234, .55); }
.vkBrand-links .vkBrand-desc{ color: rgba(212, 230, 234, .78); }
.vkBrand-links .vkBrand-thumb{ background: #2a3a42; box-shadow: inset 0 0 0 1px rgba(150, 176, 189, .22); }
.vkBrand-links .vkBrand-ext{ color: rgba(212, 230, 234, .6); }
.vkBrand-links .vkBrand-link:hover .vkBrand-ext{ 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 face with a hint of the teal, a white line on top, a bezel a shade lighter than the page with its hairline, a soft shadow, the text deep teal */
html:not([data-theme="dark"]) .vkBrand-links .vkBrand-link, html:not([data-theme="dark"]) .vkBrand-links .vkBrand-link:hover, html:not([data-theme="dark"]) .vkBrand-links .vkBrand-link:focus-visible{
    color: #1f3a42 !important;
    background: linear-gradient(180deg, #fdfefe 0%, #f2f6f7 50%, #ebf1f2 100%);
    box-shadow: inset 0 1.5px 0 #ffffff, inset 0 -1px 0 rgba(255, 255, 255, .9),
        0 0 0 1px #cfdbe0, 0 0 0 4px #eef3f5, 0 -1px 0 4px #dce6ea, 0 8px 14px 2px rgba(30, 50, 65, .14);
}
html:not([data-theme="dark"]) .vkBrand-links .vkBrand-link:hover{ background: linear-gradient(180deg, #ffffff 0%, #f6f9fa 50%, #eff4f5 100%); color: #0f2a31 !important; }
html:not([data-theme="dark"]) .vkBrand-links .vkBrand-where, html:not([data-theme="dark"]) .vkBrand-links .vkBrand-ext{ color: rgba(31, 58, 66, .6); }
html:not([data-theme="dark"]) .vkBrand-links .vkBrand-desc{ color: rgba(31, 58, 66, .8); }
html:not([data-theme="dark"]) .vkBrand-links .vkBrand-thumb{ background: #e3ecee; box-shadow: inset 0 0 0 1px rgba(31, 58, 66, .12); }
html:not([data-theme="dark"]) .vkBrand-links .vkBrand-link:hover .vkBrand-ext{ color: #0f2a31; }
@media (prefers-reduced-motion: reduce){ .vkBrand-sw, .vkBrand-link, .vkBrand-links .vkBrand-link{ transition: none; } .vkBrand-links .vkBrand-link:active{ transform: none; } }
@media (max-width: 600px){
    .vkBrand-swatches{ gap: 8px; }
    .vkBrand-swatches > li{ flex-basis: 150px; }
    .vkBrand-links{ grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- 2. the window */

/* its button, in the title block of a hub's page: the same outlined button as "Dar acceso a una persona" (.vkHead-give), and first, left of it */
.vkHead-brand{
    height: 44px; padding: 0 16px;
    border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 12px; background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.vkHead-brand:hover{ border-color: var(--vk-violet, #6e1fd1); color: var(--vk-violet-4f1697, #4f1697); }
.vkHead-brand:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
/* A third button beside the title does not fit at 1280 (the sidebar takes 290px): it squeezed the title to one letter a line. On an admin's hub page the buttons
   wrap under the title when the title would get less than 240px, and stay beside it when there is room (the marked spot: left of "Dar acceso a una persona"). */
.vkHead-top--brand{ flex-wrap: wrap; row-gap: 14px; }
.vkHead-top--brand .vkHead-titles{ flex: 1 1 240px; }
.vkHead-top--brand .vkHead-actions{ flex: 0 1 auto; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 600px){       /* the row becomes a column (sidebar_tree.css): a basis of 240px would be a height */
    .vkHead-top--brand .vkHead-titles{ flex: 0 1 auto; }
    .vkHead-top--brand .vkHead-actions{ margin-left: 0; }
}

#vkBrand .modal-dialog{ width: min(820px, calc(100vw - 32px)); max-width: none; }
#vkBrand .modal-content{ padding: 32px 36px 30px; font-family: 'Montserrat', sans-serif; color: var(--vk-text, #16161a); text-align: left; }
#vkBrand .vkBr-head{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; padding-right: 40px; }
#vkBrand h1{ float: none; margin: 0; font-size: 24px; font-weight: 700; }
#vkBrand .vkBr-hub{ font-size: 15px; font-weight: 600; color: var(--vk-soft, #5f5e6b); overflow-wrap: anywhere; }
#vkBrand .vkBr-lead{ margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--vk-soft, #5f5e6b); }

/* «Pendiente de revisión» (brief W, 2026-10-02): what a person sent for the admin's review and nobody has judged - above the tabs, in the amber the app uses for "waiting" (the
   tab's unsaved dot, the bell's decisions). The tab that holds a proposal carries a ring; the hub's button in the page carries a dot while one waits. */
#vkBrand .vkBr-pend{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--vk-warn-line-f0d9a3, #f0d9a3); border-radius: 12px; background: var(--vk-warn-tint-fff8e6, #fff8e6); }
#vkBrand .vkBr-pend[hidden]{ display: none; }
#vkBrand .vkBr-pendText{ flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.45; color: var(--vk-warn-5a4300, #5a4300); }
#vkBrand .vkBr-pendTitle{ font-size: 13.5px; font-weight: 700; color: var(--vk-warn-3d2d00, #3d2d00); }
#vkBrand .vkBr-pendAt{ font-size: 11.5px; color: var(--vk-warn-8a6a1a, #8a6a1a); }
#vkBrand .vkBr-pendAt:empty{ display: none; }
#vkBrand .vkBr-pend .vkBr-btn{ height: 38px; padding: 0 18px; border-color: var(--vk-warn-8a5a00, #8a5a00); color: var(--vk-warn-5a3a00, #5a3a00); background: var(--vk-surface, #ffffff); }
#vkBrand .vkBr-pend .vkBr-btn:hover:not(:disabled){ background: var(--vk-warn-tint-fff0cf, #fff0cf); }
#vkBrand .vkBr-pend .vkBr-pendSay{ flex: 1 1 100%; }
#vkBrand .vkBr-tab.has-pending::before{ content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border: 2px solid var(--vk-warn-e09a1a, #e09a1a); border-radius: 50%; box-sizing: content-box; vertical-align: middle; }
#vkBrand .vkBr-pend .vkBr-btn:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
.vkHead-brand[data-pending="1"]::after{ content: ''; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #e09a1a; }

#vkBrand .vkBr-tabs{ display: flex; gap: 2px; margin: 0 0 22px; border-bottom: 1px solid var(--vk-line, #e4e3ea); overflow-x: auto; }
#vkBrand .vkBr-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;
}
#vkBrand .vkBr-tab:hover{ color: var(--vk-text, #16161a); }
#vkBrand .vkBr-tab.is-on{ color: var(--vk-text, #16161a); border-bottom-color: var(--vk-link, #0f52ff); }
#vkBrand .vkBr-tab.is-dirty::after{ content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: #e09a1a; vertical-align: middle; }
#vkBrand .vkBr-tab:focus-visible, #vkBrand .vkBr-btn:focus-visible, #vkBrand .vkBr-add:focus-visible,
#vkBrand .vkBr-up:focus-visible, #vkBrand .vkBr-down:focus-visible, #vkBrand .vkBr-del:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
#vkBrand .vkBr-pane{ display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#vkBrand .vkBr-pane[hidden]{ display: none; }
#vkBrand .vkBr-note{ margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--vk-soft, #5f5e6b); }
#vkBrand .vkBr-empty{ margin: 0; padding: 18px; border: 1px dashed var(--vk-line-strong-cfcfd8, #cfcfd8); border-radius: 12px; font-size: 13px; color: var(--vk-soft, #5f5e6b); }
#vkBrand .vkBr-empty[hidden]{ display: none; }

/* the rows: the arrows, the fields, the remove button */
#vkBrand .vkBr-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#vkBrand .vkBr-list:empty{ display: none; }
#vkBrand .vkBr-item{ display: grid; align-items: center; gap: 10px; margin: 0; padding: 0; }
#vkBrand .vkBr-item--color{ grid-template-columns: 74px 44px minmax(0, 1fr) 128px 132px 40px; }
/* a link is two lines (brief BG): the arrows, title, address, switch and remove; under them its picture (the administrator's) and its description */
#vkBrand .vkBr-item--link{ grid-template-columns: 74px minmax(0, 2fr) minmax(0, 3fr) auto 40px; grid-template-areas: "move title url show del" "thumb thumb desc desc desc"; row-gap: 8px; }
#vkBrand .vkBr-item--link .vkBr-move{ grid-area: move; }
#vkBrand .vkBr-item--link .vkBr-title{ grid-area: title; }
#vkBrand .vkBr-item--link .vkBr-url{ grid-area: url; }
#vkBrand .vkBr-item--link .vkBr-show{ grid-area: show; }
#vkBrand .vkBr-item--link .vkBr-del{ grid-area: del; }
#vkBrand .vkBr-item--link .vkBr-thumb{ grid-area: thumb; }
#vkBrand .vkBr-item--link .vkBr-desc{ grid-area: desc; }
#vkBrand .vkBr-thumb{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
#vkBrand .vkBr-thumb[hidden]{ display: none; }
#vkBrand .vkBr-thumbview{ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px dashed var(--vk-line-strong-cfcfd8, #cfcfd8); border-radius: 10px; overflow: hidden; background: var(--vk-surface, #ffffff); }
#vkBrand .vkBr-thumb.has-pic .vkBr-thumbview{ border-style: solid; border-color: var(--vk-line, #e4e3ea); }
#vkBrand .vkBr-thumbimg{ display: block; width: 100%; height: 100%; object-fit: cover; }
#vkBrand .vkBr-thumbimg[hidden]{ display: none; }
#vkBrand .vkBr-thumbfile{ display: none !important; }          /* style.css's rules for a file input: it is only the picker the «Subir imagen» button opens */
#vkBrand .vkBr-thumbpick, #vkBrand .vkBr-thumbdel{
    flex: 0 0 auto; height: 34px; margin: 0; padding: 0 12px; border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px; background: var(--vk-surface, #ffffff); color: var(--vk-soft-3c3b46, #3c3b46);
    font: 600 12.5px 'Montserrat', sans-serif; cursor: pointer; white-space: nowrap;
}
#vkBrand .vkBr-thumbpick:hover:not(:disabled){ border-color: var(--vk-violet, #6e1fd1); color: var(--vk-violet-4f1697, #4f1697); }
#vkBrand .vkBr-thumbdel:hover{ border-color: var(--vk-err, #b3261e); color: var(--vk-err, #b3261e); }
#vkBrand .vkBr-thumbpick:disabled{ opacity: .55; cursor: progress; }
#vkBrand .vkBr-thumbpick:focus-visible, #vkBrand .vkBr-thumbdel:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
#vkBrand .vkBr-item.is-busy .vkBr-thumbview{ opacity: .5; }
/* the two titles of the hub's page, at the top of the second tab (brief BG) */
#vkBrand .vkBr-titles{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; margin: 0; padding: 14px 16px 12px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; }
#vkBrand .vkBr-tfield{ float: none; width: auto; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; font-weight: 400; }
#vkBrand .vkBr-tlabel{ font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--vk-text, #16161a); }
#vkBrand .vkBr-tnote{ grid-column: 1 / -1; }
#vkBrand .vkBr-move{ display: flex; gap: 4px; }
#vkBrand .vkBr-up, #vkBrand .vkBr-down, #vkBrand .vkBr-del{
    flex: 0 0 auto; width: 34px; height: 42px; padding: 0; margin: 0; border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px; background: var(--vk-surface, #ffffff); color: var(--vk-soft-3c3b46, #3c3b46);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit;
}
#vkBrand .vkBr-del{ width: 40px; }
#vkBrand .vkBr-up:hover:not(:disabled), #vkBrand .vkBr-down:hover:not(:disabled){ border-color: var(--vk-violet, #6e1fd1); color: var(--vk-violet-4f1697, #4f1697); }
#vkBrand .vkBr-del:hover{ border-color: var(--vk-err, #b3261e); color: var(--vk-err, #b3261e); }
#vkBrand .vkBr-up:disabled, #vkBrand .vkBr-down:disabled{ opacity: .35; cursor: default; }
#vkBrand input[type="text"]{
    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;
}
#vkBrand input[type="text"]:focus{ border-color: var(--vk-violet, #6e1fd1); outline: 0; }
#vkBrand input[type="text"].is-bad{ border-color: var(--vk-err, #b3261e); background: var(--vk-err-tint-fdf3f2, #fdf3f2); }
#vkBrand .vkBr-hex{ font-variant-numeric: tabular-nums; text-transform: uppercase; }
/* Primario / Secundario of a colour (brief I): the same box as the fields beside it */
#vkBrand select.vkBr-role{
    float: none; width: 100%; height: 42px; margin: 0; padding: 0 8px; 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: 13px; font-weight: 600; box-shadow: none; cursor: pointer;
}
#vkBrand select.vkBr-role:focus{ border-color: var(--vk-violet, #6e1fd1); outline: 0; }
#vkBrand .vkBr-item--color select.vkBr-role[data-role="p"]{ border-color: var(--vk-text, #16161a); }
#vkBrand input[type="color"]{
    float: none; width: 44px; height: 42px; margin: 0; padding: 3px; border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 10px; background: var(--vk-surface, #ffffff); cursor: pointer;
}
#vkBrand input[type="color"]:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }

/* the switch "Mostrar" (the look of the switches of "Web pública") */
#vkBrand .vkBr-show{ float: none; width: auto; margin: 0; display: flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 400; }
#vkBrand .vkBr-showName{ font-size: 12.5px; font-weight: 600; color: var(--vk-text, #16161a); }
#vkBrand .vkBr-showBox{ position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; transform: none; }   /* style.css scales every checkbox: this is the switch */
#vkBrand .vkBr-sw{ position: relative; flex: 0 0 40px; width: 40px; height: 22px; border-radius: 11px; background: var(--vk-line-strong-c9c8d2, #c9c8d2); transition: background .15s ease; }
#vkBrand .vkBr-sw::after{ content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease; }
#vkBrand .vkBr-showBox:checked + .vkBr-sw{ background: #0f52ff; }
#vkBrand .vkBr-showBox:checked + .vkBr-sw::after{ transform: translateX(18px); }
#vkBrand .vkBr-showBox:focus-visible + .vkBr-sw{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ #vkBrand .vkBr-sw, #vkBrand .vkBr-sw::after{ transition: none; } }

/* add, Guardar and the line beside it */
#vkBrand .vkBr-add{ align-self: flex-start; padding: 0; border: 0; background: none; font: 600 13px 'Montserrat', sans-serif; color: var(--vk-violet-4f1697, #4f1697); cursor: pointer; }
#vkBrand .vkBr-add:hover:not(:disabled){ text-decoration: underline; }
#vkBrand .vkBr-add:disabled{ opacity: .5; cursor: not-allowed; }
#vkBrand .vkBr-row-save{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 6px; }
#vkBrand .vkBr-row-save .vkBr-saveSay{ flex: 1 1 220px; margin: 0; }
#vkBrand .vkBr-btn{
    height: 44px; padding: 0 26px; border: 1px solid var(--vk-text, #16161a); border-radius: 10px; background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a);
    font: 600 13px 'Montserrat', sans-serif; cursor: pointer;
}
#vkBrand .vkBr-btn.is-main{ background: #0f52ff; border-color: #0f52ff; color: #ffffff; }
#vkBrand .vkBr-btn.is-main:hover:not(:disabled){ background: #0b3fd0; border-color: #0b3fd0; }
#vkBrand .vkBr-btn:disabled{ opacity: .55; cursor: not-allowed; }
#vkBrand .vkBr-line{ margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--vk-soft, #5f5e6b); }
#vkBrand .vkBr-line:empty{ display: none; }
#vkBrand .vkBr-line.is-ok{ color: var(--vk-ok, #1d7a3e); }
#vkBrand .vkBr-line.is-bad{ color: var(--vk-err, #b3261e); font-weight: 600; }

/* a phone: each row becomes a small card - the arrows and the remove button on the first line, the fields under them, the switch last */
@media (max-width: 640px){
    #vkBrand .modal-content{ padding: 24px 16px 20px; }
    #vkBrand h1{ font-size: 22px; }
    #vkBrand .vkBr-tab{ padding: 12px 14px; }
    #vkBrand .vkBr-item{ padding: 12px; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; gap: 10px; }
    #vkBrand .vkBr-item--color{ grid-template-columns: 44px minmax(0, 1fr) 40px; grid-template-areas: "move move del" "pick hex hex" "name name name" "role role role"; }
    #vkBrand .vkBr-item--color .vkBr-move{ grid-area: move; }
    #vkBrand .vkBr-item--color .vkBr-del{ grid-area: del; }
    #vkBrand .vkBr-item--color .vkBr-pick{ grid-area: pick; }
    #vkBrand .vkBr-item--color .vkBr-hex{ grid-area: hex; }
    #vkBrand .vkBr-item--color .vkBr-name{ grid-area: name; }
    #vkBrand .vkBr-item--color .vkBr-role{ grid-area: role; }
    #vkBrand .vkBr-item--link{ grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "move del" "title title" "url url" "desc desc" "thumb thumb" "show show"; }
    #vkBrand .vkBr-item--link .vkBr-move{ grid-area: move; }
    #vkBrand .vkBr-item--link .vkBr-del{ grid-area: del; }
    #vkBrand .vkBr-item--link .vkBr-title{ grid-area: title; }
    #vkBrand .vkBr-item--link .vkBr-url{ grid-area: url; }
    #vkBrand .vkBr-item--link .vkBr-show{ grid-area: show; }
    #vkBrand .vkBr-titles{ grid-template-columns: minmax(0, 1fr); }
    #vkBrand .vkBr-row-save .vkBr-btn{ flex: 1 1 100%; }
}
/* A LINK TO A PATH ON THIS COMPUTER (2026-10-12, core/hub/open_link.php, view/js/vk_brand.js): its second line says it is opening, then opened (the accent) or why not (red) */
.vkBrand-link.is-opening{ cursor: progress; }
.vkBrand-link.is-opened .vkBrand-where{ color: var(--vk-hl, var(--vk-violet, #6e1fd1)); }
.vkBrand-link.is-failed .vkBrand-where{ color: var(--vk-err, #b3261e); }