/* THE MOSAIC GRID (brief MG, 2026-11-07; view/js/vk_mosaic.js). His words: «el tamano de las cajas del grid nunca deje espacios vacios en el layout y los items se encajen justo en el sitio
 * que se les asigna si el usuario las arrastra a otro sitio en la grid». Three box sizes on ONE grid of cells, six columns at his width (4 below 1450 px, 2 below 768 px):
 *    Normal 1x1 (SpecialBig 0) · Grande 2x2 (1) · Mas grande 4x2 (2); a cell is as tall as it is wide PLUS the card's text band, so a 1x1 card's picture is a square.
 * Everything here hangs on .conty.vkMosaic (the grid itself carries the class: the page draws it from the hub's, the web's or the place's choice): without the class («Clasica», the other key of the header) nothing of this file applies and the grid is exactly what it was.
 * The script writes the cell on the grid itself (--vk-cw, --vk-rh, --vk-cols, --vk-band) and gives Packery the same numbers (columnWidth, rowHeight), so every box lands on a cell. */

/* ---- the boxes: a whole number of cells. The 0.2 px less keeps a box from being counted as one more cell by Packery's rounding up (Math.ceil(outer / cell)). */
.containernews .conty.vkMosaic > .capsaitem{
    --vk-w: 1; --vk-h: 1;
    box-sizing: border-box;
    width: calc(var(--vk-cw, 234px) * min(var(--vk-w), var(--vk-cols, 6)) - 10.2px) !important;
    height: calc(var(--vk-rh, 346px) * var(--vk-h) - 10.2px) !important;
    margin: 0 5px 10px 5px !important;
    overflow: hidden;
}
.containernews .conty.vkMosaic > .capsaitem.WiDerItem{ --vk-w: 2; --vk-h: 2; }
.containernews .conty.vkMosaic > .capsaitem.WiDerItemPlus{ --vk-w: 4; --vk-h: 2; }
/* the places the cards go through when the window is narrow: the one rule above is the only width */
.containernews .conty.vkMosaic > .capsaitem.WiDerItem, .containernews .conty.vkMosaic > .capsaitem.WiDerItemPlus{
    width: calc(var(--vk-cw, 234px) * min(var(--vk-w), var(--vk-cols, 6)) - 10.2px) !important;
}

/* ---- inside a file card: the picture takes what the text band leaves, the band is a fixed height */
.containernews .conty.vkMosaic > .capsaitem > .onToppe{
    display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; position: relative;
}
.containernews .conty.vkMosaic > .capsaitem > .onToppe > a.SeeDetail{
    flex: 1 1 0; min-height: 0 !important; width: 100%; margin: 0; position: relative; overflow: hidden;
}
.containernews .conty.vkMosaic > .capsaitem > .onToppe > .details{
    flex: 0 0 var(--vk-band, 108px); height: var(--vk-band, 108px); overflow: hidden; align-content: flex-start; margin: 0;
}
/* the picture fills its area; what it does with it is the framing rule (view/js/vk_mosaic.js): cover when the ratios are near, the whole picture otherwise */
.containernews .conty.vkMosaic > .capsaitem .SeeDetail > img{
    position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain; float: none;
}
.containernews .conty.vkMosaic > .capsaitem .SeeDetail.is-vkElement > img{ inset: 15%; width: 70% !important; height: 70% !important; }
.containernews .conty.vkMosaic > .capsaitem .SeeDetail.is-vkElement.is-vkBoxLight > img,
.containernews .conty.vkMosaic > .capsaitem .SeeDetail.is-vkElement.is-vkBoxDark > img{ inset: 14px; width: calc(100% - 28px) !important; height: calc(100% - 28px) !important; }
.containernews .conty.vkMosaic > .capsaitem .SeeDetail.is-vkElement{ padding: 0; }
.containernews .conty.vkMosaic > .capsaitem .SeeDetail.vkm-cover > img{ object-fit: cover; inset: 0; width: 100% !important; height: 100% !important; }
/* the whole picture over its own blurred, enlarged copy (the old rule of vk_cardfill.js is not the one that applies here) */
.containernews .conty.vkMosaic .capsaitem .SeeDetail.is-vkFilled::before{ content: none; }
.containernews .conty.vkMosaic .capsaitem .SeeDetail.vkm-blur::before{
    content: ""; position: absolute; inset: -12%; background-image: var(--vk-fill); background-size: cover; background-position: center;
    filter: blur(26px) saturate(1.05); z-index: 0; pointer-events: none;
}
.containernews .conty.vkMosaic .capsaitem .SeeDetail.vkm-blur > img, .containernews .conty.vkMosaic .capsaitem .SeeDetail.vkm-cover > img{ background: transparent; }
.containernews .conty.vkMosaic .capsaitem .SeeDetail.vkm-neutral{ background: var(--vk-hubc, #f4f4f6); }
html[data-theme="dark"] .containernews .conty.vkMosaic .capsaitem .SeeDetail.vkm-neutral{ background: var(--vk-hubc-d, #2a2a33); }
.containernews .conty.vkMosaic .capsaitem .SeeDetail.vkm-neutral > img{ background: transparent; }

/* ---- the folders' and archives' own look, stretched to the cell */
.containernews .conty.vkMosaic > .capsaitem.vkFolder > *{ max-height: 100%; }
.containernews .conty.vkMosaic > .capsaitem.vkFolder, .containernews .conty.vkMosaic > .capsaitem.vkArc{ display: block; }

/* ---- the slot a dragged card will take: the app's accent, on the cell grid (Packery's placeholder) */
.containernews .conty.vkMosaic > .packery-drop-placeholder{
    border: 2px solid var(--vk-main, #0f52ff); border-radius: 9px; background: color-mix(in srgb, var(--vk-main, #0f52ff) 10%, transparent); opacity: 1; margin: 0 5px 10px 5px;
}

/* ---- the two keys of the head: «Mosaico» and «Clasica» */
.vkGrid-keys{ display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--vk-field, #efeef4); flex: 0 0 auto; }
.vkGrid-key{
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; line-height: 1; color: var(--vk-text-soft, #5f5e6b); white-space: nowrap;
}
.vkGrid-key svg{ width: 16px; height: 16px; flex: 0 0 auto; }
.vkGrid-key:hover{ color: var(--vk-text, #16161a); }
.vkGrid-key[aria-pressed="true"]{ background: var(--vk-main, #0f52ff); color: #fff; }
.vkGrid-key:focus-visible{ outline: 2px solid var(--vk-main, #0f52ff); outline-offset: 2px; }
@media (max-width: 1500px){ .vkGrid-key span{ display: none; } .vkGrid-key{ padding: 0 10px; } }

/* ---- a picture framed by hand (brief MG phase 2; view/js/vk_framehand.js): cover, the point x% y% of the picture under the same point of the box, scaled by z about it. Not scaled again by the app's hover. */
.containernews .conty.vkMosaic > .capsaitem .SeeDetail.vkm-hand > img,
.containernews .conty.vkMosaic > .capsaitem a:hover .SeeDetail.vkm-hand > img,
.containernews .conty.vkMosaic > .capsaitem .SeeDetail.vkm-hand:hover > img{
    object-fit: cover; object-position: var(--vk-fx, 50%) var(--vk-fy, 50%); transform-origin: var(--vk-fx, 50%) var(--vk-fy, 50%);
    transform: scale(var(--vk-fz, 1)) !important; inset: 0; width: 100% !important; height: 100% !important; background: transparent;
}
.containernews .conty.vkMosaic > .capsaitem .SeeDetail.vkm-hand{ padding: 0; }

/* ---- the window «Encuadrar...» */
.vkFh{ position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(16, 16, 26, .55); }
.vkFh-box{ display: flex; flex-direction: column; gap: 12px; max-width: 100%; max-height: 100%; overflow: auto; padding: 22px 24px; border-radius: 18px; background: var(--vk-surface, #fff); color: var(--vk-text, #16161a); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); font-family: 'Montserrat', sans-serif; }
.vkFh-title{ font-size: 17px; font-weight: 700; }
.vkFh-stage{ position: relative; overflow: hidden; border-radius: 10px; background: var(--vk-field, #efeef4); cursor: grab; touch-action: none; align-self: center; }
.vkFh-stage:active{ cursor: grabbing; }
.vkFh-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.vkFh-note, .vkFh-hint{ font-size: 12px; color: var(--vk-text-soft, #5f5e6b); }
.vkFh-zoom{ display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; margin: 0; }
.vkFh-zoom input{ flex: 1 1 auto; accent-color: var(--vk-main, #0f52ff); }
.vkFh-zv{ min-width: 46px; text-align: right; font-weight: 700; }
.vkFh-acts{ display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.vkFh-b{ border: 0; border-radius: 999px; padding: 10px 20px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--vk-field, #efeef4); color: var(--vk-text, #16161a); }
.vkFh-b:hover{ filter: brightness(.96); }
.vkFh-ok{ background: var(--vk-main, #0f52ff); color: #fff; }
.vkFh-auto{ margin-right: auto; }
.vkFh-b:focus-visible{ outline: 2px solid var(--vk-main, #0f52ff); outline-offset: 2px; }

/* ---- where the keys stand: the app's header, a float left of the bell (inc/header.php); the narrow layouts (the header as a corner) have none */
header .secondline .vkGridHead{ float: right; margin: 21px 12px 0 0; line-height: 0; position: relative; z-index: 3; }
@media (max-width: 1125px){ header .secondline .vkGridHead{ display: none; } }
/* style.css gives every button of the header a floated 67 px blue box (`header .secondline button`): the two keys say what they need, with that specificity and its :focus */
header .secondline .vkGridHead .vkGrid-key, header .secondline .vkGridHead .vkGrid-key:focus, header .secondline .vkGridHead .vkGrid-key:hover{
    float: none; width: auto; min-width: 0; height: 32px; padding: 0 12px; margin: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none;
    font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; line-height: 1; text-align: left; color: var(--vk-text-soft, #9e9dab); outline: 0;
}
header .secondline .vkGridHead .vkGrid-key:hover{ color: var(--vk-text, #16161a); }
header .secondline .vkGridHead .vkGrid-key[aria-pressed="true"], header .secondline .vkGridHead .vkGrid-key[aria-pressed="true"]:focus, header .secondline .vkGridHead .vkGrid-key[aria-pressed="true"]:hover{ background: var(--vk-main, #0f52ff); color: #fff; }
header .secondline .vkGridHead .vkGrid-key:focus-visible{ outline: 2px solid var(--vk-main, #0f52ff); outline-offset: 2px; }
header .secondline .vkGridHead .vkGrid-keys{ height: 38px; box-sizing: border-box; }
header .secondline .vkGridHead.is-tight .vkGrid-key[aria-pressed="false"]{ display: none; }