/* THE SOCIAL ICONS OF A HUB (brief SI, 2026-10-22; core/vk/hub_social.php): the icons of «Editar hub» > «Redes y enlaces», and the same icons in the foot of every web, with the name on hover.
 *
 * The webs load Font Awesome 5.3.1 + 4.7, which has no X, no Threads and (5.3.1) not every other brand; 6.4.2 is in view/vendor/fontawesome/6.4.2 but its all.css redefines .fa / .fab for EVERY icon of a
 * page, so it is not loaded. These icons are drawn with a class of their own (.vkSoc .vkSoc--<key>) over a font-face of their own that points at 6.4.2's two font files - the code points are the ones of 6.4.2
 * (read from its stylesheet by the file that wrote this one: the glyph rules below are generated, not remembered). A key that is not here has no rule: core/vk/hub_social.php never writes one.
 * Loaded by the foot that draws the links (template_premium/core/design.php vkd_social_css()) and by the admin's own head (inc/header.php). */

@font-face{ font-family: "VK Social Brands"; font-style: normal; font-weight: 400; font-display: swap;
    src: url(../vendor/fontawesome/6.4.2/webfonts/fa-brands-400.woff2) format("woff2"), url(../vendor/fontawesome/6.4.2/webfonts/fa-brands-400.ttf) format("truetype"); }
@font-face{ font-family: "VK Social Solid"; font-style: normal; font-weight: 900; font-display: swap;
    src: url(../vendor/fontawesome/6.4.2/webfonts/fa-solid-900.woff2) format("woff2"), url(../vendor/fontawesome/6.4.2/webfonts/fa-solid-900.ttf) format("truetype"); }

.vkSoc{ display: inline-block; font-style: normal; font-variant: normal; text-transform: none; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.vkSoc--instagram, .vkSoc--facebook, .vkSoc--x, .vkSoc--linkedin, .vkSoc--youtube, .vkSoc--tiktok, .vkSoc--pinterest, .vkSoc--threads, .vkSoc--behance, .vkSoc--dribbble, .vkSoc--vimeo, .vkSoc--twitch, .vkSoc--github, .vkSoc--medium, .vkSoc--spotify, .vkSoc--discord, .vkSoc--whatsapp, .vkSoc--telegram{ font-family: "VK Social Brands"; font-weight: 400; }
.vkSoc--envelope, .vkSoc--globe, .vkSoc--link, .vkSoc--newspaper, .vkSoc--file, .vkSoc--up, .vkSoc--plus{ font-family: "VK Social Solid"; font-weight: 900; }
.vkSoc--instagram::before{ content: "\f16d"; }
.vkSoc--facebook::before{ content: "\f39e"; }
.vkSoc--x::before{ content: "\e61b"; }
.vkSoc--linkedin::before{ content: "\f0e1"; }
.vkSoc--youtube::before{ content: "\f167"; }
.vkSoc--tiktok::before{ content: "\e07b"; }
.vkSoc--pinterest::before{ content: "\f231"; }
.vkSoc--threads::before{ content: "\e618"; }
.vkSoc--behance::before{ content: "\f1b4"; }
.vkSoc--dribbble::before{ content: "\f17d"; }
.vkSoc--vimeo::before{ content: "\f27d"; }
.vkSoc--twitch::before{ content: "\f1e8"; }
.vkSoc--github::before{ content: "\f09b"; }
.vkSoc--medium::before{ content: "\f23a"; }
.vkSoc--spotify::before{ content: "\f1bc"; }
.vkSoc--discord::before{ content: "\f392"; }
.vkSoc--whatsapp::before{ content: "\f232"; }
.vkSoc--telegram::before{ content: "\f2c6"; }
.vkSoc--envelope::before{ content: "\f0e0"; }
.vkSoc--globe::before{ content: "\f0ac"; }
.vkSoc--link::before{ content: "\f0c1"; }
.vkSoc--newspaper::before{ content: "\f1ea"; }
.vkSoc--file::before{ content: "\f15c"; }
.vkSoc--up::before{ content: "\e09a"; }
.vkSoc--plus::before{ content: "\2b"; }
.vkSoc-img{ display: block; width: 20px; height: 20px; object-fit: contain; }

/* ---------------------------------------------------------------- THE FOOT OF A WEB: the chip, and the name above it on hover (his mockup: a green label over the chip)
   The label is the link's own name (data-vk-name; the chip also carries title and aria-label). The first chip's label starts at its left edge and the last one's ends at its right, so a long name never pushes the page wider. */
.vkSoc-a{ position: relative; }
.vkSoc-a .vkSoc{ font-size: 16px; }
.vkSoc-a::after{
    content: attr(data-vk-name); display: none; position: absolute; bottom: calc(100% + 9px); left: 50%; z-index: 30; transform: translateX(-50%);
    max-width: min(200px, 60vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
    padding: 5px 9px; border-radius: 7px; background: #2ee59d; color: #0d2a1e;
    font: 700 11.5px/1.25 "Segoe UI", system-ui, -apple-system, sans-serif; letter-spacing: 0; text-transform: none; text-align: left;
}
/* not drawn until it shows (display, not opacity: a label that is only invisible still widens the page when a chip sits near its edge) */
.vkSoc-a:hover::after, .vkSoc-a:focus-visible::after{ display: block; animation: vkSocTip .12s ease both; }
@keyframes vkSocTip{ from{ opacity: 0; } to{ opacity: 1; } }
.vkSoc-a--first::after{ left: 0; transform: none; }
.vkSoc-a--last::after{ left: auto; right: 0; transform: none; }
.vkSoc-a--first.vkSoc-a--last::after{ left: 50%; right: auto; transform: translateX(-50%); }
/* a phone has no pointer to rest on a chip: the name stays on the chip's title and aria-label, and no label can push the page wider */
@media (max-width: 640px), (hover: none){ .vkSoc-a::after{ display: none !important; } }

/* Biblioteca (template_premium/core/bib.php bib_footer_html()): a round chip of the head's, the green of the mockup under the pointer */
body.vkWeb .vkBib-footLinks .vkSoc-a.vkBib-footSoc{ width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
body.vkWeb .vkBib-footLinks .vkSoc-a.vkBib-footSoc:hover, body.vkWeb .vkBib-footLinks .vkSoc-a.vkBib-footSoc:focus-visible{ border-color: #2ee59d; color: #2ee59d !important; }
@media (prefers-reduced-motion: reduce){ .vkSoc-a:hover::after, .vkSoc-a:focus-visible::after{ animation: none; } }

/* ---------------------------------------------------------------- THE WINDOW «Editar hub» > «Redes y enlaces» (view/js/vk_social.js) */
.vkSocEdit{ --vkSoc-ok: #12a572; --vkSoc-ok-tint: rgba(18, 165, 114, .10); --vkSoc-ok-glow: rgba(18, 165, 114, .18); }
html[data-theme="dark"] .vkSocEdit{ --vkSoc-ok: #2ee59d; --vkSoc-ok-tint: rgba(46, 229, 157, .10); --vkSoc-ok-glow: rgba(46, 229, 157, .18); }
#modify_company_modal .vkSocEdit{ float: none; clear: both; display: flow-root; margin: 6px 0 20px; container-type: inline-size; }
#modify_company_modal .vkSocEdit-title{ float: none; width: auto; display: block; margin: 8px 0 2px; font-size: 15px; font-weight: 700; color: var(--vk-text, #16161a); }
#modify_company_modal .vkSocEdit-help{ clear: both; margin: 0 0 14px; font-size: 12px; line-height: 1.45; color: var(--vk-soft-6b6a76, #6b6a76); }
#modify_company_modal .vkSocRow{ display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
#modify_company_modal .vkSocRow-key{
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px 0 13px; margin: 0; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--vk-line-dddce5, #dddce5); background: var(--vk-field, #efeef4); color: var(--vk-text, #16161a); font-size: 18px; line-height: 1;
}
#modify_company_modal .vkSocRow-key .vkSocRow-glyph{ display: inline-flex; align-items: center; justify-content: center; min-width: 20px; min-height: 20px; }
#modify_company_modal .vkSocRow-car{ font-size: 10px; color: var(--vk-soft-6b6a76, #6b6a76); }
#modify_company_modal .vkSocRow-key:hover{ border-color: var(--vk-line-strong, #cfcdd9); }
#modify_company_modal .vkSocRow-key[aria-expanded="true"], #modify_company_modal .vkSocRow-key:focus-visible{ outline: 0; border-color: var(--vkSoc-ok); box-shadow: 0 0 0 3px var(--vkSoc-ok-glow); }
#modify_company_modal .vkSocRow .form-control{ float: none; width: auto; min-width: 0; height: 42px; margin: 0; border-radius: 12px; font-size: 13.5px; }
#modify_company_modal .vkSocRow-url{ flex: 1 1 auto; }
#modify_company_modal .vkSocRow-label{ flex: 0 0 32%; }
#modify_company_modal .vkSocRow-x{
    flex: 0 0 auto; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
    color: var(--vk-soft-6b6a76, #6b6a76); font-size: 22px; line-height: 1;
}
#modify_company_modal .vkSocRow-x:hover, #modify_company_modal .vkSocRow-x:focus-visible{ background: var(--vk-fieldh, #e9e8ee); color: var(--vk-text, #16161a); outline: 0; }

#modify_company_modal .vkSocPick{
    position: relative; margin: 6px 0 14px; padding: 8px 14px 14px; border: 1px solid var(--vk-line-dddce5, #dddce5); border-radius: 16px; background: var(--vk-raised, #fbfafd);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}
#modify_company_modal .vkSocPick[hidden]{ display: none !important; }
#modify_company_modal .vkSocEdit-file{ display: none !important; }                      /* the app's input[type=file] rule shows it as a block even with [hidden] */
#modify_company_modal .vkSocPick::before{
    content: ""; position: absolute; top: -7px; left: 22px; width: 12px; height: 12px; transform: rotate(45deg);
    border-left: 1px solid var(--vk-line-dddce5, #dddce5); border-top: 1px solid var(--vk-line-dddce5, #dddce5); background: var(--vk-raised, #fbfafd);
}
#modify_company_modal .vkSocPick-group{ margin: 10px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vk-soft-6b6a76, #6b6a76); }
#modify_company_modal .vkSocPick-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
#modify_company_modal .vkSocTile{
    display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0; padding: 9px 2px 7px; border: 1px solid transparent; border-radius: 10px; background: transparent;
    color: var(--vk-text, #16161a); font-size: 19px; line-height: 1; cursor: pointer;
}
#modify_company_modal .vkSocTile span{ font-size: 10.5px; line-height: 1.2; color: var(--vk-soft-6b6a76, #6b6a76); white-space: nowrap; }
#modify_company_modal .vkSocTile:hover, #modify_company_modal .vkSocTile:focus-visible{ background: var(--vk-fieldh, #e9e8ee); outline: 0; }
#modify_company_modal .vkSocTile.is-sel{ border-color: var(--vkSoc-ok); background: var(--vkSoc-ok-tint); }
#modify_company_modal .vkSocTile.is-sel span{ color: var(--vkSoc-ok); }
#modify_company_modal .vkSocTile--up{ border: 1px dashed var(--vk-line-strong, #cfcdd9); }
#modify_company_modal .vkSocPick-msg{ min-height: 16px; margin: 8px 2px 0; font-size: 12px; line-height: 1.4; color: var(--vk-soft-6b6a76, #6b6a76); }
#modify_company_modal .vkSocEdit-add{
    display: inline-flex; align-items: center; gap: 8px; height: 38px; margin: 2px 0 0; padding: 0 16px; border: 1px dashed var(--vk-line-strong, #cfcdd9); border-radius: 12px; background: transparent;
    color: var(--vk-text-2c2b33, #2c2b33); font-size: 13px; font-weight: 600; cursor: pointer;
}
#modify_company_modal .vkSocEdit-add:hover:not(:disabled), #modify_company_modal .vkSocEdit-add:focus-visible{ border-color: var(--vkSoc-ok); color: var(--vkSoc-ok); outline: 0; }
#modify_company_modal .vkSocEdit-add:disabled{ opacity: .5; cursor: not-allowed; }
#modify_company_modal .vkSocEdit-add .vkSoc{ font-size: 12px; }

/* the column of the window is not always wide (a phone): the name goes under the address */
@container (max-width: 400px){
    #modify_company_modal .vkSocRow{ flex-wrap: wrap; }
    #modify_company_modal .vkSocRow-url{ flex: 1 1 120px; }
    #modify_company_modal .vkSocRow-label{ flex: 1 1 100%; order: 5; }
    #modify_company_modal .vkSocRow-x{ order: 4; }
}