/* 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).
 * It was brushed stainless steel with engraved joints, melted into the header (2026-10-08); the steel is gone since 2026-11-08 (brief MF, below): the panel is only the box the round logo sits in.
 * 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 STRIP UNDER THE LOGO IS GONE (brief MF, 2026-11-08; his words: «no hace falta que mantengas el detalle tech decorativo de debajo del logo que va hasta el logo hasta un poco mas a la derecha»): the brushed steel with its engraved
       seams, rivets and status lights that ran from the logo a little way to the right (both looks; the light look's had gone on 2026-10-08). The header is the frame's one charcoal now (view/css/vk_appframe.css) */
    header .secondline .logo.vkLogoPanel::before{ content: none; }
    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; }
/* 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}
/* the hub's colour behind its logo in the corner (his ask, 2026-11-06: transparent logos show the hub's colour, not white or nothing; core/vk/hub_dot.php vk_hubdot_bg_of()) - both looks */
header .secondline img.logoHeader[style*="--vk-dot"], html[data-theme="dark"] header .secondline img.logoHeader[style*="--vk-dot"]{ background: var(--vk-dot); }
/* THE LOGO'S CENTRE ON THE RAIL'S COLUMN (brief VT, 2026-11-08; his words: «el icono de nawtus ha de estar mas a la izquierda centrado con la columna de iconos de los hubs»): with the tree in «Recomendado» the logo's centre is the centre of the
   rail's column - the rail is 66 px (view/css/vk_treerec.css --vkRailW) and its last pixel is its edge, so the column's centre (the marks') is 32.5 px from the window's left. The logo's box starts 6.5 px from the window's left before its
   margin: the header is centred with `left: 50%` + `translateX(-50%)` at `100% + 1px` (style.css), its bar a pixel further out (measured -1.5 px at 1909, 1600 and 1366), plus the panel's 8 px edge. So margin-left = 32.5 - 6.5 - half the logo's
   width. Open: 34 px, 9 px (41 before); the next rule has the shut one. */
html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"]) header .secondline .logo.vkLogoPanel img.logoHeader, html.vkRec:not(#vkLk) header .secondline .logo.vkLogoPanel img.logoHeader{ margin-left: calc(32.5px - 6.5px - 17px); }
/* his values (2026-11-08, «porfavor cuando puedas implementa / adapta estas propiedades»): with the tree in «Recomendado» and its panel shut (rail only), the header's logo is smaller and sits higher, nearer the rail
   (his margin-left 15 px moved to 10 px: the centre of the rail's column, VT) */
html:not(.vkAF):has(#vkTree[data-vk-look="recomendado"][data-vk-rail="shut"]) header .secondline .logo.vkLogoPanel img.logoHeader, html.vkRec.vkRecShut:not(#vkLk) header .secondline .logo.vkLogoPanel img.logoHeader{
    width: 32px; height: 32px; max-width: 32px; max-height: 32px; margin-top: -10px !important; margin-left: calc(32.5px - 6.5px - 16px);
}