/* THE TOP-LEFT PANEL (2026-10-08). His words: "arriba del buscador de hubs, encima suyo suprime el logo en el admin. En los sitios por link solo muestra el logo del hub nunca de
 * visualkeep. Luego coloca un fondo hecho con css de un material inox que se fusione con el color del fondo del header. Coloca tambien ahi en la zona de encima del buscador de hubs unas
 * juntas estilo cyberpunk."
 *
 * The header's corner above the sidebar's search (inc/header.php .logo.vkLogoPanel): as wide as the sidebar (calc(16.7% + 78px), style.css .yyy) and as tall as the header (90 px).
 * Brushed stainless steel - a steel ramp, fine horizontal brushing, a soft sheen - faded into the header's own colour to the right and at the foot, so it melts into it; on it the
 * joints, engraved: seams with chamfered steps, a notch, rivets and three small status lights. A person's hub logo sits on it; an administrator's corner is the panel alone.
 * Wide screens only: from 1180 px down the header is the small corner of the top band.
 */
@media (min-width: 1181px){
    /* his values, 2026-10-08 ("Te pego todo el arreglo en css para que se vea igual que en la foto"): 8 px down, 73 px tall, wider (calc(29.7% + 82px) of the header),
       a 27 px corner and an 8 px edge in the header's own colour on its left, no padding */
    header .secondline .logo.vkLogoPanel{
        position: absolute; left: 0; top: 8px; border-top-left-radius: 27px; border-left: solid 8px #1e1e24; z-index: 1; float: none; margin: 0; padding: 0 0 0 0px;
        width: calc(29.7% + 82px); height: 73px; box-sizing: border-box; overflow: hidden; pointer-events: none;
        display: flex; align-items: center; justify-content: flex-start;
    }
    /* the light look: that edge lies on the header's blue frame, so it takes the frame's colour (his #1e1e24 is the dark look's frame) */
    html:not([data-theme="dark"]) header .secondline .logo.vkLogoPanel{ border-left-color: var(--vk-brand, #0F52FF); }
    /* the steel and its joints on a layer of their own, so the fade never touches a hub's logo */
    header .secondline .logo.vkLogoPanel::before{
        /* inside the header's own 10 px edge (blue in the light look) and its rounded corner: 32 px outside, 22 px inside (measured) */
        content: ''; position: absolute; inset: 10px 0 0 10px; border-top-left-radius: 22px; z-index: 0; pointer-events: none;
        background:
            /* the joints, 1.4 times their first size and lifted 48 px, so the top seams and the notch sit above the header and never show (his words, 2026-10-08:
               "extiende mas la imagen con el brillo sutil haciendola mas grande y que se coma un poco de la parte superior asi las juntas de arriba no se muestran") */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='90' viewBox='0 0 420 90'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Cg stroke='rgba(255,255,255,.95)' stroke-width='1' transform='translate(0 1)'%3E%3Cpath d='M0 68H128L146 50H246L262 66H420'/%3E%3Cpath d='M0 22H40L52 10H104'/%3E%3Cpath d='M316 0V20L326 30H420'/%3E%3C/g%3E%3Cg stroke='rgba(70,72,86,.26)' stroke-width='1.3'%3E%3Cpath d='M0 68H128L146 50H246L262 66H420'/%3E%3Cpath d='M0 22H40L52 10H104'/%3E%3Cpath d='M316 0V20L326 30H420'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23e4e6eb' stroke='rgba(70,72,86,.3)' stroke-width='.8'%3E%3Ccircle cx='16' cy='45' r='2.4'/%3E%3Ccircle cx='200' cy='42' r='2.4'/%3E%3Ccircle cx='211' cy='42' r='2.4'/%3E%3C/g%3E%3Cg fill='rgba(110,31,209,.3)'%3E%3Crect x='150' y='73' width='8' height='2' rx='1'/%3E%3Crect x='162' y='73' width='8' height='2' rx='1'/%3E%3Crect x='174' y='73' width='8' height='2' rx='1' fill='rgba(110,31,209,.2)'/%3E%3C/g%3E%3C/svg%3E") 0 -48px / 588px 126px no-repeat,
            /* a soft sheen across the brushing, wider since 2026-10-08 */
            linear-gradient(100deg, transparent 8%, rgba(255, 255, 255, .72) 36%, transparent 66%),
            /* the brushing */
            repeating-linear-gradient(0deg, rgba(0, 0, 0, .026) 0 1px, transparent 1px 2px, rgba(255, 255, 255, .5) 2px 3px),
            /* the steel */
            linear-gradient(180deg, #f4f5f8 0%, #eceef2 55%, #e6e8ed 100%);
        /* melted in: strongest at the left middle and reaching further than before (2026-10-08, "extiende mas"), and gone at the right edge and at the foot,
           where the header meets the page (his "no se integra lo suficiente", same day) */
        -webkit-mask-image: radial-gradient(125% 165% at 4% 40%, #000 0%, rgba(0, 0, 0, .7) 38%, rgba(0, 0, 0, .32) 66%, transparent 92%), linear-gradient(90deg, #000 60%, transparent 99%), linear-gradient(180deg, #000 55%, transparent 99%);
        -webkit-mask-composite: source-in, source-in;
        mask-image: radial-gradient(125% 165% at 4% 40%, #000 0%, rgba(0, 0, 0, .7) 38%, rgba(0, 0, 0, .32) 66%, transparent 92%), linear-gradient(90deg, #000 60%, transparent 99%), linear-gradient(180deg, #000 55%, transparent 99%);
        mask-composite: intersect;
    }
    html[data-theme="dark"] header .secondline .logo.vkLogoPanel::before{
        inset: 0; border-top-left-radius: 0;      /* in the dark look that edge has the header's own colour: the steel runs to the corner itself, square - a rounded steel corner
                                                  showed against the header (his "vigila que se ve una esquina redondeada en el top left", 2026-10-08) */
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='90' viewBox='0 0 420 90'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Cg stroke='rgba(255,255,255,.05)' stroke-width='1' transform='translate(0 1)'%3E%3Cpath d='M0 68H128L146 50H246L262 66H420'/%3E%3Cpath d='M0 22H40L52 10H104'/%3E%3Cpath d='M316 0V20L326 30H420'/%3E%3C/g%3E%3Cg stroke='rgba(0,0,0,.5)' stroke-width='1.3'%3E%3Cpath d='M0 68H128L146 50H246L262 66H420'/%3E%3Cpath d='M0 22H40L52 10H104'/%3E%3Cpath d='M316 0V20L326 30H420'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23303139' stroke='rgba(0,0,0,.55)' stroke-width='.8'%3E%3Ccircle cx='16' cy='45' r='2.4'/%3E%3Ccircle cx='200' cy='42' r='2.4'/%3E%3Ccircle cx='211' cy='42' r='2.4'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,.12)'%3E%3Ccircle cx='15.4' cy='44.3' r='.9'/%3E%3Ccircle cx='199.4' cy='41.3' r='.9'/%3E%3Ccircle cx='210.4' cy='41.3' r='.9'/%3E%3C/g%3E%3Cg fill='rgba(110,231,255,.4)'%3E%3Crect x='150' y='73' width='8' height='2' rx='1'/%3E%3Crect x='162' y='73' width='8' height='2' rx='1'/%3E%3Crect x='174' y='73' width='8' height='2' rx='1' fill='rgba(110,231,255,.22)'/%3E%3C/g%3E%3C/svg%3E") 0 -48px / 588px 126px no-repeat,
            linear-gradient(100deg, transparent 8%, rgba(255, 255, 255, .045) 36%, transparent 66%),
            repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 2px, rgba(0, 0, 0, .045) 2px 3px),
            linear-gradient(180deg, #2a2b32 0%, #25262c 55%, #212228 100%);
    }
    header .secondline .logo.vkLogoPanel a{ pointer-events: auto; position: relative; z-index: 1; }
}
/* THE HEADER'S LOGO, ROUND, IN THE BEZEL (2026-10-08, his CSS and his words "La manera por defecto del logo en el header sera este. En el movil no lo muestres. solo version
   escritorio. le he añadido el reborde como tenemos estilado. Implementalo correctamente porfavor."). His values: 34 px, 41 px in from the panel's left, 12 px down, round, no
   padding, and the bezel of the hubs' round marks - his rings are exactly the dark look's of the title's logo (view/css/sidebar_tree.css .vkHead-logo, round since fef5f95); the
   light look gets that logo's light rings. Done right: a square of 34 x 34 - his max-width / max-height with width auto and height 100% let a logo that is not square come out an
   oval, and an SVG with no size of its own came out 0 px high (the rule this replaces) - with the picture contained in it, so a wordmark stays whole, on white as every round logo
   of the app (.vkLogo). Whose logo: inc/header.php (the hub's, a company's, or the installation's). Not on a phone, nor under 1181 px: below. */
header .secondline img.logoHeader, header .secondline .logo.vkLogoPanel img.logoHeader[src$=".svg"], header .secondline .logo.vkLogoPanel img.logoHeader[src$=".SVG"]{
    width: 34px; height: 34px; max-width: 34px; max-height: 34px; margin-top: 12px !important; margin-left: 41px; padding: 0;
    position: relative; border-radius: 999px; object-fit: contain; object-position: center; background: #ffffff;
    box-shadow: 0 0 0 2px #b9bec8, 0 1.5px 0 3px #f7f8fa, 0 -2.5px 0 4.5px #ffffff, 0 2.5px 0 4.5px #c2c6cf, 0 0 0 7px #e4e7ec, 0 4px 10px 5px rgba(30, 45, 65, .16);
}
html[data-theme="dark"] header .secondline img.logoHeader{
    box-shadow: 0 0 0 2px #0e0e12, 0 1.5px 0 3px #3c3e48, 0 -2.5px 0 4.5px #4a4b58, 0 2.5px 0 4.5px #141418, 0 0 0 7px #2b2c34, 0 4px 10px 5px rgba(0, 0, 0, .45);
}
/* two logos, one per look (2026-10-08, his words "Permite que se pueda subir logos para las dos modalidades: dark y light. porque a veces el mismo logo queda mal."; inc/header.php draws both when Ajustes has a dark one): each shows in its look only */
html[data-theme="dark"] header .secondline img.logoHeader.vkLogo-forLight{ display: none; }
html:not([data-theme="dark"]) header .secondline img.logoHeader.vkLogo-forDark{ display: none; }
/* NO STEEL IN THE LIGHT LOOK (2026-10-08, his words "En el modo light elimina la imagen esta que pusimos de tech de fondo"): the light look's corner keeps its edge and its shape, without the
   brushed steel and its joints; the dark look keeps them */
@media (min-width: 1181px){
    html:not([data-theme="dark"]) header .secondline .logo.vkLogoPanel::before{ content: none; }
}
/* desktop only: where the panel is (from 1181 px). From 1180 down the header is the top band's small corner, where the logo already stood half off the window's right edge
   (measured at 1150: 154 px wide from x 1099); style.css hid it from 1125 down. */
@media (max-width: 1180px){ header .secondline img.logoHeader{ display: none !important; } }
/* his value (2026-10-08, "arreglo: implementa esto"): no white behind the header's logo in the dark look */
html[data-theme="dark"] header .secondline img.logoHeader{background:none}