/* Agregar cuenta pendiente: mantiene el modal dentro del viewport visual
   cuando aparece el teclado. Exclusivo para telefono; 540 px en adelante
   conserva el layout original. */
@media (max-width: 539px) {
    html body.pv-has-open-modal #pv-modal-cuenta-pendiente:not([hidden]) {
        position: fixed !important;
        inset: auto !important;
        top: var(--pv-modal-viewport-top, 0px) !important;
        right: auto !important;
        bottom: auto !important;
        left: var(--pv-modal-viewport-left, 0px) !important;
        box-sizing: border-box !important;
        width: var(--pv-modal-viewport-width, 100vw) !important;
        height: var(--pv-modal-viewport-height, 100dvh) !important;
        min-height: var(--pv-modal-viewport-height, 100dvh) !important;
        max-height: var(--pv-modal-viewport-height, 100dvh) !important;
        padding: 7px !important;
        align-items: flex-end !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    html body.pv-has-open-modal #pv-modal-cuenta-pendiente:not([hidden])
    > .rv-cxp-entry-modal {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: calc(var(--pv-modal-viewport-height, 100dvh) - 14px) !important;
        min-height: 0 !important;
        max-height: calc(var(--pv-modal-viewport-height, 100dvh) - 14px) !important;
        margin: auto !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        overflow-anchor: none !important;
        overscroll-behavior: none !important;
    }

    html body #pv-modal-cuenta-pendiente .rv-cxp-entry-head {
        flex: 0 0 auto !important;
    }

    html body #pv-modal-cuenta-pendiente .rv-cxp-entry-body {
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overflow-anchor: none !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: auto !important;
        scroll-padding-top: 12px !important;
        scroll-padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }

    html body #pv-modal-cuenta-pendiente :is(
        .pv-items-col-producto,
        .pv-items-col-cantidad,
        .rv-cxp-entry-amount,
        .rv-cxp-entry-description,
        #pv-cp-pagar-otro-wrap,
        #pv-cp-cobrar-otro-wrap
    ) {
        overflow-anchor: none !important;
    }

    /* 16 px evita que Safari/Chrome amplien el modal al enfocar. El margen
       de scroll deja el campo y su etiqueta completos sobre el teclado. */
    html body #pv-modal-cuenta-pendiente :is(
        #pv-cp-form-pagar,
        #pv-cp-form-cobrar
    ) :is(
        input[name="producto[]"],
        input[name="cobrar_desc[]"],
        input[name="otro_nombre"],
        textarea[name="descripcion"]
    ) {
        font-size: 16px !important;
        scroll-margin-top: 12px !important;
        scroll-margin-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }
}