/* 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); }
}

/* ---------------------------------------------------------------- 1b. the two boxes of the hub cards' row (brief BH, 2026-11-11) */

/* His words: «Si queda espacio en la derecha ... coloca los colores de marca y los links. Y quita colores y links de debajo ... los colores y los links vayan detras del ultimo hub. Cada caja (colores o links) mire de ancho igual que un hub.
   Seran tratada como dos cajas mas.» On the app's own pages the block is no longer under the cards: «Colores de marca» and «Enlaces de interés» are two more cards of the row (.vkCards > .vkCard, core/vk/hub_brand.php vk_brand_boxes_html): the grid
   gives them a hub card's width and wraps them as it wraps a hub card; view/js/vk_frames.js frames them as it frames the hub cards (the same class). They are as tall as the row: the cards' height - never less than 220 px (a hub card is 219 to 288) - and what they hold SCROLLS INSIDE
   (a thin scroll bar) when it is longer. The content sits in an absolutely placed box so that its length never makes the row taller than the hub cards. */
.vkCards > .vkCard.vkCard--brand{ display: block; grid-template-rows: none; padding: 0; min-height: 220px; overflow: hidden; }          /* (a hub card is a grid of six sub-rows: this one is one block, but spans the same six rows of the row) */
.vkCard--brand > .vkBrand{
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-sizing: border-box; padding: 16px 16px 30px; gap: 14px;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--vk-soft, #5f5e6b) 55%, transparent) transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);          /* a fade at the foot says «there is more»; the 30 px of padding keep the last item clear of it when the end is reached */
}
.vkCard--brand .vkBrand-group{ gap: 8px; }
.vkCard--brand .vkBrand-colors{ gap: 10px 20px; }
.vkCard--brand .vkBrand-swatches{ gap: 8px; }
.vkCard--brand .vkBrand-swatches > li{ flex: 1 1 calc(50% - 4px); min-width: 92px; }          /* two to a line in a box as wide as a hub card (the block's 176 px would be one) */
.vkCard--brand .vkBrand-links{ grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 4px 4px 8px; }
.vkCard--brand .vkBrand-link{ padding: 10px 12px; }
html[data-theme="dark"] .vkCards .vkCard--brand a::before{ content: none !important; }          /* the dark look's shade on the hub cards' links (sidebar_tree.css .vkCards a:before) is not for the links INSIDE a box */
.vkCard--brand .vkBrand-slot, .vkBrand-slot{ display: none; }

/* ---------------------------------------------------------------- 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 118px 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; }
#vkBrand .vkBr-cmyk{ font-variant-numeric: tabular-nums; }
/* 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" "cmyk cmyk cmyk" "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-cmyk{ grid-area: cmyk; }
    #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); }