/* =========================================================
   BANCA móvil — Demo Nexloto (≤900px)
   Selectores: diálogo nativo (como Juego/Modo)
   Multi-select: mismo estilo centrado con círculos a la derecha
   Fechas: altura igual al select + calendario que abre al tocar
   ========================================================= */

@media (max-width: 900px) {
    /* Selectores nativos: skin en banca-selectores-ganador.css (solo <select>) */

    .banca-wrap .cb-combo-arrow,
    .banca-wrap .cg-vendedor-toggle {
        position: absolute !important;
        top: 50% !important;
        right: 8px !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
        border: 1px solid rgba(15, 23, 42, 0.1) !important;
        border-radius: 10px !important;
        background: #f1f5f9 !important;
        color: #334155 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 4 !important;
    }

    .banca-wrap .cb-combo {
        position: relative !important;
    }

    /* ----- Fecha: misma altura que select, icono centrado ----- */
    .cg-shell .sl-date-wrap,
    .cg-shell .cg-date-wrap.sl-date-wrap,
    .banca-wrap .sl-date-wrap,
    .banca-wrap .cg-date-wrap.sl-date-wrap,
    .banca-wrap .cb-field-fecha .sl-date-wrap,
    .banca-wrap .cb-modal-hist .sl-date-wrap,
    .cfd-root .sl-date-wrap {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        height: 48px !important;
        display: block !important;
    }

    .cg-shell .sl-date-wrap input.sl-date-input,
    .cg-shell .cg-date-wrap input.sl-date-input,
    .cg-shell input.cg-date.sl-date-input,
    .banca-wrap .sl-date-wrap input.sl-date-input,
    .banca-wrap .cg-date-wrap input.sl-date-input,
    .banca-wrap input.cg-date.sl-date-input,
    .banca-wrap input.cb-date.sl-date-input {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        line-height: 48px !important;
        padding: 0 48px 0 14px !important;
        margin: 0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border: 1px solid rgba(15, 23, 42, 0.14) !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: none !important;
        transform: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .banca-wrap .sl-date-wrap input.sl-date-input:focus,
    .banca-wrap input.cg-date:focus {
        transform: none !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    }

    .cg-shell .cg-date-picker-btn,
    .cg-shell .sl-date-picker-btn,
    .banca-wrap .cg-date-picker-btn,
    .banca-wrap .sl-date-picker-btn {
        position: absolute !important;
        top: 50% !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 10px !important;
        border: 1px solid rgba(15, 23, 42, 0.1) !important;
        background: #f1f5f9 !important;
        z-index: 11 !important;
        touch-action: manipulation !important;
        pointer-events: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
    }

    .banca-wrap .cg-date-picker-btn:hover,
    .banca-wrap .sl-date-picker-btn:hover {
        transform: translateY(-50%) !important;
    }

    .banca-wrap .sl-date-icon {
        font-size: 16px !important;
        line-height: 1 !important;
    }

    /* ----- Diálogo centrado (vendedores / sorteos / listeros) — como Juego ----- */
    .sl-dropdown-mobile-native,
    .cb-combo-dropdown.sl-dropdown-mobile-native,
    .cb-multi-panel.sl-dropdown-mobile-native {
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(92vw, 400px) !important;
        max-width: min(92vw, 400px) !important;
        max-height: min(70dvh, 480px) !important;
        border-radius: 20px !important;
        background: #fff !important;
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22) !important;
        border: none !important;
        padding: 6px 0 !important;
    }

    .sl-dropdown-mobile-native::before,
    .cg-vendedor-dropdown::before {
        display: none !important;
    }

    .cb-combo-backdrop {
        background: rgba(15, 23, 42, 0.38) !important;
        z-index: 2147483646 !important;
    }

    /* Consulta Totales: sin capa ::after (tapaba el panel y oscurecía todo) */
    .cg-shell:has(.cg-vendedor-dropdown)::after {
        display: none !important;
        content: none !important;
    }

    .cg-vendedor-field,
    .cg-vendedor-wrap {
        position: relative !important;
        z-index: auto !important;
        isolation: auto !important;
    }

    .cg-vendedor-dropdown {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(92vw, 400px) !important;
        max-width: min(92vw, 400px) !important;
        max-height: min(70dvh, 480px) !important;
        z-index: 500000 !important;
        border-radius: 20px !important;
        background: #fff !important;
        color: #0f172a !important;
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28) !important;
        border: none !important;
        overflow: hidden !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
    }

    .cg-filters,
    .cg-filters-row,
    .cg-shell .cg-header {
        filter: none !important;
        opacity: 1 !important;
    }

    /* Filas tipo selector Android (texto izq, círculo der) */
    .sl-dropdown-mobile-native .cb-multi-row,
    .sl-dropdown-mobile-native .cb-multi-row-top,
    .cg-vendedor-dropdown .cg-vendedor-item,
    .cg-vendedor-dropdown .cg-vendedor-item-todos,
    .cg-vendedor-dropdown .cg-vendedor-dropdown-head {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        min-height: 52px !important;
        padding: 14px 20px !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
        border-radius: 0 !important;
        background: #fff !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #0f172a !important;
        box-shadow: none !important;
    }

    .sl-dropdown-mobile-native .cb-multi-row input[type="checkbox"],
    .cg-vendedor-dropdown .cg-vendedor-check,
    .cg-vendedor-dropdown input[type="checkbox"] {
        order: 2 !important;
        flex-shrink: 0 !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        margin: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        border: 2px solid #94a3b8 !important;
        border-radius: 50% !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .sl-dropdown-mobile-native .cb-multi-row input[type="checkbox"]:checked,
    .cg-vendedor-dropdown input[type="checkbox"]:checked {
        border-color: #2563eb !important;
        background: radial-gradient(circle at center, #2563eb 42%, #fff 44%) !important;
    }

    .sl-dropdown-mobile-native .cb-multi-row span,
    .sl-dropdown-mobile-native .cb-multi-row-top span,
    .cg-vendedor-item-text {
        order: 1 !important;
        flex: 1 !important;
        text-align: left !important;
    }

    .sl-dropdown-mobile-native .cb-multi-list,
    .cg-vendedor-list {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
    }

    .sl-dropdown-mobile-native .cb-multi-row-top {
        background: #f8fafc !important;
        font-weight: 700 !important;
    }

    .cg-vendedor-dropdown-head {
        font-size: 14px !important;
        color: #64748b !important;
        font-weight: 600 !important;
    }

    .cg-vendedor-actions {
        border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
        padding: 12px 16px !important;
        background: #f8fafc !important;
    }

    /* Modal ver lista */
    .cb-modal-lista {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
    }

    #cbListaCanvas {
        width: 100% !important;
        max-width: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
    }

    #cbContentLista.cb-modal-wrap {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        zoom: 1 !important;
        transform: none !important;
    }

    #cbListaCanvas #cbContentLista *,
    #cbListaCanvas .cb-modal-grid-zoom,
    #cbListaCanvas .cb-modal-grid-zoom * {
        max-width: none !important;
    }

    .cb-modal-grid-zoom,
    .cb-lista-parley {
        width: max-content !important;
        overflow-x: visible !important;
    }

    body:has(.cb-modal-overlay),
    body:has(.cb-modal-overlay-hist) {
        position: relative !important;
        touch-action: auto !important;
    }

    /* Números prohibidos: multi-select — diseño en banca-selectores-ganador.css */
    .rest-wrap .ms-btn.ms-btn-compact {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }

    .rest-wrap .ms-panel {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(92vw, 400px) !important;
        max-width: min(92vw, 400px) !important;
        max-height: min(70dvh, 480px) !important;
        z-index: 500001 !important;
        border-radius: 20px !important;
        background: #fff !important;
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .rest-wrap .ms-list {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: min(52dvh, 360px) !important;
    }

    .rest-wrap .ms-item {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }

    /* Ventas: diseño unificado en banca-selectores-ganador.css */

    /* iOS/Android: anular position:fixed en body de modales scoped (evita saltos y teclado roto) */
    body:has(.modal-backdrop),
    body:has(.modal-overlay),
    body:has(.vendor-dropdown),
    body:has(.modal-suma-overlay),
    body:has(.modal-dif-overlay),
    body:has(.confirm-overlay),
    body:has(.venta-modal-backdrop),
    body:has(.admin-confirm-backdrop),
    body:has(.modal-backdrop-lista),
    body:has(.suma-alert-overlay),
    body:has(.tb-backdrop),
    body:has(.rf-backdrop),
    body:has(.pr-modal-overlay),
    body:has(.rest-wrap .ms-panel) {
        position: relative !important;
        width: auto !important;
        touch-action: manipulation !important;
        overflow: hidden;
    }

    /* Noticias: panel centrado móvil (botón estilo en banca-selectores-ganador.css) */
    .noticias-admin .vendor-dropdown {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(92vw, 400px) !important;
        max-width: min(92vw, 400px) !important;
        max-height: min(70dvh, 480px) !important;
        z-index: 500001 !important;
        border-radius: 20px !important;
        background: #fff !important;
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .noticias-admin .vendor-select-root::before {
        background: rgba(15, 23, 42, 0.38) !important;
    }
}