/* A FILE'S DETAIL ON A PHONE: THE PICTURE LEADS (2026-10-13) - his six points, word for word in view/js/vk_detail_phone.js, which puts .vkDetailPhone on the layer (the public
   web and a person's panel, 1125 px and under, the Tira) and moves the round buttons into the box, and «ⓘ», «Descargar» and the two tabs into one row. This draws them.
   The Tira's layer is a column one window tall where the stage takes what the box leaves (view/css/vk_versions.css), so all the box gives up goes to the picture. */
@media (max-width: 1125px){
    /* 1. no header: the ✕ and the detail's bell go, and the 65 px they stood in; a ‹ over the picture's top left closes it as the ✕ did */
    #watch_item_modal.vkDetailPhone .modal_accept,
    #watch_item_modal.vkDetailPhone .vkBellDetail{ display: none !important; }
    #watch_item_modal.vkDetailPhone .vkDetail--strip{ margin-top: 0; }
    #watch_item_modal.vkDetailPhone .vkDetailBack{
        position: absolute; top: 12px; left: 12px; z-index: 6; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; cursor: pointer; color: #ffffff;
        background: rgba(18, 18, 24, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    }
    #watch_item_modal.vkDetailPhone .vkDetailBack:focus-visible{ outline: 2px solid #ffffff; outline-offset: 2px; }
    /* the web's «Modo prueba» mark: to the top right, where the ✕ was */
    #watch_item_modal.vkDetailPhone .vkLd-demoMark{ top: 19px; left: auto; right: 12px; }

    /* 4. the picture leads: the stage's whole width (the Tira kept 80 px a side for the column of round buttons), as tall as the stage */
    #watch_item_modal.vkDetailPhone .vkDetail--strip > .casing:not(.fullHeight) .mainImg{ max-width: 100%; margin: 0; }
    /*    a picture as big as the stage lets it, its width or its height, its shape kept - a picture smaller than the stage too (his words, 2026-10-13: "La imagen cuando no esta
          en zoom ha de ocupar el maximo limite, sea de alto o de anxho, respetando el ratio"): view/js/vk_detail_phone.js fill() gives the element that size; until the picture
          has arrived it is held inside the stage */
    #watch_item_modal.vkDetailPhone .vkDetail--strip > .casing:not(.fullHeight) img.mainImg{ max-height: 100%; object-fit: contain; }

    /* THE MAGNIFIER'S VIEW OF A PICTURE (his words, 2026-10-13, with a picture of it: "quita ajustar ancho 100% y pon el boton salir a bajo donde te indico. En la version
       movil solo."): no «Ajustar» «Ancho» «100 %» - a double tap or a pinch still take it back to the fitted picture (view/js/vk_zoom.js) - and «Salir» at the foot of the
       screen, centred (the «Cargando…» pill beside it while the picture comes). The view of a file with no zoom keeps «Salir» at the top: under it the box stays on screen.
       While either view is open the detail's ‹ hides - «Salir» is the way back from it, and it stood under «Salir» */
    #watch_item_modal.vkDetailPhone .vkZoomIn:not(.vkZoomIn--plain) .vkZoomIn-seg{ display: none; }
    #watch_item_modal.vkDetailPhone .vkZoomIn:not(.vkZoomIn--plain) .vkZoomIn-bar{
        position: fixed; top: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; justify-content: center;
    }
    #watch_item_modal.vkDetailPhone.vkZoomRow .vkDetailBack{ display: none; }

    /* 5. no ‹ › at the foot: a finger drawn sideways does it (and the keys still do) */
    #watch_item_modal.vkDetailPhone .vkDetailNav-btn{ display: none !important; }

    /* 6. the box, compact: its pieces in one column in this order - the round buttons, the versions, the version's line, the row of «ⓘ» «Descargar» and the tabs, its note;
       with «Comentarios» open, the round buttons, the row and the comments. The versions' pane gives its pieces to the box (display: contents) so the row can sit between them. */
    #watch_item_modal.vkDetailPhone .vkVer.vkVer--B{
        display: flex; flex-direction: column; gap: 6px; margin-top: 0; padding: 8px 12px 10px;
    }
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-compare{ height: 32px; }
    /*    «Nueva versión» beside «Comparar» when the line of versions has no room for it (view/js/vk_detail_phone.js fitNew): a button the size of «Comparar», its dashed edge kept */
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-head .vkVer-upload--tile.vkDetailPhone-new{
        width: auto; min-height: 0; height: 32px; flex-direction: row; gap: 6px; padding: 0 12px; border-width: 1.5px; border-radius: 9px; font-size: 12px;
    }
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-head .vkVer-upload--tile.vkDetailPhone-new svg{ width: 15px; height: 15px; }
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-tile--add.vkDetailPhone-gone{ display: none; }
    /*    HIS PROPORTION (2026-10-13, his drawing of the two parts in blue, with "en los recuadros azules te muestro la proposcion de altura de las partes superior e inferior"): the
          picture's part 64 % of the screen, the box the other 36 % - fixed, so the picture does not move when «Comentarios» is pressed; what the box holds beyond that scrolls
          inside it (many comments). Its pieces keep their own height there (no squeezing). */
    #watch_item_modal.vkDetailPhone > div:not(.vkLayerPop):has(.vkDetail--strip) > .vkDetail--strip{ flex: 0 0 64%; }
    #watch_item_modal.vkDetailPhone > div:not(.vkLayerPop):has(.vkDetail--strip) > .vkVer{ flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
    #watch_item_modal.vkDetailPhone .vkVer--B > *,
    #watch_item_modal.vkDetailPhone .vkVer--B > #vkSidePaneVer > *{ flex-shrink: 0; }
    #watch_item_modal.vkDetailPhone .vkVer--B > .vkSide-bar{ display: none; }
    #watch_item_modal.vkDetailPhone .vkVer--B > #vkSidePaneVer:not([hidden]){ display: contents; }
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-views{ display: none; }      /* 2. the modes go */
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-head:not(:has(.vkVer-compare)){ display: none; }      /* «Comparar», when there are two versions to compare, stays */
    #watch_item_modal.vkDetailPhone .vkVer--B > .button_actions{ order: 1; }
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-head{ order: 2; margin: 0; }
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-strip{ order: 3; }
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-bar{ order: 4; margin: 0; }
    #watch_item_modal.vkDetailPhone .vkVer--B > .vkDetailPhone-row{ order: 5; }
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-note{ order: 6; margin: 0; }
    #watch_item_modal.vkDetailPhone .vkVer--B > .vkSide-pane--notes{ order: 7; }

    /* 2. the round buttons in the box, in one row across it: 40 px each when they fit, smaller when a file has many (a PDF's ten), never off the edge; the comments pair one pill */
    #watch_item_modal.vkDetailPhone:not(.vkZoomRow):not(.is-vkPdfWide) .vkVer--B > .button_actions{
        position: static; top: auto; right: auto; bottom: auto; left: auto; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; transform: none; z-index: auto;
    }
    #watch_item_modal.vkDetailPhone:not(.vkZoomRow):not(.is-vkPdfWide) .vkVer--B > .button_actions > div{
        display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 6px; width: auto; height: auto; margin: 0; padding: 0;
    }
    #watch_item_modal.vkDetailPhone:not(.vkZoomRow):not(.is-vkPdfWide) .vkVer--B > .button_actions .downloadbnts{
        float: none; flex: 0 1 40px; box-sizing: border-box; width: auto; min-width: 0; height: auto; aspect-ratio: 1; margin: 0; padding: 0;
        display: flex; align-items: center; justify-content: center; position: relative; top: auto; left: auto;
    }
    #watch_item_modal.vkDetailPhone:not(.vkZoomRow):not(.is-vkPdfWide) .vkVer--B > .button_actions .vkNotesToggle.vkPair-top.downloadbnts{ border-radius: 99px 0 0 99px; }
    #watch_item_modal.vkDetailPhone:not(.vkZoomRow):not(.is-vkPdfWide) .vkVer--B > .button_actions .vkNotesAdd.vkPair-bottom.downloadbnts{
        border-radius: 0 99px 99px 0; margin-left: -6px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .22);
    }
    #watch_item_modal.vkDetailPhone .vkVer--B > .button_actions .hookCompany{ display: none; }

    /* THE VERSIONS IN ONE LINE THAT A FINGER SLIDES SIDEWAYS (his words, 2026-10-13: "las versiones, si hay estaran en una linea, que se podra swipear"), «Nueva versión» at its
       end: many versions never make the box taller; smaller tiles. A slide there is the line's own: the next file is a slide on the picture (view/js/vk_detail_nav.js). */
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-strip{ flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 8px; overscroll-behavior-x: contain; }
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-strip::-webkit-scrollbar{ display: none; }
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-tile{ flex: 0 0 92px; width: 92px; }
    #watch_item_modal.vkDetailPhone .vkVer--B .vkVer-tilePic{ height: 44px; }

    /* 3. «ⓘ», «Descargar» and, beside them, «Versiones» / «Comentarios» */
    /*    in one line down to a 360 px phone, in the longest of the three languages («Descargar», «Versiones 1», «Comentarios 0»): the row's words and room shrink a little with
          the screen (clamp, never under 10.5 px nor a key under 36 px); narrower still, the tabs go under */
    #watch_item_modal.vkDetailPhone .vkDetailPhone-row{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
    #watch_item_modal.vkDetailPhone .vkDetailPhone-row > .vkVer-barBtns{ display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; margin: 0; }
    #watch_item_modal.vkDetailPhone .vkDetailPhone-row > .vkSide-tabs{ flex: 0 0 auto; display: flex; align-items: center; gap: 2px; margin: 0 0 0 auto; padding: 2px; }
    #watch_item_modal.vkDetailPhone .vkDetailPhone-row .vkSide-tab{
        flex: 0 0 auto; height: 38px; padding: 0 clamp(3px, 1.4vw, 6px); gap: 4px; font-size: clamp(10.5px, 2.98vw, 12px); white-space: nowrap;
    }
    #watch_item_modal.vkDetailPhone .vkDetailPhone-row .vkSide-tab .vkVer-count{ padding: 1px clamp(3px, 1.2vw, 5px); font-size: clamp(10px, 2.82vw, 11px); }
    #watch_item_modal.vkDetailPhone .vkDetailPhone-row .vkVer-btn{ height: 40px; padding: 0 clamp(7px, 2.5vw, 10px); font-size: clamp(11px, 3.2vw, 12.5px); }
    #watch_item_modal.vkDetailPhone .vkDetailPhone-row .vkVer-btn--icon{ width: clamp(36px, 10.3vw, 40px); padding: 0; }
}