/* «PEDIR ACCESO» on the web's home (brief AS, 2026-10-07; core/vk/signup.php, core/signup/request.php, search/js/vk_signup.js). A button beside the top bar's Contact button - the bar is hidden under 851 px, so there
   the same button sits under the home's sentence - and a small dialog with the form. It wears the home's own look: Gilroy, the white pill of the top bar, the blue of its search button, a white card. The home has one
   look (no dark mode), so this has one: the browser's own form controls are told it is light. */

.vkAsk-open{ cursor: pointer; }
/* the top bar's own style gives an <a class="CTAcall"> its pill (search/css/style.css); this one only makes room for a longer word */
.Brand_bar ul li a.CTAcall.vkAsk-open{ width: auto; min-width: 150px; padding: 0 22px; white-space: nowrap; }
.Brand_bar ul li a.CTAcall.vkAsk-open:hover{ text-decoration: none; }

/* under 851 px the top bar is gone: the same button sits under the home's sentence, just below the hero - a blue pill, the home's own call to action */
.vkAsk-mobile{ display: none; }
@media (max-width: 850px){
    .vkAsk-mobile{ display: block; margin: 26px 0 0; text-align: center; }
    .vkAsk-mobile .vkAsk-open{
        display: inline-flex; align-items: center; justify-content: center; min-width: 190px; height: 52px; padding: 0 28px; border: 0; border-radius: 99px; background: #0000ff; color: #ffffff;
        font-family: gilroy, Montserrat, sans-serif; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; transition: background .15s ease;
    }
    .vkAsk-mobile .vkAsk-open:hover, .vkAsk-mobile .vkAsk-open:focus{ background: #0000d6; color: #ffffff; text-decoration: none; outline: 0; }
    .vkAsk-mobile .vkAsk-open:focus-visible{ outline: 3px solid #0000ff; outline-offset: 3px; }
}

/* the dialog */
.vkAsk{
    position: fixed; z-index: 100000; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto;
    background: rgba(18, 4, 52, .62); font-family: gilroy, Montserrat, sans-serif; color-scheme: light;
}
.vkAsk[hidden]{ display: none; }
body.vkAsk-lock{ overflow: hidden; }
.vkAsk-card{
    position: relative; box-sizing: border-box; width: 100%; max-width: 460px; margin: auto; padding: 34px 32px 30px; border-radius: 24px; background: #ffffff; color: #17163a;
    box-shadow: 0 24px 70px rgba(10, 0, 40, .45); text-align: left;
}
.vkAsk-card:focus{ outline: 0; }
.vkAsk-x{
    position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #f1f0f8; color: #17163a;
    font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s ease;
}
.vkAsk-x:hover{ background: #e2e0f1; }
.vkAsk-x:focus-visible{ outline: 3px solid #0000ff; outline-offset: 2px; }
.vkAsk-title{ margin: 0 40px 8px 0; font-size: 26px; font-weight: 700; line-height: 1.2; color: #17163a; }
.vkAsk-lead{ margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: #4b4a6a; }
/* the line the landing's «Publicar cambios» puts above the form (brief BK): «Para publicar tus propios hubs, pide acceso.» */
.vkAsk-note{ margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #eef1ff; color: #23308a; font-size: 14px; font-weight: 600; line-height: 1.4; }
.vkAsk-note[hidden]{ display: none; }
.vkAsk-field{ display: block; margin: 0 0 14px; }
.vkAsk-field > span{ display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #17163a; }
.vkAsk-field input, .vkAsk-field select, .vkAsk-field textarea{
    box-sizing: border-box; display: block; width: 100%; margin: 0; padding: 12px 14px; border: 1.5px solid #cfcde6; border-radius: 12px; background: #ffffff; color: #17163a;
    font-family: inherit; font-size: 16px; line-height: 1.35; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.vkAsk-field textarea{ min-height: 84px; resize: vertical; }
.vkAsk-field input:focus, .vkAsk-field select:focus, .vkAsk-field textarea:focus{ outline: 0; border-color: #0000ff; box-shadow: 0 0 0 3px rgba(0, 0, 255, .16); }
.vkAsk-field.is-bad input{ border-color: #c0261d; }
/* the honeypot: out of sight and out of the keyboard's way, not display:none (some bots skip those) */
.vkAsk-hp{ position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.vkAsk-error{ margin: 2px 0 14px; padding: 10px 14px; border-radius: 10px; background: #fdecea; color: #8a1c14; font-size: 14px; line-height: 1.4; }
.vkAsk-error[hidden]{ display: none; }
.vkAsk-send{
    display: block; width: 100%; margin: 6px 0 0; padding: 15px 20px; border: 0; border-radius: 99px; background: #0000ff; color: #ffffff; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}
.vkAsk-send:hover{ background: #0000d6; }
.vkAsk-send:focus-visible{ outline: 3px solid #0000ff; outline-offset: 3px; }
.vkAsk-send:disabled{ opacity: .6; cursor: progress; }
.vkAsk-done{ margin: 6px 0 0; padding: 18px 18px; border-radius: 14px; background: #eaf7ee; color: #14532d; font-size: 16px; font-weight: 600; line-height: 1.45; }
.vkAsk-done[hidden]{ display: none; }
.vkAsk-card.is-done .vkAsk-form, .vkAsk-card.is-done .vkAsk-lead{ display: none; }
@media (max-width: 480px){
    .vkAsk{ padding: 10px; align-items: flex-start; }
    .vkAsk-card{ padding: 28px 20px 22px; border-radius: 20px; }
    .vkAsk-title{ font-size: 23px; }
}
@media (prefers-reduced-motion: reduce){ .vkAsk-send, .vkAsk-x, .vkAsk-field input, .vkAsk-field select, .vkAsk-field textarea, .vkAsk-mobile .vkAsk-open{ transition: none; } }