/* =========================================================

   LISTAS en modal — solo móvil (≤900px). PC sin cambios.

   ========================================================= */



@media (max-width: 900px) {

    .sl-lista-rotate-hint {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        margin: 8px 10px 6px;

        padding: 10px 12px;

        border-radius: 12px;

        background: linear-gradient(135deg, #eff6ff, #dbeafe);

        border: 1px solid rgba(37, 99, 235, 0.25);

        color: #1e3a8a;

        font-size: 0.88rem;

        font-weight: 700;

        line-height: 1.35;

        text-align: center;

        flex-shrink: 0;

    }



    @media (orientation: landscape) {

        .sl-lista-rotate-hint {

            display: none !important;

        }

    }



    /* Botón cerrar siempre visible (encima de botones y grilla) */

    .modal-lista > .modal-close,

    .cb-modal-lista > .cb-modal-close {

        z-index: 60 !important;

        position: absolute !important;

        top: max(6px, env(safe-area-inset-top)) !important;

        right: max(6px, env(safe-area-inset-right)) !important;

    }



    .modal-lista-actions.toolbar-acciones {

        padding-right: 48px !important;

        box-sizing: border-box !important;

    }



    .modal-lista.sl-lista-mobile-ready,

    .cb-modal-lista.sl-lista-mobile-ready {

        display: flex !important;

        flex-direction: column !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        position: relative !important;

    }



    .modal-lista.sl-lista-mobile-ready {

        width: calc(100vw - 12px) !important;

        max-width: calc(100vw - 12px) !important;

        max-height: 92dvh !important;

    }



    .cb-modal-lista.sl-lista-mobile-ready {

        position: fixed !important;

        inset: 8px !important;

        width: auto !important;

        height: auto !important;

        max-height: min(92dvh, calc(100dvh - 16px)) !important;

    }



    /* Consulta sorteos: en horizontal usar casi toda la pantalla */

    @media (orientation: landscape) {

        .cb-modal-lista.sl-lista-mobile-ready {

            position: fixed !important;

            inset: 4px !important;

            width: auto !important;

            max-width: none !important;

            max-height: calc(100dvh - 8px) !important;

            transform: none !important;

            border-radius: 12px !important;

            padding: 8px 6px 10px !important;

        }

    }



    /* Listas editor: botones del modal más compactos */

    .modal-lista.sl-lista-mobile-ready .modal-lista-actions.toolbar-acciones {

        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 6px !important;

        padding-right: 44px !important;

    }



    .modal-lista.sl-lista-mobile-ready .modal-lista-actions.toolbar-acciones .btn {

        width: 100% !important;

        min-height: 38px !important;

        padding: 6px 8px !important;

        font-size: 0.78rem !important;

        line-height: 1.15 !important;

        white-space: normal !important;

    }



    /* Scroll del canvas; la grilla mantiene columnas alineadas */

    .modal-lista #listaCanvas,

    .modal-lista .lista-canvas,

    .cb-modal-lista #cbListaCanvas,

    .cb-modal-lista .cb-modal-grid-zoom,

    .cb-modal-lista .cb-lista-parley {

        flex: 1 1 auto !important;

        min-height: 120px !important;

        width: 100% !important;

        max-width: none !important;

        overflow-x: auto !important;

        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;

        touch-action: pan-x pan-y !important;

    }



    .modal-lista #contentLista,

    .modal-lista #contentListaMonazos,

    .modal-lista #contentListaRifa,

    .cb-modal-lista #cbContentLista,

    .cb-modal-lista .cb-modal-wrap {

        width: max-content !important;

        min-width: 100% !important;

        max-width: none !important;

        transform: none !important;

    }



    /* Consulta sorteos (ventas) — totales bajo cada columna */

    #modalLista .fila-cabecera,

    #modalLista .fila-numeros,

    #modalLista .fila-totales-f,

    #modalLista .fila-totales-f.totales-reventado {

        display: grid !important;

        width: max-content !important;

        max-width: none !important;

        flex-wrap: nowrap !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }



    /* Listas editor + ventas — rejilla normal / rev / parley */

    .modal-lista .lista-unica-normal .fila-cabecera,

    .modal-lista .lista-unica-normal .fila-numeros,

    .modal-lista .lista-unica-normal .fila-totales-f,

    .modal-lista .lista-unica-rev .fila-cabecera,

    .modal-lista .lista-unica-rev .fila-numeros,

    .modal-lista .lista-unica-rev .fila-totales-f-rev,

    .modal-lista .lista-unica-parley .fila-cabecera.parley,

    .modal-lista .lista-unica-parley .fila-numeros.parley,

    .modal-lista .lista-unica-parley .fila-totales-f {

        display: grid !important;

        width: max-content !important;

        max-width: none !important;

        flex-wrap: nowrap !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }



    /* Consulta sorteos banca */

    .cb-modal-lista .cb-fila-cabecera,

    .cb-modal-lista .cb-fila-numeros,

    .cb-modal-lista .cb-fila-totales-f,

    .cb-modal-lista .cb-fila-totales-f.cb-totales-reventado,

    .cb-modal-lista .cb-lista-parley .cb-fila-cabecera.parley,

    .cb-modal-lista .cb-lista-parley .cb-fila-numeros.parley {

        display: grid !important;

        width: max-content !important;

        max-width: none !important;

        flex-wrap: nowrap !important;

    }



    .modal-lista,

    .cb-modal-lista {

        backdrop-filter: none !important;

    }

}


