/* THE NOTIFICATION BELL (2026-10-02, brief M). His words: "Coloca en el admin un icono de nodificaciones en el header en modo dropbown para todo tipo e notificaciones con ver mas y
 * aprovarlas o rechazarlas en cada una."
 *
 * Markup: inc/header.php (the bell and its dropdown, after «Publicar cambios») and modals/modal_template/modal_bell.php (the «Ver más» window); behaviour: view/js/vk_bell.js, which draws the
 * lines it gets from core/sync/bell.php. The bell is a round button of the height of «Publicar cambios», drawn with no count; the count is a small badge on it. The dropdown hangs under it.
 *
 * Under 1181 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 (style.css) - so there the bell is the icon alone, white
 * on that blue, beside «Publicar cambios» (whose own rules for that corner start at 1125 px, vk_settings.css: between 1126 and 1180 it is not in the corner yet - not this file's);
 * and on a phone (767 px and under) the dropdown is a sheet across the whole width.
 *
 * style.css gives every button of the header a floated 67 px box, 21 px text, a blue background and a blue focus (`header .secondline button`, and `:focus`): every button of the dropdown says
 * the properties it needs with that specificity and its `:focus` too. The icons are Font Awesome solid names that exist in both 4.7 and 5 (the header loads both and 5 wins `.fa`): an "-o" name
 * has no glyph there.
 */

header .secondline .vkBellWrap{ float: right; position: relative; display: inline-block; margin: 20px 24px 0 0; line-height: 0; }   /* on the right, left of the «select all» (2026-10-02 night, his drawing) */
/* ...with room between them and the box (his "separa el bloque del icono y el publicar del checkbox"), and the dropdown opening LEFTWARDS from the bell's
   right edge (right: 0 above): at the left it ran out of the window once the bell sat on the right - his "vigila con esto!!! que no se ve!!!" */
header .secondline .vkBellBtn,
header .secondline .vkBellBtn:focus{
    float: none; position: relative; width: 40px; height: 40px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--vk-line, #e4e3ea); border-radius: 50%; background: var(--vk-field-f3f2f6, #f3f2f6); color: var(--vk-soft-8a8995, #8a8995); font-size: 17px; line-height: 1; cursor: pointer; box-shadow: none; outline: 0;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
header .secondline .vkBellBtn .fa{ font-size: 17px; line-height: 1; }
header .secondline .vkBellBtn:hover,
header .secondline .vkBellBtn[aria-expanded="true"]{ background: var(--vk-fieldh, #e9e8ee); color: var(--vk-text, #16161a); }
header .secondline .vkBellBtn[data-has="1"],
header .secondline .vkBellBtn[data-has="1"]:focus{ background: var(--vk-surface, #ffffff); border-color: var(--vk-text, #16161a); color: var(--vk-text, #16161a); }
header .secondline .vkBellBtn[data-has="1"]:hover,
header .secondline .vkBellBtn[data-has="1"][aria-expanded="true"]{ background: var(--vk-inv, #16161a); color: #ffffff; }
header .secondline .vkBellBtn:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 2px; }
header .secondline .vkBellCount{
    position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--vk-surface, #ffffff); border-radius: 10px; background: #d93636; color: #ffffff; font: 700 11px/1 'Montserrat', sans-serif; letter-spacing: 0;
}
header .secondline .vkBellCount[hidden]{ display: none; }
@media (prefers-reduced-motion: reduce){ header .secondline .vkBellBtn{ transition: none; } }

/* the dropdown */
:is(header .secondline, .vkBellHost) .vkBellPanel{
    position: absolute; z-index: 100000; top: calc(100% + 10px); right: 0; left: auto; width: 400px; max-width: calc(100vw - 24px); max-height: min(600px, calc(100vh - 110px));
    display: flex; flex-direction: column; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 16px; background: var(--vk-surface, #ffffff); box-shadow: 0 14px 40px rgba(22, 22, 26, .20);
    font-family: 'Montserrat', sans-serif; font-size: 13px; line-height: 1.4; color: var(--vk-text, #16161a); text-align: left; overflow: hidden;
}
:is(header .secondline, .vkBellHost) .vkBellPanel[hidden]{ display: none; }
:is(header .secondline, .vkBellHost) .vkBellPanel:focus{ outline: 0; }
.vkBell-head{ flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px 16px; }
.vkBell-title{ margin: 0; font-size: 16px; font-weight: 700; color: var(--vk-text, #16161a); }

/* every button of ours inside (not the window's own ×): the header's rule is reset, then each says what it is */
:is(header .secondline, .vkBellHost) .vkBellPanel button,
:is(header .secondline, .vkBellHost) .vkBellPanel button:focus,
#vkBellMore .vkBellM-btn,
#vkBellMore .vkBellM-btn:focus,
#vkBellMore .vkBell-acts button,
#vkBellMore .vkBell-acts button:focus{
    float: none; width: auto; height: auto; margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center;
    text-shadow: none; white-space: nowrap; box-shadow: none; outline: 0; border-radius: 8px; cursor: pointer;
}
:is(header .secondline, .vkBellHost) .vkBellPanel button:focus-visible,
#vkBellMore .vkBellM-btn:focus-visible,
#vkBellMore .vkBell-acts button:focus-visible,
#vkBellMore .clos:focus-visible,
.vkBell-list a:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1) !important; outline-offset: 2px; }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-refresh,
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-refresh:focus{
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--vk-line-dddce5, #dddce5); background: var(--vk-surface, #ffffff); color: var(--vk-soft-3b3a46, #3b3a46); font-size: 14px;
}
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-refresh:hover{ background: var(--vk-inv, #16161a); border-color: var(--vk-text, #16161a); color: #ffffff; }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-refresh:disabled{ opacity: .55; cursor: progress; }
.vkBell-refresh.is-busy .fa{ animation: vkBellSpin 1s linear infinite; }
@keyframes vkBellSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .vkBell-refresh.is-busy .fa, #vkBellMore .vkBellM-btn.is-busy .fa{ animation: none; } }

/* a sentence about what just happened (a verdict applied), said to a screen reader too */
.vkBell-say{ margin: 0; padding: 0 16px 8px; font-size: 12.5px; font-weight: 600; color: var(--vk-ok, #1d7a3e); }
.vkBell-say:empty{ display: none; }
.vkBell-say.is-wait{ color: var(--vk-warn-7a4d00, #7a4d00); }
.vkBell-say.is-bad{ color: var(--vk-err, #b3261e); }

/* the lines */
.vkBell-list{ flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vk-line-soft, #efeef4); }
.vkBell-item{ margin: 0; padding: 12px 16px; display: flex; align-items: flex-start; gap: 12px; border-top: 1px solid var(--vk-line-soft, #efeef4); background: var(--vk-surface, #ffffff); position: relative; }
.vkBell-item:first-child{ border-top: 0; }
.vkBell-item.is-unseen{ background: var(--vk-accent-tint-f6f8ff, #f6f8ff); }
.vkBell-item.is-decision{ background: var(--vk-warn-tint-fffaf0, #fffaf0); }
.vkBell-item.is-applying{ opacity: .85; }
.vkBell-ico{ flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--vk-field-f3f2f6, #f3f2f6); color: var(--vk-soft, #5f5e6b); font-size: 14px; }
.vkBell-item.is-decision .vkBell-ico{ background: var(--vk-warn-tint-fff0cf, #fff0cf); color: var(--vk-warn-8a5a00, #8a5a00); }
.vkBell-item.is-unseen .vkBell-ico{ background: var(--vk-accent-tint, #e3eaff); color: var(--vk-link, #0f52ff); }
.vkBell-body{ flex: 1 1 auto; min-width: 0; }
.vkBell-text{ margin: 0; font-size: 13px; line-height: 1.45; color: var(--vk-text, #16161a); overflow-wrap: anywhere; }
.vkBell-text b{ font-weight: 700; }
.vkBell-text a{ color: var(--vk-violet-4f1697, #4f1697); font-weight: 700; text-decoration: none; }
.vkBell-text a:hover{ text-decoration: underline; }
.vkBell-quote{ margin: 3px 0 0; padding-left: 9px; border-left: 3px solid var(--vk-line-dddce5, #dddce5); font-size: 12.5px; line-height: 1.4; color: var(--vk-soft-3b3a46, #3b3a46); overflow-wrap: anywhere; }
/* what a change of a hub's colours and links would change (brief W): one sentence a line */
.vkBell-changes{ list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; line-height: 1.4; color: var(--vk-soft-3b3a46, #3b3a46); }
.vkBell-changes li{ position: relative; margin: 1px 0; padding: 0 0 0 13px; overflow-wrap: anywhere; }
.vkBell-changes li::before{ content: ''; position: absolute; left: 3px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--vk-faint, #9a99a6); }
.vkBell-meta{ margin: 3px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--vk-soft-6b6a76, #6b6a76); overflow-wrap: anywhere; }
.vkBell-meta a{ color: var(--vk-soft-6b6a76, #6b6a76); text-decoration: underline; text-decoration-color: var(--vk-faint-c9c8d2, #c9c8d2); }
.vkBell-meta a:hover{ color: var(--vk-text, #16161a); }
.vkBell-warn{ margin: 3px 0 0; font-size: 11.5px; font-weight: 700; line-height: 1.4; color: var(--vk-err, #b3261e); }
.vkBell-acts{ margin: 9px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-acts button,
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-acts button:focus,
#vkBellMore .vkBell-acts button,
#vkBellMore .vkBell-acts button:focus{ height: 32px; padding: 0 16px; border: 1px solid var(--vk-text, #16161a); background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a); font-size: 12px; }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-acts button:hover:not(:disabled),
#vkBellMore .vkBell-acts button:hover:not(:disabled){ background: var(--vk-inv, #16161a); color: #ffffff; }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-acts .vkBell-yes,
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-acts .vkBell-yes:focus,
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-acts .vkBell-signups,
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-acts .vkBell-signups:focus,
#vkBellMore .vkBell-acts .vkBell-yes,
#vkBellMore .vkBell-acts .vkBell-yes:focus,
#vkBellMore .vkBell-acts .vkBell-signups,
#vkBellMore .vkBell-acts .vkBell-signups:focus{ border-color: #0f52ff; background: #0f52ff; color: #ffffff; }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-acts .vkBell-yes:hover:not(:disabled),
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-acts .vkBell-signups:hover:not(:disabled),
#vkBellMore .vkBell-acts .vkBell-yes:hover:not(:disabled),
#vkBellMore .vkBell-acts .vkBell-signups:hover:not(:disabled){ border-color: #0b3fd0; background: #0b3fd0; }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-acts button:disabled,
#vkBellMore .vkBell-acts button:disabled{ opacity: .5; cursor: not-allowed; }
.vkBell-state{ margin: 9px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--vk-warn-7a4d00, #7a4d00); }
.vkBell-state[hidden]{ display: none; }
.vkBell-state::before{ content: ''; flex: 0 0 12px; width: 12px; height: 12px; border: 2px solid var(--vk-warn-e09a1a, #e09a1a); border-right-color: transparent; border-radius: 50%; animation: vkBellSpin .9s linear infinite; }
.vkBell-state.is-plain::before{ display: none; }
@media (prefers-reduced-motion: reduce){ .vkBell-state::before{ animation: none; border-right-color: var(--vk-warn-e09a1a, #e09a1a); } }
.vkBell-empty{ margin: 0; padding: 22px 16px; text-align: center; font-size: 13px; color: var(--vk-soft-6b6a76, #6b6a76); list-style: none; border-top: 0; }

.vkBell-quiet{ flex: 0 0 auto; margin: 0; padding: 9px 16px; border-top: 1px solid var(--vk-line-soft, #efeef4); background: var(--vk-raised, #fbfafd); font-size: 12px; line-height: 1.4; color: var(--vk-soft-6b6a76, #6b6a76); }
.vkBell-quiet[hidden]{ display: none; }
.vkBell-foot{ flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--vk-line-soft, #efeef4); background: var(--vk-surface, #ffffff); }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-foot button,
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-foot button:focus{ padding: 8px 6px; border: 0; background: none; color: var(--vk-violet-4f1697, #4f1697); font-size: 12.5px; }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-foot button:hover:not(:disabled){ text-decoration: underline; background: none; color: var(--vk-violet-4f1697, #4f1697); }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-foot button:disabled{ opacity: .45; cursor: default; text-decoration: none; }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-foot .vkBell-more,
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-foot .vkBell-more:focus{ height: 34px; padding: 0 16px; border: 1px solid var(--vk-text, #16161a); color: var(--vk-text, #16161a); }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-foot .vkBell-more:hover:not(:disabled){ background: var(--vk-inv, #16161a); color: #ffffff; text-decoration: none; }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-foot button[hidden]{ display: none; }

/* the white header is a 66 px blue corner from 1180 px down (style.css; «Publicar cambios» follows it from 1125, see vk_settings.css): the icon alone, white on that blue, at right: 52px - beside
   «Publicar cambios», which sits at right: 8px */
@media (max-width: 1180px){
    header .secondline .vkBellWrap{ position: fixed; z-index: 1003; top: 4px; right: 52px; float: none; margin: 0; }
    header .secondline .vkBellBtn,
    header .secondline .vkBellBtn:focus{ border-color: transparent; background: transparent; color: rgba(255, 255, 255, .45); }
    header .secondline .vkBellBtn:hover,
    header .secondline .vkBellBtn[aria-expanded="true"]{ background: rgba(255, 255, 255, .18); color: #ffffff; }
    header .secondline .vkBellBtn[data-has="1"],
    header .secondline .vkBellBtn[data-has="1"]:focus{ border-color: transparent; background: transparent; color: #ffffff; }
    header .secondline .vkBellBtn[data-has="1"]:hover,
    header .secondline .vkBellBtn[data-has="1"][aria-expanded="true"]{ background: rgba(255, 255, 255, .22); color: #ffffff; }
    header .secondline .vkBellCount{ top: -2px; right: -2px; border-color: var(--vk-brand, #0f52ff); }
    /* the header is a 66 px corner here and carries a transform, so a fixed child is placed against its right edge = the window's */
    :is(header .secondline, .vkBellHost) .vkBellPanel{ position: fixed; top: 52px; right: 8px; left: auto; width: min(400px, calc(100vw - 16px)); max-height: calc(100vh - 132px); }      /* it ends above the menu button at the foot of the screen */
}
/* a phone: a sheet across the whole width */
@media (max-width: 767px){
    :is(header .secondline, .vkBellHost) .vkBellPanel{ right: 0; width: 100vw; max-width: 100vw; border-width: 0 0 1px; border-radius: 0 0 18px 18px; }
    .vkBell-item{ padding: 14px 16px; }
    :is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-acts button,
    :is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-acts button:focus{ height: 40px; padding: 0 20px; font-size: 13px; }
    :is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-refresh,
    :is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-refresh:focus{ width: 40px; height: 40px; }
    .vkBell-foot{ padding: 10px 12px; }
}

/* «Ver más»: the whole list, paged, in a window of the family of «Web remota» (vk_settings.css #vkRemote). It sits inside the old .modalcommon, whose rules float and size every button and
   label - hence #vkBellMore on everything. */
#vkBellMore .modal-dialog{ width: min(760px, calc(100vw - 32px)); max-width: none; }
#vkBellMore .modal-content{ padding: 32px 36px 26px; font-family: 'Montserrat', sans-serif; color: var(--vk-text, #16161a); text-align: left; }
#vkBellMore .vkBellM-head{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 4px; padding-right: 38px; }
#vkBellMore h1{ float: none; margin: 0; font-size: 24px; font-weight: 700; }
#vkBellMore .vkBellM-sum{ display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 13px; background: var(--vk-field-f3f2f6, #f3f2f6); font-size: 12px; font-weight: 600; color: var(--vk-soft-3b3a46, #3b3a46); }
#vkBellMore .vkBellM-sum:empty{ display: none; }
#vkBellMore .vkBellM-sum.is-wait{ background: var(--vk-warn-tint, #fff6e5); color: var(--vk-warn-7a4d00, #7a4d00); }
#vkBellMore .vkBellM-lead{ margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--vk-soft, #5f5e6b); }
#vkBellMore .vkBellM-bar{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
#vkBellMore .vkBellM-btn,
#vkBellMore .vkBellM-btn:focus{ height: 40px; padding: 0 18px; border: 1px solid var(--vk-text, #16161a); background: var(--vk-surface, #ffffff); color: var(--vk-text, #16161a); font-size: 13px; border-radius: 10px; }
#vkBellMore .vkBellM-btn:hover:not(:disabled){ background: var(--vk-inv, #16161a); color: #ffffff; }
#vkBellMore .vkBellM-btn:disabled{ opacity: .45; cursor: not-allowed; }
#vkBellMore .vkBellM-btn.is-busy .fa{ animation: vkBellSpin 1s linear infinite; }
#vkBellMore .vkBell-say{ padding: 0 0 10px; }
#vkBellMore .vkBell-list{ max-height: none; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 14px; overflow: hidden; }
#vkBellMore .vkBell-item{ padding: 14px 18px; }
#vkBellMore .vkBell-quiet{ margin: 12px 0 0; border: 1px solid var(--vk-line, #e4e3ea); border-radius: 12px; }
#vkBellMore .vkBellM-pager{ display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 0; }
#vkBellMore .vkBellM-pager[hidden]{ display: none; }
#vkBellMore .vkBellM-page{ font-size: 12.5px; font-weight: 600; color: var(--vk-soft-3b3a46, #3b3a46); }
@media (max-width: 640px){
    #vkBellMore .modal-content{ padding: 24px 16px 20px; }
    #vkBellMore .vkBellM-btn{ flex: 1 1 auto; }
    #vkBellMore .vkBell-item{ padding: 12px 12px; }
}

/* ---------------------------------------------------------------- A PERSON'S BELL (2026-10-03, brief Z)
 *
 * The same bell, in the person's own header (inc/header.php, .vkBellWrap[data-bell="person"|"peek"]), in the same place, and the same window. Where a person's header differs it keeps the bell where it is:
 * on the blue corner (1180 px and under) the «select all» box sits at the right edge, as it does for the administrator, and the bell stays beside it at right: 52px. Two things are theirs:
 *  - a notice is read, not decided: a line that is not seen yet is clickable (a click marks it seen), and a notice that says «no ha entrado» wears the colour of a refusal;
 *  - the foot holds the switch «Recibir los avisos por correo» (a person's on the web only, and only when they have a real address) and, through «Entrar», a line that says whose notices these are.
 * The colour of the switch is the hub's (--vk-brand, brief I) when the person is in one; the app's blue otherwise. Everything is in the same specificity as the rest of the dropdown, because style.css
 * gives every button of the header a floated 67 px box (see the top of this file).
 */
.vkBellWrap[data-bell="person"] .vkBell-item.is-unseen,
#vkBellMore[data-bell="person"] .vkBell-item.is-unseen{ cursor: pointer; }
.vkBell-item[data-kind$="_out"] .vkBell-ico{ background: var(--vk-err-tint, #fdecea); color: var(--vk-err, #b3261e); }
.vkBell-peek{ flex: 0 0 auto; margin: 0; padding: 0 16px 10px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--vk-soft, #5f5e6b); }
#vkBellMore .vkBell-peek{ padding: 0 0 10px; }
.vkBell-foot{ flex-wrap: wrap; }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-foot .vkBell-more{ margin-left: auto; }      /* with no «Marcar todo como visto» before it (through «Entrar») it still sits at the right */
.vkBell-mail{ flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; padding: 4px 4px 10px; border-bottom: 1px solid var(--vk-line-soft, #efeef4); }
.vkBell-mail[hidden]{ display: none; }
.vkBell-mailtext{ font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--vk-soft-3b3a46, #3b3a46); }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-mailsw,
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-mailsw:focus,
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-mailsw:hover:not(:disabled){
    position: relative; flex: 0 0 40px; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 12px; background: var(--vk-line-strong-c9c8d2, #c9c8d2); box-shadow: none; transition: background .15s ease;
}
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-mailsw[aria-checked="true"],
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-mailsw[aria-checked="true"]:focus,
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-mailsw[aria-checked="true"]:hover:not(:disabled){ background: var(--vk-brand, #0f52ff); }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-mailsw:disabled{ opacity: .6; cursor: progress; }
:is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-mailsw:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1) !important; outline-offset: 2px; }
.vkBell-mailknob{ position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(22, 22, 26, .25); transition: transform .15s ease; }
.vkBell-mailsw[aria-checked="true"] .vkBell-mailknob{ transform: translateX(16px); }
@media (prefers-reduced-motion: reduce){
    :is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-mailsw, .vkBell-mailknob{ transition: none; }
}
@media (max-width: 767px){
    .vkBell-peek{ padding: 0 16px 12px; }
    :is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-mailsw,
    :is(header .secondline, .vkBellHost) .vkBellPanel .vkBell-mailsw:focus{ width: 46px; height: 28px; flex-basis: 46px; border-radius: 14px; }
    .vkBell-mailknob{ top: 4px; left: 4px; width: 20px; height: 20px; }
    .vkBell-mailsw[aria-checked="true"] .vkBell-mailknob{ transform: translateX(18px); }
}

/* ---------------------------------------------------------------- THE BELL IN AN OPEN FILE'S DETAIL (brief BI, 2026-10-09)
 *
 * The detail (view/css/style.css .watch_item_modal, a layer over the whole page) covers the header, and the bell with it (measured at 1875 px: elementFromPoint at the bell's centre was the detail's
 * stage). So the detail's top band carries the same bell, left of its close button: core/vk/notice.php vk_bell_detail_html() draws it (the same radar, view/css/vk_radar.css names .vkBellDetail beside the
 * header; the same .vkBellBtn, so view/js/vk_bell.js paints its count and state from the one answer it holds) and the library's and the vault's detail both write it in front of their .modal_accept.
 * It scrolls with the layer, as the close button does. The close button is 40 px at right: 16px (top: 15px; from 800 px down it rises to top: -52px, over the stage); the bell is 40 px and sits 8 px from it.
 *
 * THE PANEL IS THE SAME ONE (#vkBellPanel). Pressed from here it leaves the header and hangs from #vkBellHost, a point of the body above the detail (the layer is z-index 9999999, and the header's own 120
 * holds anything inside the header under it): view/js/vk_bell.js moves it there, puts it under this bell (inline top and right, as the bell and the window are where they are) and moves it back home when it
 * closes. Every rule of the dropdown above names `.vkBellHost` beside the header, so it looks and works exactly as it does there; a window the panel opens («Ver más», the requests for access) is raised
 * over the detail the same way (html.vkBell-over).
 */
.watch_item_modal .vkBellDetail{ position: absolute; z-index: 2; top: 15px; right: 64px; width: 40px; height: 40px; margin: 0; padding: 0; line-height: 0; }
@media (max-width: 800px){
    .watch_item_modal .vkBellDetail{ top: -52px; right: 60px; }      /* the close button's own move (style.css, max-width 800px), 8 px of air between them */
}
.vkBellHost{ position: fixed; z-index: 10000030; top: 0; left: 0; width: 0; height: 0; margin: 0; padding: 0; overflow: visible; }
.vkBellHost .vkBellPanel.vkBellPanel{ position: fixed; z-index: 10000030; }
html.vkBell-over .modal-backdrop{ z-index: 10000010 !important; }
html.vkBell-over .modal{ z-index: 10000020 !important; }