/* THE BELL IS A RADAR (2026-10-07). His words, with a picture of one: "Cambia el diseño de la campana de notificaciones que tenemos a esta que te adjunto. És un ratar y la abuja tiene que
 * ir dando vueltas en el sentido de las agujas del reloj, con movimiento de adija de radar, en el mismo color que es. Pero cuando recibe una notificacion su estado activo o avio es el mismo diseño
 * pero con tono azul y con un glow ligero alrededor del boton. Construyelo que sea igual 100%. En css."
 *
 * The markup is inside the bell's own button (inc/header.php .vkBellBtn): view/js/vk_bell.js, the dropdown and data-has (1 = something waits) work as they did. Every measure here is a share
 * of --rd, the button's diameter, taken from his picture (a 414 px radar): the screen is 77.3 % of it, its sunken rim to 84 %, the dark bezel lit from above to the edge; on the screen four
 * rings (33 / 54 / 75.5 / 97.5 % of its radius), a cross, ticks every 6.9 degrees near the edge, a lighter disc and the bell in the middle, five blips, and the sweep - a bright line with its
 * fading trail behind it - turning clockwise. Teal while nothing waits; the same in blue, with a soft glow, when something does. The count stays in the button's title and label.
 */

html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn,
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn:focus,
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn:hover,
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn[aria-expanded="true"],
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn[data-has="1"],
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn[data-has="1"]:focus,
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn[data-has="1"]:hover,
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn[data-has="1"][aria-expanded="true"]{
    /* the teal of his picture (sampled), as r, g, b */
    --rd-disc: 35, 85, 88;        /* the middle, round the bell: the field itself (his picture has no lighter disc) */
    --rd-f1: 35, 85, 88;          /* the field, from the centre ... */
    --rd-f2: 32, 76, 80;
    --rd-f3: 27, 63, 67;
    --rd-f4: 21, 46, 50;          /* ... to the edge */
    --rd-rim: 6, 20, 23;
    --rd-line: 120, 228, 218;     /* rings, cross, ticks, the bell */
    --rd-sweep: 105, 236, 230;    /* the trail */
    --rd-hot: 168, 255, 252;      /* the sweep's line and the blips */
    --rd-glow: 0 0 0 0 transparent;
    width: var(--rd, 72px); height: var(--rd, 72px); min-width: 0; padding: 0; margin: 0; float: none;
    display: inline-block; position: relative; border: 0; border-radius: 50%; line-height: 0; cursor: pointer; outline: 0; color: inherit;
    /* the bezel's outer edge: lit at the top, dark at the foot */
    background: linear-gradient(180deg, #5a5b6a 0%, #3d3e49 30%, #24252c 62%, #141418 100%);
    box-shadow: var(--rd-glow), 0 calc(var(--rd, 72px) * .03) calc(var(--rd, 72px) * .09) rgba(0, 0, 0, .45);
    transition: box-shadow .35s ease, filter .2s ease;
}
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn[data-has="1"],
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn[data-has="1"]:focus,
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn[data-has="1"]:hover,
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn[data-has="1"][aria-expanded="true"]{
    /* something waits: the same radar in an electric blue, and a glow that beats - its strength up and down a little (his words, 2026-10-07: "el azul ha de ser mas
       electrico y ha de bombear su glow, subiendo y bajando la intenidad ligeramente") */
    --rd-disc: 16, 84, 222;
    --rd-f1: 16, 84, 222;
    --rd-f2: 13, 70, 196;
    --rd-f3: 10, 54, 160;
    --rd-f4: 7, 36, 116;
    --rd-rim: 3, 12, 46;
    --rd-line: 120, 205, 255;
    --rd-sweep: 40, 160, 255;
    --rd-hot: 175, 232, 255;
    animation: vkRadarBeat 2.4s ease-in-out infinite;
}
@keyframes vkRadarBeat{
    0%, 100%{ box-shadow: 0 0 calc(var(--rd, 72px) * .16) rgba(24, 140, 255, .5), 0 0 0 1px rgba(90, 175, 255, .45), 0 calc(var(--rd, 72px) * .03) calc(var(--rd, 72px) * .09) rgba(0, 0, 0, .45); }
    50%{ box-shadow: 0 0 calc(var(--rd, 72px) * .3) rgba(24, 150, 255, .85), 0 0 0 1px rgba(130, 200, 255, .7), 0 calc(var(--rd, 72px) * .03) calc(var(--rd, 72px) * .09) rgba(0, 0, 0, .45); }
}
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn:hover,
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn[aria-expanded="true"]{ filter: brightness(1.12); }
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn:focus-visible{ outline: 2px solid var(--vk-violet, #6e1fd1); outline-offset: 3px; }
html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn .vkBellCount{ display: none; }      /* the count is in the title and the label (view/js/vk_bell.js) */

/* the body of the bezel, inside its edge */
.vkRadar{ position: absolute; inset: 1.4%; border-radius: 50%; pointer-events: none;
    background: linear-gradient(180deg, #41424f 0%, #393a46 22%, #29292f 50%, #1a1b20 78%, #151519 100%); }
/* the sunken rim of the screen: dark above, catching the light below */
.vkRadar-bezel{ position: absolute; inset: 6.8%; border-radius: 50%;
    background: linear-gradient(180deg, #121217 0%, #1c1d23 40%, #34363f 82%, #3c3e48 100%); }
/* the screen */
.vkRadar-scope{
    --rdw: max(.5px, calc(var(--rd, 72px) * .0026));      /* half a line's width: 1 px at his 414 px... 2 px drawn */
    position: absolute; inset: 3.9%; border-radius: 50%; overflow: hidden;
    background:
        /* the cross */
        linear-gradient(90deg, transparent calc(50% - var(--rdw)), rgba(var(--rd-line), .42) calc(50% - var(--rdw)), rgba(var(--rd-line), .42) calc(50% + var(--rdw)), transparent calc(50% + var(--rdw))),
        linear-gradient(0deg, transparent calc(50% - var(--rdw)), rgba(var(--rd-line), .42) calc(50% - var(--rdw)), rgba(var(--rd-line), .42) calc(50% + var(--rdw)), transparent calc(50% + var(--rdw))),
        /* the rings */
        radial-gradient(circle closest-side,
            transparent calc(33% - var(--rdw) - .5px), rgba(var(--rd-line), .3) calc(33% - var(--rdw)), rgba(var(--rd-line), .3) calc(33% + var(--rdw)), transparent calc(33% + var(--rdw) + .5px),
            transparent calc(54% - var(--rdw) - .5px), rgba(var(--rd-line), .28) calc(54% - var(--rdw)), rgba(var(--rd-line), .28) calc(54% + var(--rdw)), transparent calc(54% + var(--rdw) + .5px),
            transparent calc(75.5% - var(--rdw) - .5px), rgba(var(--rd-line), .3) calc(75.5% - var(--rdw)), rgba(var(--rd-line), .3) calc(75.5% + var(--rdw)), transparent calc(75.5% + var(--rdw) + .5px),
            transparent calc(97.3% - var(--rdw) - .5px), rgba(var(--rd-line), .45) calc(97.3% - var(--rdw)), rgba(var(--rd-line), .45) calc(97.3% + var(--rdw)), transparent calc(97.3% + var(--rdw) + .5px)),
        /* the field, darker to the edge, with the lighter disc in the middle */
        radial-gradient(circle closest-side,
            rgb(var(--rd-disc)) 0, rgb(var(--rd-disc)) 11.5%, rgb(var(--rd-f1)) 13.5%, rgb(var(--rd-f1)) 30%,
            rgb(var(--rd-f2)) 48%, rgb(var(--rd-f3)) 70%, rgb(var(--rd-f4)) 90%, rgb(var(--rd-f4)) 95%, rgb(var(--rd-rim)) 100%);
    box-shadow: inset 0 0 calc(var(--rd, 72px) * .06) rgba(0, 0, 0, .55);
}
/* the ticks round the edge */
.vkRadar-scope::before{
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(var(--rd-line), .38) 0deg .5deg, transparent .5deg 6.92deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 89%, #000 89.5%, #000 96.5%, transparent 97%);
    mask: radial-gradient(circle closest-side, transparent 89%, #000 89.5%, #000 96.5%, transparent 97%);
}
/* the sweep: its trail fades behind it, counter-clockwise, and it turns clockwise; its line is the leading edge */
.vkRadar-sweep{
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(var(--rd-sweep), 0) 0deg, rgba(var(--rd-sweep), 0) 300deg, rgba(var(--rd-sweep), .12) 318deg,
        rgba(var(--rd-sweep), .26) 334deg, rgba(var(--rd-sweep), .42) 348deg, rgba(var(--rd-sweep), .62) 356deg, rgba(var(--rd-hot), .8) 359.5deg, rgba(var(--rd-sweep), 0) 360deg);
    transform: rotate(48deg);
    animation: vkRadarTurn 3.6s linear infinite;
}
.vkRadar-sweep::after{
    content: ''; position: absolute; left: calc(50% - max(.6px, calc(var(--rd, 72px) * .0036))); top: 1.5%; width: max(1.2px, calc(var(--rd, 72px) * .0072)); height: 48.5%; border-radius: 99px;
    background: linear-gradient(0deg, rgba(var(--rd-hot), .35), rgba(var(--rd-hot), .95) 60%, rgba(var(--rd-hot), 1));
    box-shadow: 0 0 calc(var(--rd, 72px) * .02) rgba(var(--rd-hot), .95), 0 0 calc(var(--rd, 72px) * .05) rgba(var(--rd-sweep), .6);
}
@keyframes vkRadarTurn{ from{ transform: rotate(48deg); } to{ transform: rotate(408deg); } }
/* the blips, where his picture has them */
.vkRadar-blip{
    position: absolute; width: 3.2%; height: 3.2%; margin: -1.6% 0 0 -1.6%; border-radius: 50%;
    background: rgb(var(--rd-hot));
    box-shadow: 0 0 calc(var(--rd, 72px) * .03) calc(var(--rd, 72px) * .01) rgba(var(--rd-hot), .8), 0 0 calc(var(--rd, 72px) * .085) calc(var(--rd, 72px) * .01) rgba(var(--rd-sweep), .5);
}
.vkRadar-blip:nth-of-type(2){ left: 55.7%; top: 20.6%; width: 2.2%; height: 2.2%; margin: -1.1% 0 0 -1.1%; opacity: .9; }
.vkRadar-blip:nth-of-type(3){ left: 67.4%; top: 29.3%; width: 2.8%; height: 2.8%; margin: -1.4% 0 0 -1.4%; }
.vkRadar-blip:nth-of-type(4){ left: 78.8%; top: 37.2%; width: 1.8%; height: 1.8%; margin: -.9% 0 0 -.9%; opacity: .85; }
.vkRadar-blip:nth-of-type(5){ left: 24.7%; top: 60.7%; }
.vkRadar-blip:nth-of-type(6){ left: 77.4%; top: 75.6%; }
/* the bell in the middle */
html body :is(header .secondline, .vkBellDetail) .vkBellBtn .vkRadar-bell.fa{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%);
    font-size: calc(var(--rd, 72px) * .14); line-height: 1; opacity: 1; color: rgba(var(--rd-line), .4);
}
html body.vkPhonePerson header .secondline .vkBellBtn:not([data-has="1"]) .vkRadar-bell.fa{ opacity: 1; }      /* the phone bar dims its other icons while nothing is new (brief AT): the radar says that itself */
@media (prefers-reduced-motion: reduce){ .vkRadar-sweep{ animation: none; } html body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn[data-has="1"]{ animation: none; box-shadow: 0 0 calc(var(--rd, 72px) * .22) rgba(24, 145, 255, .65), 0 0 0 1px rgba(110, 185, 255, .55); } }

/* THE LIGHT LOOK (his words, 2026-10-08: "el radar desentona demasiado en la version light. haz la version light del radar."): the same radar - bezel, sunken rim, screen, rings,
   cross, ticks, sweep, blips, the bell - in light colours: a silver bezel lit from above, a pale teal screen with deep teal lines and a teal sweep; when something waits the same in
   a pale blue with the app's electric blue and a lighter glow that beats. The dark look above is untouched. */
html:not([data-theme="dark"]) body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn:not([data-has="1"]){
    --rd-disc: 232, 246, 244;
    --rd-f1: 232, 246, 244;
    --rd-f2: 218, 239, 237;
    --rd-f3: 199, 229, 227;
    --rd-f4: 178, 215, 213;
    --rd-rim: 146, 186, 186;
    --rd-line: 18, 118, 116;
    --rd-sweep: 22, 160, 152;
    --rd-hot: 0, 140, 132;
}
html:not([data-theme="dark"]) body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn{
    background: linear-gradient(180deg, #ffffff 0%, #eef0f4 30%, #d9dce3 62%, #c2c6cf 100%);
    box-shadow: var(--rd-glow), 0 calc(var(--rd, 72px) * .03) calc(var(--rd, 72px) * .09) rgba(30, 45, 65, .24);
}
html:not([data-theme="dark"]) body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn[data-has="1"]{
    --rd-disc: 226, 238, 255;
    --rd-f1: 226, 238, 255;
    --rd-f2: 208, 226, 255;
    --rd-f3: 186, 210, 253;
    --rd-f4: 160, 190, 247;
    --rd-rim: 112, 150, 222;
    --rd-line: 14, 82, 232;
    --rd-sweep: 30, 110, 255;
    --rd-hot: 0, 84, 255;
    animation: vkRadarBeatLight 2.4s ease-in-out infinite;
}
@keyframes vkRadarBeatLight{
    0%, 100%{ box-shadow: 0 0 calc(var(--rd, 72px) * .14) rgba(15, 82, 255, .28), 0 0 0 1px rgba(15, 82, 255, .3), 0 calc(var(--rd, 72px) * .03) calc(var(--rd, 72px) * .09) rgba(30, 45, 65, .22); }
    50%{ box-shadow: 0 0 calc(var(--rd, 72px) * .28) rgba(15, 82, 255, .5), 0 0 0 1px rgba(15, 82, 255, .5), 0 calc(var(--rd, 72px) * .03) calc(var(--rd, 72px) * .09) rgba(30, 45, 65, .22); }
}
html:not([data-theme="dark"]) .vkRadar{ background: linear-gradient(180deg, #fbfcfd 0%, #f3f5f8 22%, #e7eaef 50%, #dadee5 78%, #d2d6de 100%); }
html:not([data-theme="dark"]) .vkRadar-bezel{ background: linear-gradient(180deg, #b9bec8 0%, #cdd1d9 40%, #eceef2 82%, #f7f8fa 100%); }
html:not([data-theme="dark"]) .vkRadar-scope{ box-shadow: inset 0 0 calc(var(--rd, 72px) * .06) rgba(30, 60, 70, .3); }
html:not([data-theme="dark"]) .vkRadar-blip{ box-shadow: 0 0 calc(var(--rd, 72px) * .03) calc(var(--rd, 72px) * .005) rgba(var(--rd-hot), .55), 0 0 calc(var(--rd, 72px) * .07) calc(var(--rd, 72px) * .005) rgba(var(--rd-sweep), .3); }
html:not([data-theme="dark"]) .vkRadar-sweep::after{ box-shadow: 0 0 calc(var(--rd, 72px) * .02) rgba(var(--rd-hot), .6), 0 0 calc(var(--rd, 72px) * .04) rgba(var(--rd-sweep), .35); }
html:not([data-theme="dark"]) body :is(header .secondline, .vkBellDetail) .vkBellBtn .vkRadar-bell.fa{ color: rgba(var(--rd-line), .45); }
@media (prefers-reduced-motion: reduce){ html:not([data-theme="dark"]) body :is(header .secondline, .vkBellDetail) .vkBellBtn.vkBellBtn[data-has="1"]{ animation: none; box-shadow: 0 0 calc(var(--rd, 72px) * .2) rgba(15, 82, 255, .4), 0 0 0 1px rgba(15, 82, 255, .4); } }

/* WHERE IT SITS. The wide header: beside «Publicar cambios», centred on it (the header is 90 px high) */
header .secondline .vkBellWrap{ margin: 4px 22px 0 0; }      /* its centre on «Publicar cambios»'s (50 px down: measured) */
/* his values, 2026-10-07 ("para el raddar, esta muy bien. pero añade esto") */
header .secondline .vkBellWrap .vkBellBtn {
--rd: 56px;top: 7px;left: 5px;
}
/* from 1180 px down the header is the small corner of the top band: the radar at the size the bell had */
@media (max-width: 1180px){
    header .secondline .vkBellWrap{ margin: 0; }
    header .secondline .vkBellWrap .vkBellBtn{ --rd: 40px; top: 0; left: 0; }      /* his offsets are the wide header's: here it stays where it was */
}

/* IN A FILE'S DETAIL (brief BI, 2026-10-09): the same radar - every rule above names `.vkBellDetail` beside the header - at the size of the close button it sits beside (40 px; view/css/vk_bell.css places it). */
.vkBellDetail .vkBellBtn{ --rd: 40px; }