/* =========================================================
   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) {
    /* ----- Altura única 48px: select + fecha alineados ----- */
    .cg-shell select,
    .banca-wrap select,
    .cfd-root select,
    .banca-wrap .cb-select,
    .banca-wrap .cb-combo-input,
    .banca-wrap .cg-vendedor-input,
    .banca-wrap .input.input-compact,
    .banca-wrap .listas-juego-select,
    .banca-wrap .listas-sorteo-select,
    .banca-wrap .select-usuario,
    .banca-wrap .select-lista,
    .banca-wrap .pr-select,
    .banca-wrap .ap-select,
    .banca-wrap .bn-select,
    .banca-wrap .cfd-select,
    .banca-wrap .va-select-pro,
    .banca-wrap .juego-select-mobile-safe,
    .banca-wrap .hora-ampm-mobile-safe,
    .banca-wrap .tipo-sorteo-select,
    .banca-wrap .rifa-filtro-sorteo,
    .banca-wrap .recibir-qr-listero-select-top {
        appearance: auto !important;
        -webkit-appearance: menulist !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        line-height: 1.2 !important;
        padding: 0 36px 0 14px !important;
        font-size: 16px !important;
        background-color: #fff !important;
        background-image: none !important;
        border: 1px solid rgba(15, 23, 42, 0.14) !important;
        border-radius: 14px !important;
        color: #0f172a !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .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;
    }
}